Custom Cursor (curseur personnalisé)

Une forme ou une étiquette suit le pointeur avec un retard élastique ou adouci.

Ajoute un « Cursor Follower » (aussi appelé following pointer ou smooth cursor) sur [où].
Un petit repère rond doit suivre le pointeur avec un retard doux et amorti, puis glisser jusqu’à s’arrêter exactement là où le pointeur s’immobilise, sans rebondir.
Garde le vrai pointeur visible, ne laisse jamais le repère bloquer les clics, et retire-le sur les appareils tactiles.

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.

Une traînée de formes qui s’estompent reste derrière le pointeur lorsqu’il se déplace.

Ajoute un effet « Cursor Trail » (aussi appelé mouse trail) sur [où].
Quand le pointeur bouge, il doit laisser derrière lui une courte traînée de petits points qui rétrécissent et s’estompent vite, pour que la traînée reste courte et suive le trajet en douceur.
Ne dessine la traînée que pendant le mouvement du pointeur, ne la laisse jamais bloquer les clics, et supprime-la sur les écrans tactiles et 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.

L’élément est attiré vers le pointeur quand il s’approche, puis revient en place quand il s’éloigne.

Ajoute un effet « Magnetic Button » (aussi appelé magnetic target ou magnetic hover) sur [où].
Quand le pointeur s’approche, le bouton doit être un peu attiré vers lui, son libellé bougeant un peu plus, et quand le pointeur s’éloigne, il doit revenir à sa place avec un petit rebond élastique.
Empêche la mise en page autour de bouger, et désactive l’attraction sur les écrans 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).