127 Components
Spotlight Card
CardsMinimal surface card with GPU-composited radial cursor illumination, 1px CSS mask border reveal, and optional 3D perspective tilt.
Spotlight Card
Move your cursor across this surface to reveal the radial glow and 1px border mask.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/spotlight-card.json"
Props
TypeScript props supported by <SpotlightCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| spotlightColor | string | "rgba(128, 128, 128, 0.14)" | CSS color value for the internal radial surface illumination. |
| borderColor | string | "rgba(128, 128, 128, 0.55)" | CSS color value for the 1px mask-composite border highlight. |
| spotlightRadius | number | 320 | Radius of the radial spotlight gradient in pixels. |
| enableTilt | boolean | false | Enables subtle 3D perspective tilt along X and Y axes on pointer movement. |
Key Features
- Simultaneous radial surface illumination and 1px CSS mask-composite border reveal.
- Zero React re-renders during pointer movement using Framer Motion useMotionTemplate.
- Optional damped 3D perspective tilt along X and Y axes.
Keyboard & Accessibility
- Decorative radial spotlight and border mask layers are marked aria-hidden='true'.
- Automatically disables 3D perspective rotation when prefers-reduced-motion is active.
- Preserves full keyboard focus order and semantic child structure.