Magnetic Button

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.

La carte se déplace et change légèrement d’échelle en réponse au mouvement du pointeur sur elle.

Ajoute un effet « Wobble Card » sur [où].
Quand le pointeur se déplace sur la carte, celle-ci doit glisser légèrement vers lui tandis que son contenu glisse légèrement dans l’autre sens avec un petit agrandissement, en suivant en douceur, puis tout revient en place quand le pointeur sort.
Garde le mouvement réduit, et désactive-le sur les appareils tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un champ de petits traits pivote pour pointer vers le pointeur, comme de la limaille de fer autour d’un aimant.

Ajoute un effet « Magnetic Filings » sur [où].
Une grille de traits courts doit pivoter immédiatement pour que chacun pointe droit vers le pointeur, comme de la limaille de fer autour d’un aimant, et tous doivent regarder vers le centre en l’absence de pointeur.
Garde-le comme arrière-plan décoratif qui ne bloque jamais les clics, et laisse les traits immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le curseur de texte s’agrandit ou rétrécit pour suivre la taille du caractère à côté duquel il se trouve.

Ajoute un effet « Adaptive Caret » (aussi appelé adaptive caret size) sur [où].
Le curseur de texte doit se placer devant le caractère le plus proche du pointeur et s’étirer ou se réduire rapidement à la hauteur de ce caractère, avec un redimensionnement fluide et vif, sans rebond.
Empêche le texte lui-même de bouger, et fais suivre au curseur les déplacements au clavier comme il suit le pointeur.

Un curseur circulaire inverse les couleurs situées dessous grâce à mix-blend-mode difference.

Ajoute un « Blend-Mode Cursor » (aussi appelé difference cursor ou inverting cursor) sur [où].
Remplace le pointeur par un cercle plein placé juste dessous, sans retard, qui inverse les couleurs du texte et des formes qu’il survole.
Limite le mélange à cette zone pour qu’il ne se mêle pas au reste de la page, vérifie qu’il inverse toujours clairement en mode sombre, et garde le curseur normal sur les appareils tactiles.