Vendre et promouvoir · Promotions et lancements

Animation d'ajout au panier avec trajectoire de particules

Animez le bouton d'achat avec envol de la vignette produit vers l'icône du panier et rebond du badge numérique.

Débutant Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un spécialiste de l'e-commerce et de l'animation d'engagement d'achat.

Contexte

Sur ma boutique en ligne [nom de la boutique ou produit], je veux rendre l'acte d'achat particulièrement gratifiant et évident. Le bouton se nomme [texte du bouton, ex: 'Ajouter au panier'] et l'icône du panier se situe [position, ex: en haut à droite de l'en-tête]. Les couleurs de la marque sont [couleur d'accent et couleur de fond].

Tâche

Rédige le code autonome (HTML, SVG et CSS avec JavaScript vanilla) de la micro-interaction d'ajout au panier : au clic, le bouton passe brièvement à un état 'Validé' avec coche animée, une miniature volante du produit s'élève selon une courbe de Bézier parabolique vers le panier en haut de page, et l'icône du panier absorbe la miniature avec un rebond élastique et incrémente son badge compteur.

Format

Un fichier HTML complet avec une fiche produit réaliste (photo, titre, prix, bouton) et l'en-tête contenant l'icône du panier pour tester l'effet immédiatement.

À remplacer avant de coller : [nom de la boutique ou produit] · [texte du bouton, ex: 'Ajouter au panier'] · [position, ex: en haut à droite de l'en-tête] · [couleur d'accent et couleur de fond]

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