A small framed image that grows to fill the whole stage while the headline fades away. A caption fades in at the end.
Coastal drives, slowly
npx shadcn@latest add https://hyperblur.dev/r/scroll-zoom-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-zoom-reveal.tsx.
import { ScrollZoomReveal } from "@/components/hyperblur/scroll-zoom-reveal"
<ScrollZoomReveal title="Wide open" src="/coast.jpg" alt="A coastal road at sunset" caption="Highway 1" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Wide open" | Headline above the frame. Fades out as you scroll. |
| subtitle | ReactNode | "Scroll to step inside" | Small line under the headline. |
| caption | ReactNode | Text shown over the image once it fills the stage. | |
| src | string | Image URL. Without it a built-in coastal scene is used. | |
| alt | string | "" | Accessible description of the image. Empty marks it decorative. |
| startInset | number | 33 | Percent cropped from each side at the start. Higher means a smaller starting frame, up to 45. |
| length | number | 1.5 | Viewport heights of scrolling the zoom takes. |
| scroller | RefObject<HTMLElement | null> | HTMLElement | null | A nested scroll container to follow instead of the window. Ignored when `height` is set. | |
| height | number | string | Renders the component inside its own scroll viewport of this height, useful for cards and embeds. Leave unset to follow the window or `scroller`. | |
| autoplay | boolean | false | Only with `height`. Scrolls the viewport up and down on its own until the visitor scrolls it. Static under reduced motion. |
| accent | string | "#ffb26b" | Focus ring color. |