A pinned exploded view beside captions that scroll past. The view pans and zooms to the part each caption describes and lights it up, with a progress rail tracking the walkthrough.
Cover glass
A 0.4 mm sapphire window with an anti-glare coating sits flush with the frame.
Lens stack
Aspherical glass keeps corners sharp at f/1.8 from edge to edge.
Sensor
Larger pixels collect 2.3 times the light, so night shots stay clean.
Logic board
A dedicated image core merges nine frames in under 40 ms.
npx shadcn@latest add https://hyperblur.dev/r/parallax-sticky-captions.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/parallax-sticky-captions.tsx.
import { ParallaxStickyCaptions } from "@/components/hyperblur/parallax-sticky-captions"
<ParallaxStickyCaptions mode="page" height={520} />| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { kicker?: string; title: string; text: string; focus?: { x: number; y: number; zoom?: number } }[] | four camera module steps | Captions in order. focus is the point of the art to center, in percent, and the zoom to apply. |
| art | ReactNode | camera module | Your own illustration for the pinned side. The built-in one highlights a layer per step. |
| mode | "inner" | "page" | "inner" | inner owns a scroll viewport of the given height; page pins the stage while the nearest scrolling ancestor (or the window) scrolls past it. |
| height | number | 460 | Height of the pinned stage in pixels. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scrolling and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress back and forth on its own. In inner mode the pointer takes over and the viewport becomes scrollable while hovered. |
| duration | number | 12000 | Length of one autoplay loop in milliseconds. |
| onStepChange | (index: number) => void | undefined | Called when the active caption changes. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |