Five mountain ridges at different depths with fog banks drifting between them, a pale sun and birds crossing the sky. Each layer shifts with the pointer by its own depth, and an altitude scale runs down the right edge.
A documentary in five altitudes
Two winters with the last fire lookouts of the northern range, where the fog decides what you get to see.
Watch the first chapter
npx shadcn@latest add https://hyperblur.dev/r/cinema-depth-fog.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-depth-fog.tsx.
import { CinemaDepthFog } from "@/components/hyperblur/cinema-depth-fog"
<CinemaDepthFog title="Into the Fjords" tint="#8fb3a4" fog={0.8} />| Prop | Type | Default | Description |
|---|---|---|---|
| kicker | string | "A documentary in five altitudes" | Monospace line above the title. Empty hides it. |
| title | string | "Above the Treeline" | Main title. |
| subtitle | string | "Two winters with the last fire lookouts..." | Paragraph under the title. Empty hides it. |
| cta | { label: string; href: string } | null | { label: "Watch the first chapter", href: "#" } | Light pill link with a play disc. null hides it. |
| altitudes | string[] | ["3,240 m", "2,610 m", "1,980 m", "1,150 m", "620 m"] | Labels of the altitude scale. Empty array hides it. Hidden below 620px. |
| tint | string | "#7fa6c4" | Color mixed into the sky and the ridges, from hazy far layers to dark near ones. |
| fog | number | 0.7 | Opacity of the fog banks, from 0 to 1. |
| depth | number | 1 | Multiplier for the pointer parallax. 0 turns it off. |
| speed | number | 1 | Multiplier for fog drift, birds and camera sway. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |