Typewriter (effet machine à écrire)

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

Le texte est remplacé par des caractères aléatoires qui changent et se résolvent peu à peu en mot final.

Ajoute un effet de survol « Text Scramble » (aussi appelé text decode ou encrypted text) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit défiler rapidement parmi des caractères aléatoires puis se fixer sur sa vraie lettre, l’une après l’autre, de gauche à droite.
Évite que la largeur du texte saute pendant le brouillage, fais lire le vrai texte aux lecteurs d’écran et affiche le même effet au focus clavier.

Trois points dans une bulle pulsent ou s’élèvent tour à tour pour montrer que quelqu’un ou une IA est en train d’écrire.

Ajoute un « Typing Indicator » (aussi appelé typing dots) sur [où].
Les points dans une petite bulle de chat doivent s’élever et s’éclaircir l’un après l’autre sur un rythme doux et léger pendant que l’autre personne écrit.
Garde une boucle sans coupure, retire la bulle dès que le message arrive, et donne aux lecteurs d’écran un court texte d’état à la place des points.

Le curseur de texte s’agrandit ou rétrécit pour suivre la taille du caractère à côté duquel il se trouve.

Ajoute un effet « Adaptive Caret » (aussi appelé adaptive caret size) sur [où].
Le curseur de texte doit se placer devant le caractère le plus proche du pointeur et s’étirer ou se réduire rapidement à la hauteur de ce caractère, avec un redimensionnement fluide et vif, sans rebond.
Empêche le texte lui-même de bouger, et fais suivre au curseur les déplacements au clavier comme il suit le pointeur.

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.

Les lettres deviennent progressivement plus grasses ou plus fines (ou changent de largeur ou d’inclinaison) grâce aux axes d’une police variable.

Ajoute un effet de survol « Variable Font Weight Animation » (aussi appelé font weight shift) sur [où].
Tant que le pointeur survole le texte, les lettres doivent s’épaissir l’une après l’autre en une vague fluide de gauche à droite, puis s’affiner à nouveau quand le pointeur s’en va.
Utilise une police variable pour que la graisse change en douceur au lieu de sauter, évite que le titre en s’élargissant pousse le contenu voisin et affiche le même effet au focus clavier.

De grandes lettres servent de fenêtre sur une vidéo en lecture à l’intérieur.

Ajoute un effet « Video Text » (aussi appelé text video mask) sur [où].
De grandes lettres épaisses doivent servir de fenêtre sur une vidéo en lecture, pour que les images en mouvement n’apparaissent qu’à l’intérieur des formes des lettres.
Garde la vidéo muette et en boucle, sans commandes, fournis les mots en vrai texte pour les lecteurs d’écran et affiche une image fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).