Card Spotlight

Un cercle de lumière autour du pointeur révèle le contenu pendant que le reste reste sombre.

Ajoute un effet « Cursor Spotlight » (aussi appelé flashlight cursor ou spotlight effect) sur [où].
Un cercle de lumière doux doit suivre le pointeur et révéler le contenu en dessous pendant que le reste de la zone reste assombri.
Sur les appareils tactiles, où il n’y a pas de pointeur à suivre, affiche plutôt le contenu entièrement éclairé.

Un reflet lumineux suit le pointeur sur la surface d’une carte, comme une réflexion.

Ajoute un effet « Glare / Holographic Card » (aussi appelé glare card ou glare hover) sur [où].
Un reflet doux et lumineux doit suivre le pointeur sur la surface de la carte, comme de la lumière qui s’y reflète, pendant que la carte s’incline légèrement vers lui ; les deux s’estompent quand il sort : fluide et discret.
Laisse les clics traverser la couche du reflet, garde le contenu lisible en dessous et affiche la carte sans reflet sur les écrans tactiles.

Déplacer le pointeur sur une carte dévoile un texte caché sous un bord de masque ou un projecteur.

Ajoute un effet « Text Reveal Card » (aussi appelé spotlight text reveal) sur [où].
Quand le pointeur se déplace sur la carte, un bord vertical doit le suivre de près et dévoiler un texte caché d’un côté, de façon fluide et directe, sans latence.
Sur les écrans tactiles, où il n’y a pas de pointeur à suivre, laisse un glisser ou un appui révéler le texte caché, et rends ce texte accessible aux lecteurs d’écran.

Un doux cône ou halo de lumière balaie l’écran jusqu’à sa place et éclaire une partie de l’arrière-plan.

Ajoute un effet « Spotlight » (aussi appelé spotlight sweep ou light cone) sur [où].
Au chargement de la page, un doux cône de lumière doit arriver en biais depuis le coin et se poser sur le titre, en s’intensifiant à son arrivée : lent et fluide.
Joue-le une seule fois et, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), affiche directement la lumière à sa place.

Un coin de l’élément se replie comme une page qu’on tourne au survol.

Ajoute un effet au survol « Curl » (aussi appelé page curl) sur [où].
Un coin de l’élément doit se replier en douceur comme une page qu’on tourne, en montrant le revers du pli, puis redevenir plat quand le pointeur sort.
Garde le pli petit pour qu’il ne cache pas de contenu important et applique le même effet au focus clavier.

Un calque glisse depuis le côté par lequel le pointeur est entré et repart vers le côté par lequel il sort.

Ajoute un effet « Direction Aware Hover » (aussi appelé direction-aware overlay) sur [où].
Un calque doit glisser depuis le côté par lequel le pointeur est entré et repartir vers le côté par lequel il sort : rapide et fluide.
Détermine le côté à partir de la position du pointeur à l’entrée et à la sortie et, au toucher ou au focus clavier, utilise une direction par défaut.

Les icônes d’une rangée grossissent en douceur à l’approche du pointeur, comme le Dock de macOS.

Ajoute un effet « Dock Magnification » (aussi appelé dock) sur [où].
Les icônes de la rangée doivent grossir en douceur à mesure que le pointeur s’approche, la plus proche étant la plus grande et ses voisines légèrement agrandies, puis toutes reprendre leur taille normale quand le pointeur s’en va.
Fais grossir les icônes vers le haut à partir d’une ligne de base fixe et garde chaque icône utilisable à sa taille normale au toucher et au clavier.