Squiggly Text

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.

Le texte se déforme et ondule de façon organique, piloté par le défilement ou le mouvement du pointeur.

Ajoute un effet « Text Distortion » (aussi appelé organic text distortion) sur [où].
Une ligne de texte doit défiler latéralement sans fin et se déformer et onduler de façon organique en bougeant, comme vue à travers de l’eau en mouvement, le flux étant piloté par le défilement de l’utilisateur.
Garde la distorsion assez légère pour que le texte reste lisible, assure-toi qu’elle reste fluide sur les appareils plus lents, et désactive-la 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).

Le texte reste épinglé pendant que ses lignes apparaissent et disparaissent en fondu selon la progression du défilement.

Ajoute un effet « Sticky Text Fade » (aussi appelé sticky scroll text opacity fade) sur [où].
Pendant le défilement de la section, le bloc de texte doit rester épinglé en place et ses lignes doivent apparaître et disparaître en fondu une à une selon la progression du défilement.
Lie les fondus directement à la position de défilement pour qu’ils s’inversent en remontant, et garde chaque ligne accessible aux lecteurs d’écran, quelle que soit son opacité.

Les contours des lettres se tracent d’un trait avant que le remplissage n’apparaisse.

Ajoute un effet « Stroke Text Draw » (aussi appelé draw in text ou animated stroke text) sur [où].
Les contours des lettres doivent se tracer d’eux-mêmes en douceur, puis, une fois complets, le remplissage doit apparaître en fondu.
Joue-le une seule fois au chargement, garde le mot accessible comme du vrai texte, et affiche directement le texte rempli si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres ou les mots pivotent en 3D autour d’un axe pour révéler le texte suivant sur leur face arrière.

Ajoute un effet de survol « Text 3D Flip » (aussi appelé 3D flip text reveal) sur [où].
Quand le pointeur est sur le texte, chaque lettre doit basculer en 3D sur son axe horizontal pour montrer une nouvelle lettre sur son autre face, l’une après l’autre dans un balayage rapide et fluide, puis revenir quand le pointeur s’en va.
Garde la même taille de boîte de texte pendant la bascule et montre le même effet au focus clavier.