Animated Beam
Aussi appelée Connecting beam
Une impulsion lumineuse parcourt une ligne qui relie deux éléments.
Usages
Schémas d’intégration ou de flux de données
Prompt
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 Beam » (aussi appelé connecting beam) sur [où].
Une courte impulsion lumineuse doit parcourir la ligne qui relie deux éléments, en avançant régulièrement d’un bout à l’autre puis en recommençant : fluide et calme.
Garde la ligne de liaison toujours visible, et fige l’impulsion si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animations similaires
Background Beams
Aussi appelée Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
De fines lignes lumineuses parcourent des tracés et éclatent parfois en touchant une surface.
Usages
Arrière-plans de hero
Ajoute un effet « Background Beams » (aussi appelé light beams ou background lines) sur [où].
Des tracés courbes et pâles doivent rester en arrière-plan pendant que de courtes traînées lumineuses les parcourent l’une après l’autre, à un rythme calme et régulier.
Décale les faisceaux pour qu’ils ne bougent jamais en même temps, garde-les derrière le contenu et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Border Beam
Aussi appelée Shine border, Animated border, Glowing effect, Moving Border
Un reflet lumineux parcourt la bordure d’une carte.
Usages
Cartes mises en avant, CTA
Ajoute un effet « Border Beam » (aussi appelé shine border ou moving border) sur [où].
Un court reflet lumineux doit parcourir la bordure de la carte à un rythme régulier et posé, en boucle sans saut visible.
L’effet ne doit modifier ni le contenu ni la taille de la carte ; arrête le reflet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animated Map Arcs
Aussi appelée World Map Animated Lines, Globe Arcs
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).Motion Path
Aussi appelée Animate Along Path, Offset Path Animation
Un élément parcourt un chemin courbe personnalisé et peut pivoter pour le suivre.
Usages
Avion ou point sur un itinéraire, éléments décoratifs en déplacement
Ajoute une animation « Motion Path » (aussi appelée animate along path) sur [où].
Un petit élément doit parcourir un itinéraire courbe personnalisé à un rythme lent et régulier, en pivotant pour faire face à sa direction de déplacement.
Utilise un itinéraire fermé pour que la boucle se répète sans saut, et fais en sorte que l’itinéraire s’adapte à son conteneur au lieu de garder une taille fixe.Autres animations : Background & Ambient
Animated Gradient (dégradé animé)
Aussi appelée Gradient 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).Animated Grid Pattern
Aussi appelée Flickering grid, Grid background
Une grille de lignes ou de carrés dont les cellules apparaissent, s’estompent ou scintillent.
Usages
Heros de sites tech et SaaS
Ajoute un fond « Animated Grid Pattern » (aussi appelé flickering grid ou grid background) sur [où].
Une grille de lignes pâles doit rester fixe pendant que quelques cellules éparses apparaissent et s’estompent lentement à des moments différents : discret et subtil, jamais toutes en même temps.
Garde-le derrière le contenu sans intercepter les clics, et arrête le scintillement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Aurora Background
Aussi appelée Northern lights gradient
De douces bandes de couleur floues dérivent comme une aurore derrière le contenu.
Usages
Sections hero
Ajoute un « Aurora Background » (aussi appelé northern lights gradient) sur [où].
De douces bandes de couleur floues doivent dériver et onduler lentement derrière le contenu, en se superposant et en se fondant comme des aurores boréales : très lent et onirique.
Garde le texte au-dessus lisible, évite de recalculer le flou des bandes à chaque image pour rester fluide, et arrête la dérive si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).