Copy-to-Clipboard Feedback

Une icône, comme le menu hamburger, se transforme en une autre (X) grâce à des barres qui pivotent et se déplacent.

Ajoute un « Icon Morph » (aussi appelé hamburger to X ou menu icon morph) sur [où].
À chaque appui, les barres du haut et du bas doivent d’abord glisser ensemble vers le milieu puis pivoter pour former un X pendant que la barre centrale disparaît en fondu ; un nouvel appui inverse le tout : rapide et vif.
Fais-en un vrai bouton bascule dont le libellé accessible et l’état déplié changent avec lui, et garde la taille de l’icône fixe pour que rien ne bouge autour.

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 bouton remplace son libellé par un petit spinner, ou en ajoute un, pendant qu’une action s’exécute.

Ajoute un « Button Loading State » (aussi appelé spinner button ou loading button) sur [où].
À l’appui, le bouton doit s’enfoncer légèrement, faire disparaître son libellé en fondu et afficher un petit spinner à sa place pendant l’action, puis ramener le libellé une fois terminé.
Garde la largeur du bouton fixe pendant le chargement, bloque les clics répétés et annonce l’état occupé aux lecteurs d’écran.

Une icône d’œil passe d’ouverte à barrée quand le mot de passe est affiché ou masqué.

Ajoute un bouton afficher/masquer le mot de passe (Password Reveal Toggle) (aussi appelé show/hide password ou eye icon toggle) sur [où].
Un appui sur l’œil doit effacer rapidement sa barre pendant que les points masqués se fondent en vrais caractères, et un nouvel appui redessine la barre et les masque : fluide et rapide, sans rebond.
Garde la largeur du champ stable pour que le texte ne saute pas, et fais du bouton un vrai bouton dont le libellé indique si le mot de passe est affiché.

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.

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.