Spotlight Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SpotlightCard from "./SpotlightCard";

export default function Example() {
  return (
    <SpotlightCard
      children={"Hover here."}
      spotlightColor={"#b8a7ed"}
      radius={320}
      intensity={0.16}
    />
  );
}

Using Spotlight Card

Wrap your content in children. radius controls the highlight's footprint and intensity controls how strongly it appears.

Choose spotlightColor to complement the surface. The highlight is decorative, so selected or important states should also be clear in the card's content.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Your content. No demo content is rendered by default.
spotlightColor	string	No	"#b5f5d1"	Spotlight color
radius	number	No	320	Spotlight radius
intensity	number	No	0.16	Glow intensity
className	string	No	""	Additional CSS class names, merged with base component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.
onPointerMove	function	No	undefined	Optional caller pointer-move handler.
onPointerLeave	function	No	undefined	Optional caller pointer-leave handler.