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 une animation de nombres « Odometer » (aussi appelée rolling numbers ou slot-machine digits) sur [où].
Quand la valeur change, chaque chiffre doit rouler verticalement jusqu’à son nouveau chiffre, toujours vers l’avant, avec un léger décalage entre les chiffres et un petit calage à la fin.
Garde tous les chiffres de même largeur pour que le nombre ne bouge pas, et n’expose que la valeur finale aux lecteurs d’écran.
Aussi appeléeCount Up, Animated Counter, Number Counter, countUp
Un nombre défile d’une valeur de départ jusqu’à une valeur cible quand il devient visible.
Usages
Statistiques et blocs de KPI
Ajoute un compteur animé (Number Ticker) sur [où] : aussi appelé count up ou animated counter.
Quand le nombre entre à l’écran, il doit compter de zéro jusqu’à sa cible, vite au début puis en ralentissant doucement à l’arrivée.
Utilise des chiffres à chasse fixe pour que rien ne tremble autour, compte une seule fois, et donne directement la valeur finale aux lecteurs d’écran et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Aussi appeléeText Flipping Board, Flip Board, Vestaboard display
Les caractères défilent comme sur un tableau des départs d’aéroport jusqu’à s’arrêter sur la lettre voulue.
Usages
Tableaux d’état et affichages rétro
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).
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).
Des lignes et des points s’animent entre des lieux sur une carte ou un globe.
Usages
Visuels de présence internationale
Ajoute des « Animated Map Arcs » (aussi appelés globe arcs) sur [où].
Des lignes courbes doivent se dessiner l’une après l’autre entre des lieux sur une carte en points, puis se rétracter vers leur destination pendant qu’un anneau doux y pulse : calme et régulier.
Décale les arcs pour qu’ils ne bougent jamais en même temps, garde la boucle continue et mets-la en pause si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appeléeAnimated Bar Chart, Bar Chart Entrance
Les barres montent d’une hauteur nulle jusqu’à leurs valeurs.
Usages
Tableaux de bord et rapports
Ajoute une animation « Bar Chart Grow » (aussi appelée animated bar chart ou bar chart entrance) sur [où].
Chaque barre doit monter de la ligne de base jusqu’à sa valeur, l’une après l’autre avec un décalage rapide, en ralentissant en douceur à l’arrivée.
Joue-la une seule fois quand le graphique entre à l’écran, et affiche directement le graphique final si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Des barres horizontales échangent leur rang au fil du temps à mesure que les valeurs changent.
Usages
Récits à partir de séries temporelles
Ajoute un « Bar Chart Race » (aussi appelé racing bar chart) sur [où].
Les barres horizontales doivent grandir et rétrécir à mesure que les valeurs évoluent dans le temps, et glisser en douceur les unes devant les autres à chaque changement de rang, chacune gardant son libellé.
Déplace les barres avec des transformations plutôt qu’en réordonnant le balisage pour que les échanges glissent au lieu de sauter, et donne aux utilisateurs un moyen de le mettre en pause.