Text

Un texte rempli d’un dégradé dont les couleurs changent ou s’écoulent en continu.

Ajoute un effet « Animated Gradient Text » (aussi appelé aurora text ou rainbow text sweep) sur [où].
Les lettres doivent être remplies d’un dégradé dont les couleurs s’écoulent lentement et en douceur sur le texte, en boucle infinie et sans coupure.
Garde le texte lisible sur son fond à tout instant, et fige les couleurs si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte tressaute avec des tranches décalées et des séparations de couleur rouge et cyan, comme un signal brouillé.

Ajoute un effet de survol « Glitch Text » (aussi appelé text glitch ou RGB split glitch) sur [où].
Tant que le pointeur survole le texte, il doit tressauter par à-coups vifs et secs : de fines tranches horizontales sautent de côté et deux copies colorées se séparent comme un signal brouillé, puis tout se remet en place quand le pointeur s’en va.
Ne garde le vrai texte qu’une seule fois dans le document pour que les lecteurs d’écran ne lisent pas les copies, et affiche le même effet au focus clavier.

Le texte affiche des reflets irisés façon feuille holographique, qui bougent avec le pointeur ou au fil du temps.

Ajoute un effet de survol « Holographic Text » (aussi appelé holographic foil text) sur [où].
Tant que le pointeur survole le texte, une bande de couleurs façon feuille holographique doit glisser lentement et en douceur d’avant en arrière sur les lettres, et le texte doit retrouver son aspect normal quand le pointeur s’en va.
Garde les lettres lisibles à chaque instant du reflet, et affiche le même effet au focus clavier.

Le texte change d’échelle, se déplace ou pivote comme un élément graphique animé plutôt que comme un texte statique.

Ajoute une typographie cinétique (Kinetic Typography, aussi appelée kinetic text) sur [où].
Des lignes de grand texte répété doivent glisser latéralement en sens alternés, à un rythme lent et régulier, pour transformer les mots en graphisme animé.
Fais boucler chaque ligne sans saut visible, veille à ce que les lecteurs d’écran ne lisent le texte qu’une fois, et arrête le mouvement 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).

Le texte glisse vers le haut depuis derrière une ligne de découpe, comme s’il surgissait de nulle part.

Ajoute une entrée de texte « Mask Reveal » (aussi appelée line mask reveal ou text masking) sur [où].
Chaque ligne doit glisser vers le haut depuis derrière un bord invisible, comme si elle surgissait de nulle part, l’une après l’autre, rapide et fluide, sans rebond.
Joue-la une seule fois quand le texte entre à l’écran au défilement, et affiche le texte tout de suite, sans mouvement, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des caractères verts tombent en colonnes, comme la pluie de code de Matrix.

Ajoute un effet « Matrix Text » (aussi appelé digital rain text) sur [où].
Des colonnes de caractères doivent tomber régulièrement à des vitesses légèrement différentes, chacune avec un caractère de tête lumineux et une traîne qui s’estompe derrière.
Traite-le comme une décoration masquée aux lecteurs d’écran, garde-le léger et arrête-le 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).

Un mot se floute et se fond dans le suivant au même endroit.

Ajoute un effet « Morphing Text » (aussi appelé text morph) sur [où].
Un mot doit se flouter et fondre dans le suivant au même endroit, avec une fusion douce et gluante, puis rester immobile un instant avant le changement suivant.
Fais défiler les mots sans coupure, laisse les lecteurs d’écran lire les mots comme du texte normal et arrête le cycle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte brille comme un tube néon et clignote ou pulse.

Ajoute un effet « Neon Glow Text » (aussi appelé neon sign flicker ou glowing text) sur [où].
Le texte doit briller comme un tube néon, d’une lumière douce et régulière, et de temps en temps s’éteindre brièvement comme une vraie enseigne.
Garde le clignotement occasionnel plutôt que rapide, car les flashs rapides peuvent nuire à certains utilisateurs, et garde la lueur fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres d’un titre se mélangent ou bougent l’une après l’autre à mesure que l’utilisateur fait défiler les sections.

Ajoute « Scrolling Letters » (aussi appelé on-scroll letter animations) sur [où].
À mesure que l’utilisateur fait défiler les sections, les lettres du titre doivent rouler vers leur caractère suivant l’une après l’autre de gauche à droite, liées directement à la position de défilement.
En remontant, elles doivent revenir en arrière, et les lecteurs d’écran doivent recevoir le titre actuel comme du texte normal.

