Spotlight Card

Installation$

pnpm dlx @glinui/cli@latest add spotlight-card

Usage$

SpotlightCard wraps Card and tracks the cursor position via CSS custom properties --spot-x and --spot-y to project a radial spotlight onto the card surface. Move your pointer over the preview above to see the effect.

Three feature cards share one slow looping pointer, so the accent spotlight and its border highlight stay visible without hovering (autoPlay). A real pointer takes over as soon as you hover. Reduced motion turns the loop off.

Examples$

Variants$

glinr is the default, plain is the flat shadcn look, solid is a neutral tonal face and glass is opt-in. Glass needs a backdrop, so the set below sits on a vivid one.

import { SpotlightCard } from "@glinui/ui"
// Omit variant to follow the ambient style (glinr by default).
export function SpotlightCardVariants() {

import { SpotlightCard } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function SpotlightCardVariants() {
return (
  <>
    <SpotlightCard variant="glinr">
      ...
    </SpotlightCard>
    <SpotlightCard variant="plain">
      ...
    </SpotlightCard>
    <SpotlightCard variant="solid">
      ...
    </SpotlightCard>
    <SpotlightCard variant="glass">
      ...
    </SpotlightCard>
  </>
)
}

Colors$

The spotlight is an accent tint by default. Pass spotlightClassName with a --tone-* token to recolor it.

import { SpotlightCard } from "@glinui/ui"
export function SpotlightCardTones() {
return (

import { SpotlightCard } from "@glinui/ui"


export function SpotlightCardTones() {
return (
  <SpotlightCard spotlightClassName="[background:radial-gradient(var(--spot-size,300px)_circle_at_var(--spot-x,_50%)_var(--spot-y,_50%),color-mix(in_oklab,var(--tone-success)_34%,transparent),transparent_70%)]">
    ...
  </SpotlightCard>
)
}

In a layout$

A mini dashboard section: three metric cards with a live spotlight above a plain activity list.

// A mini dashboard section: three metric cards with a live spotlight above a plain activity list.
import { SpotlightCard } from "@glinui/ui"
export function SpotlightCardLayout() {

// A mini dashboard section: three metric cards with a live spotlight above a plain activity list.
import { SpotlightCard } from "@glinui/ui"


export function SpotlightCardLayout() {
return (
  <section className="grid gap-4 sm:grid-cols-3">
    ...
  </section>
)
}

Accessibility$

• The spotlight overlay carries aria-hidden="true" and pointer-events-none so it is invisible to assistive technology and cannot intercept interactions.
• All content inside the card remains fully keyboard-accessible and semantically structured.
• SpotlightCard does not modify focus behavior, interactive children (buttons, links) work as expected.

Reduced Motion$

The spotlight overlay is hidden entirely when prefers-reduced-motion: reduce is set via motion-reduce:hidden. The underlying Card hover transition (transform, box-shadow) is also disabled via motion-reduce:transition-none and motion-reduce:hover:translate-y-0, ensuring zero motion for users who prefer it.

API Reference$

SpotlightCard$

Accepts all props from Card (which in turn accepts all div HTML attributes). The only additional prop is spotlightClassName.

Source$

import { SpotlightCard } from "@glinui/ui"