Compositions
Core Primitives
Transitions
Typography
Customize
320
520
0.08
600
1
Installation
$ pnpm dlx shadcn@latest add @framecn/spotlight-card
Usage
import { SpotlightCard } from "@/components/framecn/spotlight-card";<SpotlightCard />API Reference
SpotlightCard
| Prop | Type | Default |
|---|---|---|
title | string | "Spotlight Card" |
body | string | "Soft radial light follows the cursor, picking out the microborder." |
cardWidth | number | 520 |
cardHeight | number | 320 |
glowSize | number | 600 |
glowOpacity | number | 0.08 |
background | string | "#050505" |
cardColor | string | "#0a0a0a" |
textColor | string | "#fafafa" |
mutedColor | string | "#71717a" |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 150 |
className | string | - |
children | ReactNode | - |
Notes
Cursor-tracked rim light
A radial spotlight follows the cursor and rims the card edges. Creates a dramatic lifting effect from a dark background.