Spotlight

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

Un cercle de lumière autour du pointeur révèle le contenu pendant que le reste reste sombre.

Ajoute un effet « Cursor Spotlight » (aussi appelé flashlight cursor ou spotlight effect) sur [où].
Un cercle de lumière doux doit suivre le pointeur et révéler le contenu en dessous pendant que le reste de la zone reste assombri.
Sur les appareils tactiles, où il n’y a pas de pointeur à suivre, affiche plutôt le contenu entièrement éclairé.

Une douce lumière radiale suit le pointeur sur la surface de la carte et révèle le fond en dessous.

Ajoute un effet « Card Spotlight » (aussi appelé spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) sur [où].
Une lueur radiale douce et légère doit suivre le pointeur sur la surface de la carte, apparaître en fondu quand il entre et s’estomper quand il sort.
Garde la lueur derrière le contenu de la carte pour que le texte reste lisible et, sur les appareils tactiles, laisse simplement la carte sans éclairage.

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