Motion design et vidéo · Démos logicielles et interfaces

Grille Bento interactive avec 3D Tilt (Master Prompt Bento Grid)

Le prompt d'ingénierie complet pour construire une grille bento de niveau Apple/Vercel avec émergence en cascade, effet 3D Tilt et bordures lumineuses au curseur.

Intermédiaire Essayé le 28 octobre 2026

Master Prompt d’ingénierie Motion Design

Prompt Master Motion Design (Architecture complète)

Prêt à copier dans Claude 3.7 Sonnet, Cursor ou votre environnement de code

<inputs>Paramètres d’entrée requis

Demande-moi d'abord : les 4 à 6 fonctionnalités ou réalisations à organiser dans la grille bento [éléments phares], la hiérarchie visuelle (une tuile géante 2x2, une tuile panoramique 2x1, et des tuiles carrées 1x1), l'ambiance chromatique (mode sombre studio #0A0A0C ou blanc cassé #F8F9FA, couleur d'accent [accent]), et la police d'interface (Geist ou Inter).

</inputs>

<direction>Direction artistique & Règles visuelles

Grille bento interactive de niveau Apple / Vercel Showcase. Chaque tuile est un chef-d'œuvre de micro-motion autonome. À l'apparition, les cartes ne tombent pas en bloc : elles émergent en cascade ordonnée (stagger) avec un léger étirement vertical. Au survol, chaque carte réagit avec une inclinaison 3D physique (3D Tilt) proportionnelle à la position du curseur, tandis qu'une bordure lumineuse dynamique (spotlight border gradient) suit précisément la souris. L'intérieur de chaque tuile héberge un composant animé vivant (ex: badge d'état qui pulse, compteur en direct, mini-graphique ou interrupteur). Strictement banni : grilles déséquilibrées aux marges inégales, effets de zoom exagérés qui dépassent du conteneur, ralentissements de scroll, et contrastes criards.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Animation d'accueil en 3 actes (durée 10 secondes en boucle de démonstration) : - 0.0s - 1.8s (Cascade d'apparition) : Déploiement des 4 tuiles décalées de 140ms chacune (translateY 40px -> 0px, scale 0.95 -> 1.0, opacité 0 -> 1) avec un ressort amorti. - 1.8s - 6.5s (Démonstration du curseur) : Un curseur simulé se déplace le long de la grille bento. Il survole la tuile principale (celle-ci s'incline en 3D vers le curseur, la lueur de bordure s'allume), clique sur un commutateur (le composant interne s'anime), puis glisse vers la tuile analytique. - 6.5s - 10.0s (Stabilisation & appel à l'action) : Toutes les tuiles vibrent imperceptiblement en lévitation douce, et le bouton d'action de la carte finale s'illumine.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML5/CSS Grid pur avec JavaScript léger pour les calculs de perspective pointermove. 2. Effet Spotlight : calcul dynamique des variables CSS --mouse-x et --mouse-y par getBoundingClientRect() alimentant un dégradé radial radial-gradient() sur la bordure de 1px. 3. Rendu 60fps Playwright pour exportation en clip vidéo MP4 de démonstration produit.

</build>

<gotchas>Pièges techniques & Erreurs à éviter

Ne jamais déclencher de recalcul de style global lors du déplacement du curseur : modifiez uniquement les variables CSS locales sur la carte survolée pour garantir 60fps stables.

</gotchas>

<start>Consigne d’amorçage & Démarrage

Demande-moi d'abord mes 4 fonctionnalités et leur disposition (<inputs>), puis valide l'architecture de la grille avant de générer le code.

</start>

À remplacer avant de coller : [éléments phares] · [accent]

Pourquoi ça marche mieux

Demande vague

« fais une grille bento avec du relief »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Architecture technique de la grille bento : - Dispositif Grid responsive : 3 colonnes sur desktop, 1 colonne sur mobile. - Animation d'entrée : chaque carte émerge du bas (translateY 30px -> 0px, opacity 0 -> 1) avec un délai calculé (index * 120ms) et une courbe douce. - Effet Tilt 3D : calcul de l'écart par rapport au centre de la carte (rect.left + rect.width / 2) pour appliquer une rotation X et Y comprise entre -10deg et +10deg. - Lueur de survol : pseudo-élément radial-gradient positionné sur les coordonnées clientX/clientY de la souris pour illuminer la bordure fine de 1px. - Ombre portée dynamique qui s'accentue du côté opposé à l'inclinaison pour renforcer la profondeur physique.

Pour améliorer la réponse, relancez

Ajoute un composant interactif animé au sein d'une des cartes (ex: graphique en direct ou badge clignotant).
Génère le composant pour React / Tailwind CSS avec Framer Motion.

Conseil. Utilisez 'requestAnimationFrame' pour fluidifier le calcul des coordonnées de la souris et évitez toute saccade sur les écrans à taux de rafraîchissement élevé (120 Hz).

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite