Vortex

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

De petits cercles ou icônes tournent autour d’un centre sur des orbites circulaires.

Ajoute des « Orbiting Circles » (aussi appelés orbit animation ou orbiting icons) sur [où].
De petits cercles doivent tourner lentement et régulièrement autour d’un élément central sur des anneaux circulaires, l’anneau extérieur tournant dans l’autre sens et plus lentement.
Garde la boucle continue et les éléments en orbite bien droits, et arrête la rotation 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).

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