Text Distortion

Un filtre SVG déforme du texte ou des formes avec un bruit animé.

Ajoute un effet de survol « SVG Displacement Distortion » (aussi appelé displacement map effect) sur [où].
Pendant le survol, le texte ou la forme doit onduler et trembler comme vu à travers de l’eau en mouvement, avec une apparition douce, puis redevenir net quand le pointeur s’en va.
N’applique le filtre de distorsion que lorsque l’effet est actif pour qu’il ne coûte rien au repos, et montre le même effet au focus clavier.

Les contours des lettres ondulent comme dessinés à la main, grâce à un filtre de déplacement SVG.

Ajoute un effet « Squiggly Text » (aussi appelé wobbly text ou turbulence text) sur [où].
Les contours des lettres doivent trembler légèrement comme s’ils étaient dessinés à la main et redessinés plusieurs fois par seconde : un frémissement discret et saccadé plutôt qu’une onde fluide.
Garde le texte lisible et laisse-le immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres coulent et s’étirent vers le bas comme si elles fondaient.

Ajoute un effet « Melting Text » sur [où].
Les lettres doivent s’affaisser lentement pendant que des gouttes s’étirent en dessous, comme si elles fondaient, puis s’immobiliser dans un aspect fondu.
Joue-le une seule fois quand le texte apparaît à l’écran, garde le mot lisible à la fin et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les mots apparaissent en fondu les uns après les autres au chargement de la page, souvent avec un flou qui se dissipe, comme s’ils étaient générés.

Ajoute un effet « Text Generate » sur [où].
Les mots doivent apparaître en fondu les uns après les autres pendant qu’un léger flou se dissipe sur chacun, comme si le texte était en train d’être généré : régulier et calme.
Joue-le une seule fois au chargement, laisse les lecteurs d’écran lire tout le texte immédiatement et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une bande de couleur façon surligneur se trace sur une expression pour la mettre en valeur.

Ajoute un effet surligneur (Text Highlighter) sur [où], aussi appelé highlight marker ou marker underline.
Une bande de couleur façon surligneur doit glisser en douceur derrière l’expression clé, de gauche à droite, comme si quelqu’un la surlignait au feutre.
Joue-le une seule fois quand l’expression entre à l’écran au défilement, garde le texte lisible sur la bande et fais suivre correctement la bande quand l’expression passe sur deux lignes.

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.