End credits that roll up a dark frame with roles and names aligned on a center gutter, cast and crew sections and a closing studio mark. Hovering or pressing Pause stops the roll.
npx shadcn@latest add https://hyperblur.dev/r/cinema-credits-roll.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-credits-roll.tsx.
import { CinemaCreditsRoll } from "@/components/hyperblur/cinema-credits-roll"
<CinemaCreditsRoll title="Our team" blocks={[{ heading: "Founders", lines: [{ role: "CEO", names: ["Ana Lima"] }] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "The Long Quiet" | Title at the top of the roll, also used in the section label. |
| blocks | { heading?: string; lines: { role: string; names: string[] }[] }[] | director, cast and crew blocks | Credit blocks in order. Each line shows the role on the left and one or more names on the right. |
| note | string | "Filmed on location in Reykjavík..." | Centered paragraph after the blocks. Empty hides it. |
| endCard | string | "Halden Pictures" | Text under the closing mark. |
| duration | number | 38 | Seconds for one full pass of the roll. |
| paused | boolean | undefined | Controlled paused state. |
| defaultPaused | boolean | false | Initial paused state when uncontrolled. |
| onPausedChange | (paused: boolean) => void | undefined | Called when the Pause or Resume button is pressed. |
| accent | string | "#d7c49e" | Color of section headings and the closing mark. |
| headingAs | "h1" | "h2" | "h2" | Heading level of the title. Section headings are h3. |