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 « 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).
Aussi appeléeAnimated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Un reflet lumineux balaie les lettres à plusieurs reprises.
Usages
Badges et pastilles d’annonce
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).
Le texte affiche des reflets irisés façon feuille holographique, qui bougent avec le pointeur ou au fil du temps.
Usages
Cartes premium
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.
Aussi appeléeGradient animation, Moving gradient, Background gradient animation
Les couleurs d’un fond en dégradé se décalent, glissent ou tournent lentement.
Usages
Arrière-plans de hero, boutons
Ajoute un fond en dégradé animé (Animated Gradient) sur [où], aussi appelé gradient animation ou moving gradient.
Les couleurs du dégradé doivent glisser lentement sur la zone en une dérive douce et continue, sans saut visible quand la boucle redémarre.
Garde le texte au-dessus lisible sur toutes les couleurs, et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
De grandes lettres servent de fenêtre sur une vidéo en lecture à l’intérieur.
Usages
Titres hero
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).
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.
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).