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
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 « 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).Animations similaires
Mesh Gradient
Aussi appelée Animated mesh gradient
Plusieurs points de couleur se fondent et dérivent en douceur, formant un fond organique aux multiples teintes.
Usages
Arrière-plans de landing page
Ajoute un arrière-plan « Mesh Gradient » (aussi appelé animated mesh gradient) sur [où].
Plusieurs taches de couleur douces doivent se fondre les unes dans les autres et dériver lentement dans la zone, pour que le fond change sans cesse de façon organique : très lent et fluide.
Garde le contenu au-dessus lisible sur chaque mélange et arrête la dérive si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).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).Light Rays
Aussi appelée God rays, Light shafts
De doux faisceaux de lumière oscillent sur l’arrière-plan.
Usages
En-têtes d’ambiance
Ajoute un arrière-plan « Light Rays » (aussi appelé god rays ou light shafts) sur [où].
Plusieurs faisceaux doux et semi-transparents doivent s’ouvrir en éventail depuis le haut et osciller doucement d’un côté à l’autre, en s’éclaircissant et s’assombrissant un peu : lent et atmosphérique.
Garde les faisceaux derrière le contenu et assez pâles pour ne pas gêner la lecture, et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Wave Background
Aussi appelée Wavy background, Animated waves
Des lignes ou formes ondulées superposées ondulent horizontalement.
Usages
Séparateurs de section, bas de hero
Ajoute un « Wave Background » (aussi appelé wavy background ou animated waves) sur [où].
Quelques formes de vagues superposées doivent rouler latéralement à des vitesses légèrement différentes, pour se chevaucher et bouger comme de l’eau : lent et fluide.
Fais boucler chaque vague sans saut visible et arrête les vagues si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Autres animations : Background & Ambient
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).Survolez la démo
Background Boxes
Aussi appelée Tile hover background
Une grille inclinée de tuiles s’allume en couleur au passage du pointeur.
Usages
Arrière-plans de hero
Ajoute un effet « Background Boxes » (aussi appelé tile hover background) sur [où].
Remplis la zone d’une grille inclinée de tuiles ; chaque tuile survolée par le pointeur doit s’allumer instantanément puis s’éteindre lentement, en laissant une courte traînée.
Garde les tuiles derrière le contenu pour qu’elles ne bloquent pas les clics dessus et, sur les écrans tactiles, allume plutôt la tuile touchée.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).