An image that opens from a thin glowing slit to full size when it scrolls into view, while it settles from a 1.3x zoom and its caption slides up line by line.
npx shadcn@latest add https://hyperblur.dev/r/scroll-image-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-image-reveal.tsx.
import { ScrollImageReveal } from "@/components/hyperblur/scroll-image-reveal"
<ScrollImageReveal src="/photos/salt-flats.jpg" alt="Salt flats at dawn" caption="Salt flats before the heat" />| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | Image URL. A built-in gradient landscape is used when omitted. | |
| alt | string | "" | Alternative text for the image. |
| eyebrow | string | "Plate 07 / Dawn" | Small uppercase line above the caption. Hidden when empty. |
| caption | string | "Salt flats before the heat" | Main caption line. |
| detail | string | "Uyuni, Bolivia. Shot at 05:42, thirty minutes ahead of sunrise." | Secondary caption line. |
| aspect | string | "4 / 3" | CSS aspect-ratio of the frame. |
| axis | "vertical" | "horizontal" | "vertical" | Direction the slit opens: top and bottom, or left and right. |
| radius | number | 20 | Corner radius of the open frame, in pixels. |
| duration | number | 1400 | Duration of the opening in milliseconds. |
| threshold | number | 0.25 | Share of the frame that must be visible before it opens. |
| once | boolean | true | Open once. When false the image closes again when it leaves the viewport. |
| loop | boolean | false | Open and close repeatedly while visible. Meant for previews. |
| loopHold | number | 2800 | Milliseconds the frame stays open per cycle when looping. |
| accent | string | "#ff9f6e" | Color of the glow around the slit and the eyebrow line. |