Captions: karaoke
Captions that fill in word by word as they are spoken, and dim the words still to come.
A preset of Captions.
CaptionsKaraoke, defaults
Installation
npx shadcn add https://www.reelcn.dev/r/captions-karaoke.jsonFiles land in src/reelcn/ with the items it builds on.
Usage
<CaptionsKaraoke captions={captions} />Props
PropTypeDescription
styleCSSProperties
classNamestring
captions*Caption[]Word-level captions, as `@remotion/captions` defines them. `pnpm reelcn-transcribe` writes this shape.
sizenumberFont size in design units; long pages shrink from here.
colorstring
pageMsnumberHow much speech goes on one page, in milliseconds. Lower means fewer words at a time.
maxWordsnumberHard cap on words per page; long pages are split.
emphasizestring[]Words painted in the emphasis color. Case and punctuation are ignored.
position"auto" | "top" | "middle" | "bottom"
auto sits above the platform UI in portrait and in the lower third elsewhere.activeColorstring
emphasisColorstring
backgroundstring
Built from
Use
- Lyric videos and sing-along clips
- Tutorials where viewers follow along word by word
Guides
Components take their colors from a theme, their timing from motion props and their layout from the canvas.
Source
registry/items/captions-karaoke.tsx
/**
* @title Captions: Karaoke
* @category social
* @description Captions that fill in word by word as they are spoken, and dim the words still to come.
* @duration data-driven
* @preset captions
* @use Lyric videos and sing-along clips
* @use Tutorials where viewers follow along word by word
* @tags captions, karaoke, lyrics
* @example
* <CaptionsKaraoke captions={captions} />
*/
import { Captions, type CaptionsProps } from "./captions";
export type CaptionsKaraokeProps = Omit<CaptionsProps, "variant">;
export function CaptionsKaraoke(props: CaptionsKaraokeProps) {
return <Captions {...props} variant="karaoke" />;
}