Password Reveal Toggle (afficher/masquer le mot de passe)

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.

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 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 flèche de pointeur trace un cadre de mise en valeur autour d’un mot quand le texte apparaît au défilement.

Ajoute un effet « Pointer Highlight » sur [où].
Quand le texte apparaît au défilement, un cadre doit se tracer autour du mot clé de gauche à droite pendant qu’une petite flèche de pointeur longe son coin, de façon fluide et régulière, comme si quelqu’un entourait le mot à la main.
Ne le trace qu’à la première apparition, sans décaler le texte, et affiche directement le cadre terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit légèrement pendant l’appui et revient avec un ressort au relâchement.

Ajoute un effet « Press (Button Tap Scale) » (aussi appelé tap feedback ou press state) sur [où].
Pendant l’appui, l’élément doit rétrécir légèrement et s’assombrir un peu, puis reprendre sa taille avec un petit rebond au relâchement : rapide et discret.
Affiche le même retour au clavier et au toucher, et empêche la mise en page autour de bouger.

Tirer une liste vers le bas fait apparaître un indicateur de chargement et recharge le contenu au relâchement.

Ajoute une interaction tirer pour actualiser (Pull to Refresh) (aussi appelée swipe to refresh) sur [où].
Quand on tire la liste vers le bas depuis le haut, elle doit suivre le doigt avec un peu de résistance et révéler un indicateur de chargement qui tourne pendant la traction ; au relâchement, il continue de tourner pendant le rechargement, puis la liste remonte en douceur.
Ne la déclenche que lorsque la liste est déjà tout en haut, et propose aussi un bouton d’actualisation classique aux utilisateurs du clavier et des lecteurs d’écran.