Spotlight Card `<mv-spotlight>`

Un projecteur qui suit le curseur dans une carte et en révèle la bordure ; dans une grille, la même lumière déborde sur les bordures des cartes voisines.

Catégorie	Effets
Type	Web Component (`<mv-spotlight>`)
Statut	stable
Keywords	spotlight, magic-card, border-glow, pointer, hover, grid, bento

When to use

A bento or feature grid should light up borders under the cursor, spilling onto neighboring cards
A single card needs a subtle hover light that reveals its border on desktop
A dark landing grid calls for a wider multicolor border glow that tracks the pointer

Avoid when

The card should tilt in 3D toward the pointer rather than light up → use Tilt Card instead
Most visitors are on touch devices, where no light is drawn at all

Installation

node scripts/add.mjs spotlight-card --out ./src/marvelous

Agent IA avec le serveur MCP Marvelous UI : install_components({ slugs: ["spotlight-card"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/element.js, core/pointer.js, components/spotlight-card/spotlight-card.js, components/spotlight-card/spotlight-card.css.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<div style="display:grid;gap:1.5rem;width:100%;max-width:60rem;margin:auto">
  <mv-spotlight style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem">
    <article class="mv-card">
      <header class="mv-card-header">
        <span style="display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-bottom:.75rem;border-radius:var(--mv-radius-md);background:var(--mv-accent-subtle);color:var(--mv-accent-fg)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg></span>
        <h3 class="mv-card-title">Instant deploys</h3>
        <p class="mv-card-description">Every commit goes live in under 30 seconds, with one-click rollbacks.</p>
      </header>
    </article>
    <article class="mv-card">
      <header class="mv-card-header">
        <span style="display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-bottom:.75rem;border-radius:var(--mv-radius-md);background:var(--mv-accent-subtle);color:var(--mv-accent-fg)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
        <h3 class="mv-card-title">Certified security</h3>
        <p class="mv-card-description">End-to-end encryption, SSO and audit logs, SOC 2 and GDPR compliant.</p>
      </header>
    </article>
    <article class="mv-card">
      <header class="mv-card-header">
        <span style="display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-bottom:.75rem;border-radius:var(--mv-radius-md);background:var(--mv-accent-subtle);color:var(--mv-accent-fg)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="m7 15 4-4 3 3 5-6"/></svg></span>
        <h3 class="mv-card-title">Real-time analytics</h3>
        <p class="mv-card-description">Track traffic, conversions and Core Web Vitals with no third-party scripts.</p>
      </header>
    </article>
  </mv-spotlight>

  <mv-spotlight data-variant="glow">
    <article class="mv-card" data-variant="elevated" style="flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem">
      <div style="min-width:14rem;flex:1">
        <p style="margin:0 0 .25rem;font-size:var(--mv-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mv-accent-fg)">Team plan</p>
        <h3 style="margin:0;font-size:var(--mv-text-xl);letter-spacing:-.01em">$49/month for up to 25 members</h3>
        <p style="margin:.35rem 0 0;font-size:var(--mv-text-sm);color:var(--mv-fg-muted)">14-day free trial, no credit card required.</p>
      </div>
      <button class="mv-button" data-size="lg">Start free trial</button>
    </article>
  </mv-spotlight>
</div>

API

Attributes

Name	Type	Description
`items`	CSS selector	Lit elements (default: direct children). Useful when cards are nested.
`data-variant`	glow	Wider, multicolor border (amber → pink → accent).
`disabled`	boolean	Turns the effect off.

Content structure

Name	Description
`children`	A single card, or every card in a grid (put the grid on `<mv-spotlight>` itself).

CSS classes

Name	Description
`mv-spotlight-item`	Added automatically to each lit element; carries ::before (inner light) and ::after (border ring).

CSS variables

Name	Default	Description
`--mv-spotlight-size`	`22rem`	Radius of the inner light.
`--mv-spotlight-color`	`accent 9% (light) / 16% (dark)`	Inner light color.
`--mv-spotlight-border-size`	`16rem`	Radius of the border light.
`--mv-spotlight-border-color`	`accent`	Lit border color.
`--mv-spotlight-border-width`	`1px`	Ring thickness.
`--mv-spotlight-glow-1 / -glow-2`	`amber / pink`	Glow variant: colors at the core of the light.
`--mv-px / --mv-py`		Pointer position relative to each card (written by the element).

Accessibility

Decorative (pseudo-elements, pointer-events: none). Nothing is drawn on touch screens; with the keyboard, the card containing focus gets the border light.