Five paper-cut ridges start stacked over the whole frame and sink one after another as you scroll, front ridge first. The sky opens behind them, the sun rises and the headline settles above the hills.
npx shadcn@latest add https://hyperblur.dev/r/motion-cutout-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-cutout-reveal.tsx.
import { MotionCutoutReveal } from "@/components/hyperblur/motion-cutout-reveal"
<MotionCutoutReveal title="The long way north" layers={["#2b4a5c", "#1f3a4a", "#162c39", "#0f2029", "#08141b"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Trail guide · Autumn 2027" | Small label above the headline. |
| title | string | "Five ridges between you and the coast" | Headline revealed in the sky. |
| hint | string | "Scroll to open" | Prompt shown on the closed layers. Empty string hides it. |
| layers | [string, string, string, string, string] | dusk purples | Ridge colors from the farthest to the nearest. |
| sky | [string, string, string] | ["#1c1742", "#7a4f93", "#ffad7a"] | Sky gradient from top to horizon. |
| sun | string | "#ffd7a8" | Sun and glow color. |
| 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. |
| duration | number | 5 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while pinned. |
| height | string | "100vh" | Height of the pinned stage. |