Notification Badge Bounce

Une copie de l’élément s’agrandit et s’estompe en boucle, comme une onde de radar.

Ajoute un effet « Ping » (aussi appelé radar ping ou pulse ring) sur [où].
Une copie de l’élément doit s’agrandir vers l’extérieur et s’estomper, encore et encore à un rythme régulier, pendant que l’élément lui-même reste immobile.
Dessine l’anneau sur un calque séparé pour qu’il ne modifie jamais la mise en page, et arrête la boucle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément sautille de haut en bas avec des rebonds de plus en plus faibles.

Ajoute un effet d’attention « Bounce » sur [où].
L’élément doit sauter puis retomber en quelques rebonds rapides, de plus en plus petits, avec un léger écrasement à chaque atterrissage.
Joue-le une seule fois au déclenchement plutôt qu’en boucle, et désactive-le si l’utilisateur a activé la réduction des animations.

L’élément grossit rapidement puis revient à sa taille avec un petit rebond élastique.

Ajoute un effet de survol « Pop » sur [où].
À chaque entrée du pointeur, l’élément doit gonfler une fois rapidement puis revenir à sa taille normale, comme un petit rebond élastique.
Joue-le une fois par survol au lieu de garder la taille agrandie ou de boucler, et évite que la mise en page autour ne bouge.

L’image du produit rétrécit et s’envole en arc de cercle jusqu’à l’icône du panier.

Ajoute une animation « Add to Cart Fly » (aussi appelée fly to cart ou add-to-cart animation) sur [où].
Quand on appuie sur le bouton d’ajout, une petite copie de l’image du produit doit rétrécir en volant selon un arc fluide et rapide jusqu’à l’icône du panier, et le panier doit faire un petit sursaut pendant que son compteur se met à jour.
Joue-la une fois par appui sans déplacer la carte produit d’origine, et supprime le vol si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), tout en mettant quand même le panier à jour.

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é.

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.