Captions
Compositions
Core Primitives
Transitions
Typography
- Blur Reveal
- Staggered Fade Up
- Masked Slide Reveal
- Tracking In
- Inline Highlight
- Marker Highlight
- Shimmer Sweep
- Typewriter
- Text Fade Replace
- Slot Machine Roll
- Infinite Marquee
- Perspective Marquee
- Matrix Decode
- RGB Glitch Text
- Strikethrough Replace
- Blur Out Up
- Bottom Up Letters
- Top Down Letters
- Per Character Rise
- Soft Blur In
- Micro Scale Fade
- Scale Down Fade
- Focus Blur Resolve
- Spring Scale In
- Line by Line Slide
- Mask Reveal Up
- Short Slide Right
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.