Starfield
Aussi appelée Stars background, Twinkling stars
De minuscules étoiles scintillent ou dérivent sur un fond sombre évoquant l’espace.
Usages
Heroes sur le thème de l’espace ou de la nuit
Variantes
- twinkling
- warp / fly-through
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 arrière-plan « Starfield » (aussi appelé stars background ou twinkling stars) sur [où].
De minuscules étoiles de tailles différentes doivent scintiller doucement, chacune à son rythme, pendant que tout le champ dérive très lentement : paisible et calme.
Garde un nombre d’étoiles modéré pour que ça reste léger, et arrête le scintillement et la dérive si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animations similaires
ABC
Sparkles
Aussi appelée Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
De petites paillettes brillantes scintillent et disparaissent autour d’un texte ou d’une section.
Usages
Titres, touches premium
Ajoute un effet « Sparkles » (aussi appelé glitter ou twinkle particles) sur [où].
De petites paillettes en forme d’étoile doivent surgir, scintiller et s’estomper autour du texte, à des endroits épars et à des moments aléatoires : léger et rapide.
Garde les paillettes décoratives et masquées pour les lecteurs d’écran, ne couvre jamais le texte lui-même et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Particles
Aussi appelée Floating particles, Particle field
De nombreux petits points dérivent, se relient ou réagissent au pointeur sur l’arrière-plan.
Usages
Arrière-plans de hero et de section
Ajoute un arrière-plan « Particles » (aussi appelé floating particles ou particle field) sur [où].
De petits points de tailles différentes doivent flotter et dériver lentement sur des trajectoires douces et vagabondes, chacun à son propre rythme : calme et aérien.
Garde un nombre de points modéré pour que ça reste léger sur les appareils plus lents, mets-le en pause hors de l’écran et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Meteors
Aussi appelée Meteor shower, Shooting Stars
Des traînées diagonales à queue lumineuse traversent une carte ou une section.
Usages
Accents de cartes et de hero
Ajoute un effet « Meteors » (aussi appelé meteor shower ou shooting stars) sur [où].
Quelques petites traînées à queue évanescente doivent traverser la zone en diagonale à des moments aléatoires, chacune rapide puis disparue.
Garde-les peu nombreuses pour que ça reste un accent, coupe-les aux bords de la zone et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Noise / Grain Texture
Aussi appelée Film grain, Noise background
Une fine texture mouchetée recouvre la page et scintille parfois comme du grain de film.
Usages
Donner une profondeur tactile aux dégradés
Ajoute une surcouche « Noise / Grain Texture » (aussi appelée film grain ou noise background) sur [où].
Une texture mouchetée fine et pâle doit recouvrir la surface et scintiller par petits sauts comme du grain de film : discrète, jamais assez forte pour brouiller le contenu.
Laisse les clics traverser la surcouche, génère la texture une seule fois au lieu de le faire à chaque image et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Autres animations : Background & Ambient
Vortex
Aussi appelée Swirling particles
Des particules tournent en spirale autour d’un centre comme un tourbillon.
Usages
Arrière-plans de hero spectaculaires
Ajoute un arrière-plan « Vortex » (aussi appelé swirling particles) sur [où].
De petites particules doivent tourner en spirale vers l’intérieur autour d’un point central comme un tourbillon, apparaître en fondu au bord et s’estomper en atteignant le centre, en un mouvement fluide et continu.
Garde un nombre de particules modéré, mets en pause hors de l’écran et arrête le tourbillon 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).A
B
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
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).