A photograph that develops through spreading blots of ink as you scroll, with ragged edges from a turbulence filter and a warm rim on each blot. The title and an exposure readout settle in once the image is clear.
npx shadcn@latest add https://hyperblur.dev/r/motion-ink-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-ink-reveal.tsx.
import { MotionInkReveal } from "@/components/hyperblur/motion-ink-reveal"
<MotionInkReveal title="North shore, 05:12" turbulence={1.4} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Field notes · Lofoten" | Small label above the title. |
| title | string | "Light at 21:40" | Title shown over the developed image. |
| caption | string | "f/2.8 · 1/60s · ISO 400" | Text in the readout pill next to the percentage. |
| hint | string | "Scroll to develop" | Prompt shown before the reveal. Empty string hides it. |
| inkColor | string | "#ffb27a" | Color of the rim around each spreading blot. |
| turbulence | number | 1 | Raggedness of the ink edges. 0 gives clean circles. |
| accent | string | "#ffb27a" | Accent color for highlights, rails and glows. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 5 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the section is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the section lives inside a scrolling container. |