A chapter menu with illustrated poster cards, watched progress and a backdrop that crossfades to the colors of the chosen chapter. Arrow keys move between chapters and the play button resumes where the viewer stopped.
The Long Quiet · Director's cut
Elena finds the logbook. Every entry for forty years ends with the same four numbers.
npx shadcn@latest add https://hyperblur.dev/r/cinema-chapter-select.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-chapter-select.tsx.
import { CinemaChapterSelect } from "@/components/hyperblur/cinema-chapter-select"
<CinemaChapterSelect onPlay={(c) => player.seek(c.start)} />| Prop | Type | Default | Description |
|---|---|---|---|
| film | string | "The Long Quiet · Director's cut" | Monospace line above the chapter info. Empty hides it. |
| chapters | { id: string; title: string; synopsis: string; runtime: string; start: string; watched?: number; motif: "sun" | "waves" | "peaks" | "stars" | "city"; colors: [string, string] }[] | five chapters | Chapters in order. watched goes from 0 to 1, motif and colors draw the poster. |
| value | string | undefined | Controlled id of the selected chapter. |
| defaultValue | string | second chapter id | Initially selected chapter when uncontrolled. |
| onValueChange | (id: string) => void | undefined | Called when a chapter is selected. |
| onPlay | (chapter: CinemaChapter) => void | undefined | Called by the play button with the selected chapter. |
| playLabel | string | "Play chapter" | Label of the play button. Partly watched chapters show Resume chapter. |
| headingAs | "h1" | "h2" | "h2" | Heading level of the chapter title. |