A video modal with a scrubber split into chapters, hover previews of each chapter, synced captions and speed control. Without a src it plays a styled preview timeline, so it works before the video exists.
Cycles keep work moving in two week rhythms.
npx shadcn@latest add https://hyperblur.dev/r/modal-video-chapters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-video-chapters.tsx.
import { ModalVideoChapters } from "@/components/hyperblur/modal-video-chapters"
<ModalVideoChapters src="/tour.mp4" chapters={chapters} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Watch the tour" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| title | string | "Inside Relay: a six minute tour" | Title shown over the player. |
| src | string | undefined | Video file URL. When omitted the player runs a simulated timeline. |
| duration | number | 400 | Length in seconds for the simulated timeline (read from the file when src is set). |
| chapters | { title: string; start: number; tint?: string }[] | 5 chapters | Chapter markers in seconds. tint colors the simulated scene. |
| captions | { start: number; text: string }[] | 10 lines | Caption cues in seconds, toggled with CC or the C key. |
| autoPlay | boolean | true | Starts playing when the modal opens. |
| onProgress | (seconds: number) => void | undefined | Called once per second of playback position. |
| accent | string | "#ffffff" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |