A night drive scene with streetlights sweeping through the cabin and subtitles synced to a timeline, with speaker labels, sound cues and a scrubber that marks every line. Play, pause, seek and toggle captions.
npx shadcn@latest add https://hyperblur.dev/r/cinema-subtitles.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-subtitles.tsx.
import { CinemaSubtitles } from "@/components/hyperblur/cinema-subtitles"
<CinemaSubtitles cues={[{ start: 0.5, end: 3, speaker: "Ana", text: "Are you still there?" }]} duration={6} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Static, Episode 1" | Title in the top left corner. |
| episode | string | "S1 · E1 · The Counting Station" | Monospace label in the top right corner. Empty hides it. |
| cues | { start: number; end: number; text: string; speaker?: string }[] | six lines of dialogue | Subtitle cues in seconds. Cues without a speaker render as sound descriptions. |
| duration | number | 20 | Length of the timeline in seconds. |
| autoPlay | boolean | true | Starts playing on mount. |
| loop | boolean | true | Returns to the start at the end of the timeline. |
| defaultCaptions | boolean | true | Initial state of the CC toggle. |
| accent | string | "#ffd34d" | Color of speaker labels and the cue marks on the scrubber. |
| onCueChange | (cue: CinemaSubtitleCue | null) => void | undefined | Called when the active line changes. |
| headingAs | "h1" | "h2" | "h2" | Heading level of the title. |