Vertical bars sweep off one after another, each trailed by a colored layer, then drop back in reverse to cover the content.
The Field Collection
Linen, waxed cotton and recycled wool. Shop the drop →
npx shadcn@latest add https://hyperblur.dev/r/curtain-stagger-wipe.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/curtain-stagger-wipe.tsx.
import { CurtainStaggerWipe } from "@/components/hyperblur/curtain-stagger-wipe"
<CurtainStaggerWipe bars={6} trigger="view"><Hero /></CurtainStaggerWipe>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | built-in scene | Content revealed behind the curtain. |
| open | boolean | Controlled open state. True means the curtain is open and the content visible. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called whenever the curtain opens or closes, including trigger, closeAfter and loop changes. | |
| trigger | "mount" | "view" | "manual" | "mount" | When the curtain opens by itself: after mount, when it scrolls into view, or never (drive it with open). |
| duration | number | 750 | Travel time of each bar in milliseconds. |
| color | string | "#111111" | Color of the front layer of each bar. |
| accent | string | "#2f7bff" | Color of the glowing line on the leading edge. |
| colors | string[] | ["#2f7bff", "#7fb3ff", "#ededed", "#5b5bff", "#1d4ed8"] | Colors of the trailing layers, used in order and repeated. |
| direction | "up" | "down" | "up" | Direction the bars travel when opening. |
| bars | number | 5 | Number of bars, from 1 to 24. |
| stagger | number | 70 | Delay between bars in milliseconds. |
| replay | string | number | Change this value to snap the curtain shut and play the reveal again. | |
| closeAfter | number | Milliseconds to stay open before closing again. Leave unset to stay open. | |
| loop | boolean | false | Reopen after closing, for a continuous open, hold, close cycle. Use with closeAfter. |