Glare / Holographic Card

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.

Le texte affiche des reflets irisés façon feuille holographique, qui bougent avec le pointeur ou au fil du temps.

Ajoute un effet de survol « Holographic Text » (aussi appelé holographic foil text) sur [où].
Tant que le pointeur survole le texte, une bande de couleurs façon feuille holographique doit glisser lentement et en douceur d’avant en arrière sur les lettres, et le texte doit retrouver son aspect normal quand le pointeur s’en va.
Garde les lettres lisibles à chaque instant du reflet, et affiche le même effet au focus clavier.

Une carte pivote en perspective vers le pointeur, et son contenu en couches se détache de la surface.

Ajoute un effet « 3D Tilt » (aussi appelé perspective tilt ou tilt card) sur [où].
La carte doit s’incliner en perspective vers le pointeur quand il bouge, ses couches internes se détachant de la surface à des profondeurs différentes, puis revenir à plat en douceur quand il sort : fluide et discret.
Garde une inclinaison légère pour que le texte reste lisible, et laisse la carte à plat sur les écrans tactiles et 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).

Des panneaux disposés en anneau tournent autour d’un axe vertical dans l’espace 3D.

Ajoute un carrousel 3D (3D Carousel), aussi appelé rotating ring carousel, sur [où].
Dispose les panneaux en anneau vu en perspective ; chaque appui sur suivant doit faire tourner tout l’anneau en douceur autour de son axe vertical pour amener le panneau suivant devant.
Rends les contrôles accessibles au clavier, annonce le panneau actuel aux lecteurs d’écran et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une Terre 3D en rotation, avec des repères ou des arcs, s’intègre à la mise en page.

Ajoute un « 3D Globe » (aussi appelé interactive globe) sur [où].
Un globe portant quelques repères doit tourner lentement et régulièrement sur son axe, les repères tournant avec lui : calme et continu.
Garde-le décoratif avec une alternative texte pour les informations qu’il montre, mets-le en pause hors écran et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une carte bascule en arrière en perspective au survol, tandis qu’une épingle et un halo s’élèvent vers l’observateur.

Ajoute un effet au survol « 3D Pin » (aussi appelé pin hover 3D) sur [où].
Quand le pointeur est sur la carte, elle doit basculer en arrière en perspective pendant qu’une épingle avec un halo doux à sa base monte de son centre ; tout se remet en place quand le pointeur sort : fluide, sans rebond.
Garde inchangé l’espace de la carte dans la mise en page et applique le même effet au focus clavier.