Text Highlighter (effet surligneur)

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

Au survol, un soulignement s’étend sous un lien depuis un côté ou depuis le centre.

Ajoute un effet de survol soulignement animé (Underline Draw) sur [où], aussi appelé animated underline ou hover underline animation.
Quand le pointeur survole le lien, un soulignement doit s’étendre en douceur de gauche à droite sous le texte, puis se rétracter quand le pointeur s’en va : rapide et discret.
Évite que le soulignement décale la mise en page autour et affiche le même effet au focus clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.

Un mot en contour se remplit ou s’illumine d’un dégradé qui suit le pointeur ou le balaie.

Ajoute un « Text Hover Effect » (aussi appelé text fill on hover ou gradient outline text hover) sur [où].
Le mot doit d’abord n’être qu’un contour, puis, tant que le pointeur le survole, un remplissage plein doit glisser en douceur de gauche à droite et se retirer quand le pointeur s’en va.
Garde le mot en contour lisible avant le remplissage et affiche le même effet au focus clavier.

Le texte suit un tracé courbe et avance le long de celui-ci au fil du défilement.

Ajoute un effet « Text Path Scroll » (aussi appelé text path curve scroll animation) sur [où].
Le texte doit reposer sur une ligne courbe et glisser le long de celle-ci au défilement, en avançant vers le bas et en reculant vers le haut.
Lie le mouvement directement à la position de défilement, sans latence, et garde le texte lisible comme du texte normal pour les lecteurs d’écran.

Un mot est dupliqué en de nombreuses copies empilées qui se décalent au défilement.

Ajoute un effet « Text Repetition » (aussi appelé repeated text scroll) sur [où].
Un mot doit être copié en une pile de copies en contour plus pâles qui se déploient depuis l’arrière au fil du défilement, puis se replient quand on remonte.
Lie le déploiement directement à la position de défilement et masque les copies supplémentaires aux lecteurs d’écran pour que le mot ne soit lu qu’une fois.