Karaoke
Each word fills with colour left to right exactly as it is spoken, with the whole phrase readable before the voice reaches it
Installation
$ pnpm dlx shadcn@latest add @remocn/caption-karaokeUsage
CaptionKaraoke takes a timed transcript and renders only the text block, so
place it inside your own AbsoluteFill. See Positioning
for safe placements and Get a transcript
for producing captions.json.
import { AbsoluteFill } from "remotion";
import { CaptionKaraoke } from "@/components/remocn/caption-karaoke";
import captions from "./captions.json";
export const MyScene = () => (
<AbsoluteFill
style={{
justifyContent: "flex-end",
alignItems: "center",
paddingBottom: 108,
paddingInline: 192,
}}
>
<CaptionKaraoke captions={captions} />
</AbsoluteFill>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
captions | Caption[] | — | The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`. |
combineTokensWithinMilliseconds | number | 1200 | How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum). |
holdMs | number | 600 | How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold instead of hanging through the pause. |
fontSize | number | 64 | Font size in pixels. |
fontWeight | number | 800 | Font weight. The font itself is inherited. |
color | string | "#ffffff" | Colour of words the voice has not reached yet. |
activeColor | string | "#facc15" | Colour that fills each word as it is spoken. |
shadow | boolean | true | A tight text shadow that keeps the caption legible over bright footage. |
className | string | — | Classes for the text block — width, font family, `uppercase`. |