Captions
Compositions
Core Primitives
Transitions
Typography
Customize
120
1
Installation
$ pnpm dlx shadcn@latest add @framecn/caption-kinetic-slam
Usage
import { CaptionKineticSlam } from "@/components/framecn/caption-kinetic-slam";
import type { CaptionWord } from "@/components/framecn/caption-kinetic-slam";const words: CaptionWord[] = [
{ text: "Every", start: 0.0, end: 0.35 },
{ text: "great", start: 0.35, end: 0.65 },
// ...
];
<CaptionKineticSlam words={words} />;API Reference
CaptionKineticSlam
| Prop | Type | Default |
|---|---|---|
words | CaptionWord[] | (demo words) |
color | string | "#ffffff" |
fontSize | number | 120 |
fontWeight | number | 900 |
background | string | "#0a0a0a" |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 180 |
width | number | 1280 |
height | number | 720 |
className | string | - |
CaptionWord
| Field | Type | Description |
|---|---|---|
text | string | The word text |
start | number | Start time in seconds |
end | number | End time in seconds |
Notes
Best suited for punchy, single-word moments
Kinetic Slam works best for high-energy clips where each word carries weight. Words are displayed one at a time, full-width centered. For denser narration, use Caption Highlight or Caption Pill Karaoke instead.
Font falls back gracefully
The component prefers Anton (a condensed display face) with Impact and system-ui as fallbacks. For best results, load Anton from Google Fonts in your project.