Spotlight Effect
Un radial-gradient de 150 px suit la souris en temps réel grâce aux variables CSS --spotlight-x/y mises à jour par mousemove — le curseur éclaire l'élément comme une lampe. JavaScript requis, 400 octets.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0357-root centre un bloc .hover-box.hover-spotlight de 200 × 200 px. Un pseudo-élément ::before de 150 × 150 px porte un radial-gradient(circle, rgba(99,102,241,.4) 0, transparent 70%) ; il est positionné via left: var(--spotlight-x, 50%); top: var(--spotlight-y, 50%) avec transform: translate(-50%, -50%) pour centrer la tache lumineuse sur la position de la variable. Au repos, opacity: 0 ; au survol, opacity: 1.
Le script (!function(){...}()) recherche tous les [data-spotlight] dans .fx-0357-root et écoute mousemove sur chacun. À chaque mouvement, il calcule la position du curseur dans l'élément (clientX − rect.left) et met à jour les variables --spotlight-x et --spotlight-y sur l'élément. Le CSS lit ces variables et repositionne le ::before en temps réel. Sous prefers-reduced-motion: reduce, le script ne s'enregistre pas et aucun suivi de souris n'a lieu.
Mesuré dans Chromium 151 : le spotlight suit la souris, deux copies sur une page — chaque spotlight suit sa propre souris, indépendamment. L'effet nécessite la souris : pas de suivi au clavier ni au doigt.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le script ne s'initialise pas et le spotlight ne suit pas la souris. L'élément reste visible et utilisable sans animation. - Clavier et toucher : l'effet de spotlight suit la souris (mousemove) et n'est pas reproductible au clavier ni au toucher — c'est une limitation inhérente à l'interaction pointeur. L'élément reste fonctionnel sans l'effet.
- Contenu : le spotlight est un effet purement décoratif (pseudo-élément). Tout le contenu textuel reste accessible et lisible dans tous les états.
- Focus : pour signaler l'état focus au clavier, ajoutez
:focus-visible { outline: 2px solid #6366f1; }sur.hover-spotlightdans votre CSS de page.
Compatibilité navigateur
Variables CSS (--spotlight-x, --spotlight-y) + 400 octets de JavaScript (mousemove, getBoundingClientRect, matchMedia), aucune dépendance. Mesuré dans Chromium 151 : suivi de souris précis, deux copies indépendantes. Variables CSS disponibles depuis Chrome 49, Firefox 31, Safari 9.1.
Sans JavaScript, le spotlight ne s'active pas et l'élément reste dans son état de repos. Sans variables CSS, le pseudo-élément reste au centre (valeur par défaut 50 %).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0357-root">
<div class="hover-box hover-spotlight" data-spotlight="">
<span>…</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Rayon du spotlight (CSS — width / height du ::before) |
150 × 150 px | Un rayon plus grand (200 px) donne une lumière plus diffuse ; plus petit (80 px) concentre davantage le faisceau. |
Couleur de la lumière (CSS — rgba(99,102,241,.4) dans le radial-gradient) |
Indigo à 40 % d'opacité | Changez la couleur et l'opacité : rgba(255,255,255,.3) pour une lumière blanche, rgba(251,191,36,.5) pour une lumière ambrée de projecteur vintage. |
Douceur du dégradé (CSS — 0, transparent 70%) |
Centre plein, fondu de 0 à 70 % | transparent 50% donne un cercle de lumière plus dur ; transparent 90% étale la lumière sur quasiment tout l'élément. |
Opacité au repos (CSS — opacity: 0 sur ::before) |
Invisible au repos | opacity: .1 laisse une légère lueur permanente, indiquant que le spotlight est actif même sans survol. |
Zone d'écoute (HTML — data-spotlight) |
L'élément .hover-spotlight lui-même |
Mettez data-spotlight sur un conteneur plus grand pour étendre la zone de suivi sans changer la taille de l'élément éclairé. |
FAQ
mousemove qui n'est pas déclenché par un toucher ordinaire. Sur mobile, l'élément reste dans son état de repos. L'effet est conçu pour les interfaces à curseur.[data-spotlight] dans chaque .fx-0357-root et leur donne un écouteur indépendant. Dupliquez la structure HTML autant de fois que nécessaire — chaque spotlight suit sa propre souris.overflow: hidden sur .hover-box contient le ::before dans l'élément. Retirez overflow: hidden si vous voulez que la lueur déborde légèrement.
