Add to Cart Fly

Un élément parcourt un chemin courbe personnalisé et peut pivoter pour le suivre.

Ajoute une animation « Motion Path » (aussi appelée animate along path) sur [où].
Un petit élément doit parcourir un itinéraire courbe personnalisé à un rythme lent et régulier, en pivotant pour faire face à sa direction de déplacement.
Utilise un itinéraire fermé pour que la boucle se répète sans saut, et fais en sorte que l’itinéraire s’adapte à son conteneur au lieu de garder une taille fixe.

Un badge de compteur apparaît d’un coup, rebondit ou pulse à l’arrivée d’une nouvelle notification.

Ajoute une animation « Notification Badge Bounce » (aussi appelée badge pop ou ping) sur [où].
À l’arrivée d’une nouvelle notification, le badge de compteur doit surgir de nulle part et se poser avec deux petits rebonds rapides et élastiques, pendant qu’un anneau doux s’en échappe une fois.
Joue-la une fois par nouvelle notification plutôt qu’en boucle, et annonce le nouveau compte aux lecteurs d’écran.

Quand on coche la case, une coche se dessine trait par trait à l’intérieur.

Ajoute une animation « Checkbox Check Draw » (aussi appelée animated checkbox ou checkmark draw) sur [où].
Quand on coche la case, elle doit se remplir de couleur et la coche doit se dessiner d’un seul trait rapide et fluide ; quand on la décoche, elle s’efface de la même façon.
Garde une vraie case à cocher avec son état coché, utilisable au clavier et avec un anneau de focus visible.

Des morceaux de papier colorés jaillissent puis retombent pour célébrer une réussite.

Ajoute une célébration « Confetti » (aussi appelée confetti burst) sur [où].
De petits morceaux de papier colorés doivent jaillir rapidement du bouton, puis tournoyer et retomber en flottant tout en disparaissant en fondu, en une pluie courte et joyeuse.
Déclenche-la une fois par réussite au lieu de la faire tourner en boucle, évite qu’elle bloque les clics sur la page et supprime-la si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’icône de copie se transforme en coche et le libellé affiche Copié un instant.

Ajoute une animation « Copy-to-Clipboard Feedback » (aussi appelée copied state ou copy icon to checkmark) sur [où].
Quand on appuie sur le bouton de copie, l’icône de copie doit rétrécir rapidement pendant qu’une coche se dessine et que le libellé devient « Copié », puis tout revient en douceur après un court instant.
Garde le bouton à la même taille pendant l’échange pour que rien ne bouge, et annonce l’état copié aux lecteurs d’écran.