Progressive Blur

Les cartes voisines deviennent floues et s’assombrissent tandis que la carte survolée reste nette.

Ajoute un effet « Focus Cards » (aussi appelé blur siblings on hover, hover focus blur ou card hover effect) sur [où].
Tant que le pointeur survole une carte, les autres doivent devenir floues, s’assombrir et rétrécir légèrement tandis que la carte survolée reste nette, le tout avec un fondu doux qui s’inverse quand le pointeur sort.
Applique la même mise en avant au focus clavier et garde toutes les cartes nettes et lisibles quand rien n’est survolé.

Une minuscule version floue de l’image occupe sa place et devient nette quand l’image complète se charge.

Ajoute un effet de chargement d’image « Blur-Up Placeholder » (aussi appelé LQIP ou blur placeholder) sur [où].
Une minuscule version très floue de l’image doit occuper son espace immédiatement, puis, une fois l’image complète chargée, devenir nette en douceur et assez rapidement.
Réserve la taille exacte de l’image pour que rien ne bouge à son arrivée, et rogne les bords flous pour qu’ils ne débordent pas du cadre.

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