3D Globe

Des lignes et des points s’animent entre des lieux sur une carte ou un globe.

Ajoute des « Animated Map Arcs » (aussi appelés globe arcs) sur [où].
Des lignes courbes doivent se dessiner l’une après l’autre entre des lieux sur une carte en points, puis se rétracter vers leur destination pendant qu’un anneau doux y pulse : calme et régulier.
Décale les arcs pour qu’ils ne bougent jamais en même temps, garde la boucle continue et mets-la en pause 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).

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.

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

Une carte fait un demi-tour autour d’un axe pour révéler sa face arrière.

Ajoute un effet « Card Flip » (aussi appelé flip card ou card flip 3D) sur [où].
Quand le pointeur est sur la carte, elle doit se retourner en perspective autour de son axe vertical pour montrer sa face arrière, puis revenir quand il sort : fluide et régulier.
Masque l’envers de chaque face pour qu’elles ne se voient jamais à travers l’une l’autre, et fais fonctionner le retournement au focus clavier et d’un appui sur les écrans tactiles.