An opening title card with anamorphic letterbox bars that close in, a slow push-in on a dusk desert road and a title that settles from wide tracking. A compressed billing block and the release line sit inside the bottom bar.
Halden Pictures presents
Some roads only run in one direction.
npx shadcn@latest add https://hyperblur.dev/r/cinema-title-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-title-card.tsx.
import { CinemaTitleCard } from "@/components/hyperblur/cinema-title-card"
<CinemaTitleCard title="Northbound" tagline="The last train leaves at dawn." aspect={2.39} />| Prop | Type | Default | Description |
|---|---|---|---|
| presenter | string | "Halden Pictures presents" | Small spaced line above the title. Empty hides it. |
| title | string | "The Long Quiet" | Main title, set in wide uppercase. |
| tagline | string | "Some roads only run in one direction." | Line under the accent rule. Empty hides it. |
| release | string | "In theaters March 14" | Text at the left of the bottom letterbox bar. |
| billing | string | "Halden Pictures in association with..." | Credit block compressed horizontally inside the bottom bar. Hidden below 560px and when empty. |
| aspect | number | 2.39 | Aspect ratio the letterbox frames, for example 1.85, 2.39 or 2.76. Bars never get thinner than 9% of the height. |
| pushDuration | number | 16 | Seconds for one push-in toward the horizon. The move then reverses and repeats. |
| primaryCta | { label: string; href: string } | null | { label: "Watch the trailer", href: "#" } | Solid button with a play glyph. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Get tickets", href: "#" } | Glass button. null hides it. |
| accent | string | "#ffb35c" | Color of the rule under the title, the status dot and the button glow. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |