Confetti

Une icône de cœur se remplit de couleur et projette de petites particules ou pulse au clic.

Ajoute une animation « Like / Heart Burst » (aussi appelée heart animation ou favorite toggle) sur [où].
Au like, le cœur doit se remplir de couleur et rebondir avec élasticité pendant qu’un anneau et de petits points jaillissent vers l’extérieur puis s’estompent, le tout rapide et ludique ; en retirant le like, le cœur se vide simplement, sans effet.
Fais-en un vrai bouton bascule avec son état pressé, et ne joue l’éclat qu’à l’activation.

De nombreux petits points dérivent, se relient ou réagissent au pointeur sur l’arrière-plan.

Ajoute un arrière-plan « Particles » (aussi appelé floating particles ou particle field) sur [où].
De petits points de tailles différentes doivent flotter et dériver lentement sur des trajectoires douces et vagabondes, chacun à son propre rythme : calme et aérien.
Garde un nombre de points modéré pour que ça reste léger sur les appareils plus lents, mets-le en pause hors de l’écran et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

De petites paillettes brillantes scintillent et disparaissent autour d’un texte ou d’une section.

Ajoute un effet « Sparkles » (aussi appelé glitter ou twinkle particles) sur [où].
De petites paillettes en forme d’étoile doivent surgir, scintiller et s’estomper autour du texte, à des endroits épars et à des moments aléatoires : léger et rapide.
Garde les paillettes décoratives et masquées pour les lecteurs d’écran, ne couvre jamais le texte lui-même et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres s’éparpillent au survol puis reviennent, ou éclatent vers l’extérieur à l’apparition.

Ajoute un effet de survol « Letter Scatter » (aussi appelé scatter gather letters ou explosive letter burst) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit s’envoler un peu dans sa propre direction avec une légère rotation, puis se regrouper en douceur dans le mot quand le pointeur s’en va.
Garde fixe la place du mot dans la mise en page pendant que les lettres bougent, fais-le lire comme un seul mot par les lecteurs d’écran, et affiche le même effet au focus clavier.

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.

Le libellé du placeholder remonte et rétrécit au-dessus du champ quand il a le focus ou est rempli.

Ajoute un label flottant (Floating Label) sur [où], aussi appelé float label ou animated placeholder.
Quand le champ a le focus ou contient une valeur, le libellé placé à l’intérieur doit glisser vers le haut et rétrécir jusqu’au bord supérieur du champ, de façon fluide et rapide, et ne redescendre que quand le champ est vide et sans focus.
Garde un vrai label associé à l’input, et fais en sorte que la hauteur du champ ne change pas pour que le formulaire ne bouge jamais.