A true dolly zoom down a hallway of door frames: the figure at the end keeps its size while the corridor stretches and compresses around it, with focal length and dolly distance readouts. Runs by itself or follows a progress value.
Chapter four
Nothing in the house moves. Only the distance between you and the door at the end.
Continue the story
npx shadcn@latest add https://hyperblur.dev/r/cinema-dolly-zoom.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-dolly-zoom.tsx.
import { CinemaDollyZoom } from "@/components/hyperblur/cinema-dolly-zoom"
<CinemaDollyZoom title="Something is wrong with the house" progress={scrollProgress} />| Prop | Type | Default | Description |
|---|---|---|---|
| kicker | string | "Chapter four" | Monospace line above the title. Empty hides it. |
| title | string | "The hallway keeps getting longer" | Main title. |
| subtitle | string | "Nothing in the house moves..." | Paragraph under the title. Empty hides it. |
| cta | { label: string; href: string } | null | { label: "Continue the story", href: "#" } | Light pill link. null hides it. |
| progress | number | undefined | Controlled position from 0 (wide angle, close) to 1 (long lens, far). Pass a scroll progress to drive it. |
| autoPlay | boolean | true | Moves back and forth by itself when progress is not set. Pauses offscreen. |
| duration | number | 7 | Seconds for one move in either direction. |
| frames | number | 14 | Number of door frames in the hallway, from 6 to 24. |
| accent | string | "#ff4d4d" | Color of the kicker, the readout meter and the focus ring. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |