Border Ripple

Au survol, un contour s’écarte de l’élément ou se resserre vers lui.

Ajoute un effet de survol « Outline Expand » sur [où].
Un contour doit partir collé au bord de l’élément et s’en écarter pour laisser un petit espace tout autour, rester ainsi pendant le survol et se refermer quand le pointeur sort : fluide et rapide.
Dessine le contour sans changer la taille de l’élément ni pousser le contenu voisin, et affiche le même effet au focus clavier.

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

Des cercles concentriques s’étendent depuis un point central et s’estompent.

Ajoute un effet « Ripple Rings » (aussi appelé background ripple ou concentric ripples) sur [où].
Des anneaux doivent s’étendre sans cesse depuis un point central et s’estomper en grandissant, régulièrement espacés l’un après l’autre : lent et régulier.
Garde l’élément central immobile à sa place et arrête les ondes si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément change d’échelle avec un dépassement élastique au début ou à la fin du survol.

Ajoute un effet au survol « Bounce Scale » (aussi appelé bounce in / out) sur [où].
L’élément doit grossir légèrement avec un dépassement élastique bien visible, en allant brièvement au-delà de sa taille finale avant de se stabiliser, puis rebondir de la même façon quand le pointeur sort.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Un fond de surbrillance glisse d’une carte à l’autre dans une grille pour suivre celle qui est survolée.

Ajoute un « Card Hover Effect » (aussi appelé sliding highlight card grid) sur [où].
Un fond de surbrillance doux doit apparaître derrière la carte survolée et glisser en douceur vers la carte suivante que vise le pointeur, puis disparaître en fondu quand le pointeur quitte la grille.
Fais en sorte que le focus clavier déplace la surbrillance de la même façon et que les cartes elles-mêmes ne bougent pas.

Une douce lumière radiale suit le pointeur sur la surface de la carte et révèle le fond en dessous.

Ajoute un effet « Card Spotlight » (aussi appelé spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) sur [où].
Une lueur radiale douce et légère doit suivre le pointeur sur la surface de la carte, apparaître en fondu quand il entre et s’estomper quand il sort.
Garde la lueur derrière le contenu de la carte pour que le texte reste lisible et, sur les appareils tactiles, laisse simplement la carte sans éclairage.