Un reflet lumineux balaie les lettres à plusieurs reprises.

Ajoute un effet « Shimmer Text » (aussi appelé animated shiny text ou metallic shimmer text) sur [où].
Une bande de lumière doit balayer les lettres en douceur de gauche à droite, puis recommencer après une courte pause.
Garde le texte lisible sous le reflet et laisse-le immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un titre est découpé en tranches horizontales qui glissent latéralement les unes contre les autres au défilement.

Ajoute un effet « Sliced Text » (aussi appelé on-scroll sliced text) sur [où].
Un grand titre doit être découpé en tranches horizontales qui glissent latéralement les unes contre les autres au défilement, alignées en un mot complet au départ.
Lie le décalage directement à la position de défilement pour qu’il s’inverse en remontant, et garde le titre comme un seul texte lisible pour les lecteurs d’écran.

Le texte est disposé autour d’un cercle qui tourne en continu.

Ajoute « Spinning Text » (aussi appelé circular text ou text on circle) sur [où].
Les lettres doivent être réparties uniformément autour d’un cercle qui tourne lentement et régulièrement, sans saut quand la boucle recommence.
Donne le texte une seule fois aux lecteurs d’écran comme du texte normal, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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 caractères défilent comme sur un tableau des départs d’aéroport jusqu’à s’arrêter sur la lettre voulue.

Ajoute un afficheur à palettes (Split-Flap Text) sur [où] : aussi appelé text flipping board ou flip board.
Chaque case de caractère doit défiler rapidement dans l’alphabet jusqu’à s’arrêter sur sa lettre cible, les cases se fixant l’une après l’autre de gauche à droite.
Lance-le une fois à chaque fois que le texte apparaît ou change, n’annonce que le texte final aux lecteurs d’écran, et affiche le texte final sans défilement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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

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.

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

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.

Le texte existant sort en animation et est remplacé par un nouveau contenu.

Ajoute un effet « Text Replacement » (aussi appelé text swap) sur [où].
Quand le texte change, les anciens caractères doivent glisser vers le haut et sortir pendant que les nouveaux entrent par le bas, caractère après caractère, en une vague rapide et fluide.
Évite que la zone de texte change brusquement de taille pendant l’échange et fais annoncer seulement le nouveau texte aux lecteurs d’écran.

Les mots d’un paragraphe passent de pâles à pleinement opaques au fil du défilement.

Ajoute un effet « Text Reveal » (aussi appelé scroll text reveal ou word-by-word reveal) sur [où].
Le paragraphe doit commencer pâle, puis chaque mot doit s’éclaircir jusqu’à sa pleine intensité l’un après l’autre au fil du défilement, en suivant la position de défilement.
En remontant, les mots doivent pâlir à nouveau, et tout le paragraphe doit rester accessible aux lecteurs d’écran, quelle que soit son atténuation.

Déplacer le pointeur sur une carte dévoile un texte caché sous un bord de masque ou un projecteur.

Ajoute un effet « Text Reveal Card » (aussi appelé spotlight text reveal) sur [où].
Quand le pointeur se déplace sur la carte, un bord vertical doit le suivre de près et dévoiler un texte caché d’un côté, de façon fluide et directe, sans latence.
Sur les écrans tactiles, où il n’y a pas de pointeur à suivre, laisse un glisser ou un appui révéler le texte caché, et rends ce texte accessible aux lecteurs d’écran.

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.

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 caractères apparaissent un par un comme s’ils étaient tapés, généralement suivis d’un curseur clignotant.

Ajoute un effet machine à écrire (Typewriter) sur [où], aussi appelé typing animation ou typing text.
Les caractères doivent apparaître un par un à un rythme de frappe régulier, avec un curseur juste après le dernier caractère tapé qui clignote quelques fois une fois la saisie terminée.
Joue-le une seule fois plutôt qu’en boucle, laisse les lecteurs d’écran lire tout le texte immédiatement et affiche le texte complet 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.

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

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 de la phrase est remplacé par le mot suivant d’une liste avec un glissement, une rotation ou un fondu.

Ajoute un effet « Word Rotate » (aussi appelé rotating words ou flip words) sur [où].
Un mot de la ligne doit glisser vers le haut et sortir pendant que le mot suivant d’une liste entre par le bas, avec une pause sur chaque mot avant le changement suivant.
Évite que le reste de la ligne saute quand les mots n’ont pas la même largeur, ne fais pas annoncer chaque changement par les lecteurs d’écran et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).