Kinetic Typography (typographie cinétique)

Un titre est découpé en caractères, mots ou lignes qui s’animent l’un après l’autre avec un léger décalage.

Ajoute une entrée « Split Text Stagger » (aussi appelée letter stagger ou staggered text reveal) sur [où].
Découpe le titre en lettres qui montent et apparaissent en fondu l’une après l’autre avec un court délai entre elles, rapide et fluide, sans rebond.
Joue-la une seule fois quand le titre apparaît à l’écran, fais en sorte que les lecteurs d’écran le lisent comme un seul mot, et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres montent et descendent en séquence, créant une vague qui parcourt le mot.

Ajoute un effet « Wavy Text » (aussi appelé text wave) sur [où].
Les lettres doivent monter et descendre l’une après l’autre pour qu’une vague douce et fluide parcoure le mot en continu.
Fais une boucle sans coupure, fais-le lire comme un seul mot par les lecteurs d’écran et arrête la vague si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

Le texte pivote en perspective 3D en suivant la position de la souris.

Ajoute un effet « Text Tilt » (aussi appelé perspective text tilt) sur [où].
Le texte doit s’incliner doucement en 3D vers le pointeur quand il bouge, en le suivant avec fluidité, puis revenir à plat en douceur quand le pointeur s’en va.
Garde une inclinaison discrète pour que le texte reste lisible, et laisse-le à plat sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres s’éparpillent au survol puis reviennent, ou éclatent vers l’extérieur à l’apparition.

Ajoute un effet de survol « Letter Scatter » (aussi appelé scatter gather letters ou explosive letter burst) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit s’envoler un peu dans sa propre direction avec une légère rotation, puis se regrouper en douceur dans le mot quand le pointeur s’en va.
Garde fixe la place du mot dans la mise en page pendant que les lettres bougent, fais-le lire comme un seul mot par les lecteurs d’écran, et affiche le même effet au focus clavier.

Une ombre rayée ou décalée derrière les lettres s’anime dans une direction.

Ajoute un effet « Line Shadow Text » (aussi appelé text shadow animation ou dancing shadow) sur [où].
Derrière les lettres, une ombre décalée faite de fines rayures diagonales doit glisser lentement et en continu, tandis que les lettres elles-mêmes restent immobiles et nettes.
Fais boucler le mouvement des rayures sans coupure, et fige l’ombre si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres se remplissent d’un liquide qui monte en ondulant.

Ajoute un effet « Liquid Fill Text » (aussi appelé water fill text) sur [où].
Les lettres détourées doivent se remplir d’un liquide dont la surface ondulée roule latéralement pendant que le niveau monte et descend lentement, en boucle douce et continue.
Garde le mot disponible en texte réel pour les lecteurs d’écran, et fixe le liquide à un niveau immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).