Background & Ambient

Une impulsion lumineuse parcourt une ligne qui relie deux éléments.

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

Les couleurs d’un fond en dégradé se décalent, glissent ou tournent lentement.

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

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

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

Une grille inclinée de tuiles s’allume en couleur au passage du pointeur.

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.

Un reflet lumineux parcourt la bordure d’une carte.

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

Une grille de points pulse ou s’illumine par vagues.

Ajoute un arrière-plan « Dot Pattern Glow » (aussi appelé dotted glow background ou dot grid) sur [où].
Une fine grille de points doit rester immobile pendant qu’une douce bande lumineuse la balaie lentement et allume les points sur son passage : calme et discret.
Garde les points assez pâles pour que le contenu au-dessus reste lisible et arrête la lueur si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une ligne lumineuse s’élargit et projette un cône de lumière sur le titre en dessous.

Ajoute un « Lamp Effect » (aussi appelé lamp glow) sur [où].
Quand la section entre à l’écran, une fine ligne lumineuse doit s’élargir depuis le centre et projeter un doux cône de lumière sur le titre en dessous, qui apparaît en fondu en montant à sa place : lent et fluide.
Joue-le une seule fois et, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), affiche directement le titre éclairé.

De doux faisceaux de lumière oscillent sur l’arrière-plan.

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

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

Des traînées diagonales à queue lumineuse traversent une carte ou une section.

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

Une fine texture mouchetée recouvre la page et scintille parfois comme du grain de film.

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

De nombreux petits points dérivent, se relient ou réagissent au pointeur sur l’arrière-plan.

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

L’intensité du flou augmente progressivement vers un bord pour que le contenu s’estompe en douceur.

Ajoute un bord « Progressive Blur » (aussi appelé gradient blur edge) sur [où].
Le contenu qui défile vers le bord doit devenir progressivement plus flou et plus doux, en montant en douceur au lieu d’être coupé net par une ligne.
N’affiche le flou que sur un bord au-delà duquel il reste du contenu, et empêche la zone floue de bloquer les clics ou le défilement.

Une grille en perspective inclinée défile vers le spectateur comme un sol synthwave.

Ajoute un arrière-plan « Retro Grid » (aussi appelé perspective grid ou synthwave grid) sur [où].
Un sol quadrillé incliné en perspective doit défiler régulièrement vers le spectateur et s’estomper vers l’horizon : fluide et sans fin.
Rends la boucle continue pour que les lignes ne sautent jamais et arrête le défilement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des cercles concentriques s’étendent depuis un point central et s’estompent.

Ajoute un effet « Ripple Rings » (aussi appelé background ripple ou concentric ripples) sur [où].
Des anneaux doivent s’étendre sans cesse depuis un point central et s’estomper en grandissant, régulièrement espacés l’un après l’autre : lent et régulier.
Garde l’élément central immobile à sa place et arrête les ondes si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

De petites paillettes brillantes scintillent et disparaissent autour d’un texte ou d’une section.

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

Un doux cône ou halo de lumière balaie l’écran jusqu’à sa place et éclaire une partie de l’arrière-plan.

Ajoute un effet « Spotlight » (aussi appelé spotlight sweep ou light cone) sur [où].
Au chargement de la page, un doux cône de lumière doit arriver en biais depuis le coin et se poser sur le titre, en s’intensifiant à son arrivée : lent et fluide.
Joue-le une seule fois et, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), affiche directement la lumière à sa place.

De minuscules étoiles scintillent ou dérivent sur un fond sombre évoquant l’espace.

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

Des particules tournent en spirale autour d’un centre comme un tourbillon.

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

Des lignes ou formes ondulées superposées ondulent horizontalement.

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