Dot Pattern Glow

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

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.

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

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