Checkbox Check Draw

Un cercle et une coche se dessinent d’eux-mêmes pour confirmer qu’une action a réussi.

Ajoute une animation « Success Checkmark » (aussi appelée animated success tick) sur [où].
Un cercle doit se dessiner d’un seul trait fluide, puis la coche se trace à l’intérieur et tout le symbole fait un petit rebond doux : calme et assuré.
Joue-la une fois quand l’action réussit, accompagne-la d’un message texte que les lecteurs d’écran peuvent annoncer, et affiche directement le symbole terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un tracé SVG semble se dessiner le long de son chemin grâce à l’animation du décalage des tirets.

Ajoute une animation « Line Drawing » (aussi appelée path drawing ou self-drawing SVG) sur [où].
Chaque trait doit sembler se dessiner tout seul, en douceur, le long de son chemin du début à la fin, et un second trait, comme une coche, suit juste après le premier.
Joue-la une seule fois à l’entrée à l’écran plutôt qu’en boucle, et affiche les lignes entièrement tracées si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bouton rond glisse le long d’un rail dont la couleur change entre désactivé et activé.

Ajoute une animation d’interrupteur (Toggle Switch) (aussi appelé switch) sur [où].
À l’activation ou à la désactivation, le bouton rond doit glisser en douceur jusqu’à l’autre bout du rail pendant que la couleur du rail change : rapide et net, sans rebond.
Fais-en un vrai interrupteur accessible (role="switch" avec son état checked) qui fonctionne aussi au clavier.

Une liste d’étapes se met en évidence ou se coche une à une à mesure qu’une longue tâche avance.

Ajoute un « Multi-Step Loader » (aussi appelé step loader ou checklist loader) sur [où].
Les étapes doivent s’allumer une à une de haut en bas, et chacune doit recevoir une petite coche qui apparaît avec un léger rebond une fois terminée, à un rythme calme et lisible.
Fais avancer les étapes selon la progression réelle de la tâche plutôt qu’avec un minuteur fixe, et annonce chaque étape terminée aux lecteurs d’écran.

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.

Un élément suit le pointeur quand on le fait glisser et peut être limité à une zone ou à un axe.

Ajoute une interaction « Drag » (aussi appelée draggable ou drag constraints) sur [où].
L’élément doit suivre directement le pointeur pendant qu’on le fait glisser, s’arrêter aux bords de sa zone autorisée et revenir à sa position de repos avec un petit rebond quand on le relâche.
Fais-le fonctionner au toucher comme à la souris sans que la page défile en dessous, et propose un moyen de le déplacer au clavier.