Animated Gradient (dégradé animé)

Plusieurs points de couleur se fondent et dérivent en douceur, formant un fond organique aux multiples teintes.

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).

De douces bandes de couleur floues dérivent comme une aurore derrière le contenu.

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).

Un texte rempli d’un dégradé dont les couleurs changent ou s’écoulent en continu.

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).

Une grille de lignes ou de carrés dont les cellules apparaissent, s’estompent ou scintillent.

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).

De fines lignes lumineuses parcourent des tracés et éclatent parfois en touchant une surface.

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).