Spotlight Card — React Interaction

A card played under a torch: a soft pool of light rests at the center, then follows the pointer to uncover what is written there.

View source

Starting live preview

Usage

import { SpotlightCard } from "@/components/SpotlightCard";

export function Card() {
  return <SpotlightCard radius={190}
    {...{
      radius: 190,
      darkness: 0.86
    }}
  ><div style={{ padding: 40 }}>Content revealed by the beam.</div></SpotlightCard>;
}

Implementation notes & API

Accepts children, radius, darkness, disabled, className and style. Keyboard focus widens the beam around the focused element; reduced motion lifts the darkness entirely so content is always readable. Works without WebGPU.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT