Border Beam

Une bordure en dégradé s’anime autour de l’élément et s’étend quand le pointeur le survole.

Ajoute un effet « Hover Border Gradient » sur [où].
Un court reflet en dégradé doit reposer sur une partie de la bordure ; tant que le pointeur survole l’élément, il doit faire le tour de la bordure à vitesse régulière pendant que toute la bordure s’illumine d’une lueur douce.
N’anime la bordure qu’au survol et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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

Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.

Ajoute un effet au survol « Shine Sweep » (aussi appelé sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) sur [où].
Une douce bande de lumière diagonale doit balayer l’élément de gauche à droite, puis recommencer après une courte pause tant que le pointeur reste dessus.
Garde la bande rognée à l’intérieur de l’élément, arrête-la quand le pointeur sort et ne la joue pas 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).