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
72
3
1
Installation
$ pnpm dlx shadcn@latest add @framecn/caption-highlight
Usage
import { CaptionHighlight } from "@/components/framecn/caption-highlight";
import type { CaptionWord } from "@/components/framecn/caption-highlight";const words: CaptionWord[] = [
{ text: "Every", start: 0.0, end: 0.35 },
{ text: "great", start: 0.35, end: 0.65 },
{ text: "video", start: 0.65, end: 1.0 },
// ...
];
<CaptionHighlight words={words} />;API Reference
CaptionHighlight
| Prop | Type | Default |
|---|---|---|
words | CaptionWord[] | (demo words) |
wordsPerGroup | number | 3 |
color | string | "#ffffff" |
highlightColor | string | "#ff1745" |
fontSize | number | 72 |
fontWeight | number | 800 |
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
Words are grouped automatically
The wordsPerGroup prop controls how many words appear on screen at once.
Groups fade in together and out together, with each word's highlight timed to
its start/end window.
Word timing is in seconds
The start and end fields on each CaptionWord are in seconds, not
milliseconds or frames. Pass the raw transcript timing from your
speech-to-text provider directly.