Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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).
Aussi appeléeLetter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
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.
Usages
Titres principaux et titres de section
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).
Aussi appeléeDots loader, Ellipsis loader, Three-dot loader
Une rangée de points rebondit, s’estompe ou change d’échelle à tour de rôle.
Usages
Chargement en ligne, attente dans un chat
Ajoute des « Bouncing Dots » (aussi appelés dots loader ou three-dot loader) sur [où].
Les points doivent sauter et retomber l’un après l’autre sur un rythme léger et élastique, avec une courte pause avant que la séquence recommence.
Garde une boucle sans coupure, donne-lui un libellé d’état pour les lecteurs d’écran et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Le texte change d’échelle, se déplace ou pivote comme un élément graphique animé plutôt que comme un texte statique.
Usages
Sections hero de marque
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).
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.
Usages
Chats, assistants IA
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.
Aussi appeléeRotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
Un mot de la phrase est remplacé par le mot suivant d’une liste avec un glissement, une rotation ou un fondu.
Usages
Accroches hero
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).
Aussi appeléeAurora Text, Rainbow Text Sweep, Gradient Text Color Wave
Un texte rempli d’un dégradé dont les couleurs changent ou s’écoulent en continu.
Usages
Titres de marque
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é.
Usages
Titres cyberpunk ou gaming
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.