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

Micro-interaction d'ajout au panier avec envol parabolique (Master Prompt)

Le prompt d'ingénierie complet pour concevoir une micro-interaction d'achat ultra-gratifiante avec calcul parabolique de Bézier et rebond élastique du panier.

Débutant 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 : le produit concerné [nom du produit, photo et prix], le texte initial du bouton d'action [libellé, ex: "Ajouter au panier"], l'emplacement exact de l'icône du panier [position, ex: haut droite de l'écran], et la couleur d'accent d'achat [couleur d'accent, ex: Émeraude #10B981 ou Rose #F06BA8].

</inputs>

<direction>Direction artistique & Règles visuelles

Micro-interaction de commerce électronique de niveau Stripe / Shopify Plus. L'acte d'achat doit être viscéralement gratifiant, physique et rassurant. Au clic, le bouton ne change pas bêtement de couleur : il s'enfonce avec une physique élastique (scale 0.94), une miniature volante du produit s'extrait du composant et trace une courbe parabolique de Bézier dans les airs avec un flou cinétique orienté vers l'icône du panier. L'icône du panier réagit à l'impact avec un rebond vigoureux (balancement de -14° à +8° puis 0°), absorbe la particule et incrémente son badge de quantité qui gonfle et se stabilise. Strictement banni : particules explosives désordonnées, confettis multicolores kitsch, sauts d'images (jank), et blocage de l'interface utilisateur.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Durée totale 1,2 seconde (1200ms) articulée en 4 micro-moments : - 0ms - 150ms : Clic et compression. Le bouton s'écrase légèrement sous l'appui du curseur, libère un anneau d'onde de choc discret et affiche un micro-spinner de 16px. - 150ms - 650ms : L'envol parabolique. Une miniature de l'image du produit (48x48px avec coins arrondis et ombre portée) est propulsée vers le haut puis plonge vers le panier le long d'une courbe quadratique avec réduction progressive d'échelle (scale 1.0 -> 0.25) et flou de mouvement. - 650ms - 950ms : La capture et l'impact. La miniature disparaît dans le panier. L'icône du panier subit une déformation élastique (squash and stretch : scaleX 1.25 scaleY 0.8 puis retour). Le badge numérique d'articles passe de N à N+1 en bondissant à scale 1.45 avec fond contrasté. - 950ms - 1200ms : Confirmation. Le bouton revient à sa taille normale avec une coche de validation verte "Ajouté !" avant de réinitialiser doucement son état.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML/CSS/JS autonome. Calcul géométrique des trajectoires via getBoundingClientRect() pour relier le point de départ et la destination exacte sur n'importe quel écran. 2. Trajectoire parabolique : coordonnées interpolées le long d'une courbe de Bézier quadratique P(t) = (1-t)² P0 + 2(1-t)t P1 + t² P2 avec point de contrôle P1 surélevé au-dessus de la ligne directe. 3. Rendu 60fps sans saccade avec translate3d() et will-change temporaire sur la particule volante uniquement pendant l'animation.

</build>

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

Détruisez immédiatement l'élément DOM du clone volant après la fin de la transition pour éviter toute accumulation de nœuds orphelins dans la mémoire du navigateur lors d'ajouts répétés.

</gotchas>

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

Demande-moi d'abord mon produit et mes couleurs (<inputs>), puis confirme les coordonnées du panier avant d'écrire le code.

</start>

À remplacer avant de coller : [nom du produit, photo et prix] · [libellé, ex: "Ajouter au panier"] · [position, ex: haut droite de l'écran] · [couleur d'accent, ex: Émeraude #10B981 ou Rose #F06BA8]

Pourquoi ça marche mieux

Demande vague

« mets une animation quand on clique sur acheter »

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.

Cinématique de l'interaction (durée totale : 850ms) : - 0ms - 150ms : Clic bouton, légère contraction (scale 0.95), pulsation d'un anneau d'onde de choc. - 150ms - 700ms : Duplication d'un clone miniature de l'image (40x40px) qui traverse l'écran le long d'une courbe quadratique vers l'icône panier avec réduction d'échelle (scale de 1.0 à 0.3) et flou directionnel. - 700ms - 850ms : Réception par l'icône du panier : rotation vive (-12deg puis +8deg puis 0deg), rebond du badge de quantité (scale 1.4 puis retour à 1.0 avec fond vert ou rose vif). - 850ms : Le bouton initial revient à son libellé initial sans rechargement de page.

Pour améliorer la réponse, relancez

Ajoute un mini-tiroir panier latéral qui s'entrouvre brièvement lors de l'ajout.
Propose une variante avec confettis légers ou étincelles lors de la validation.

Conseil. Calculez dynamiquement les coordonnées de départ et d'arrivée avec 'element.getBoundingClientRect()' pour que la trajectoire reste parfaite quelle que soit la résolution de l'écran.

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