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
10
4
1
Installation
$ pnpm dlx shadcn@latest add @framecn/backdrop
Usage
import { Backdrop } from "@/components/framecn/backdrop";<Backdrop background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)" />API Reference
Backdrop
| Prop | Type | Default |
|---|---|---|
background | string | "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" |
fill | BackdropFill | - |
padding | number | 10 |
radius | number | 4 |
shadow | string | - |
children | ReactNode | - |
width | number | 1280 |
height | number | 720 |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 90 |
className | string | - |
BackdropFill
type BackdropFill =
| { type: "color"; value: string }
| { type: "gradient"; value: string }
| { type: "image"; src: string; fit?: "cover" | "contain" };Notes
Background vs fill
The background prop accepts any CSS background string (colors, gradients,
etc.) and is used when no fill is provided. For image fills or more precise
control, pass a typed fill object instead. padding and radius are
expressed as percentages of the composition dimensions.