Content is uncovered by slanted bars that slide away one after another.
npx shadcn@latest add https://hyperblur.dev/r/shutter-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shutter-reveal.tsx.
import { ShutterReveal } from "@/components/hyperblur/shutter-reveal"
<ShutterReveal><h1>HYPERBLUR</h1></ShutterReveal>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | What to reveal. |
| bars | number | 8 | How many bars cover the content. |
| color | string | "#2f7bff" | Bar color. |
| duration | number | 0.9 | Seconds until the last bar has cleared. |
| direction | "left" | "right" | "left" | Side the bars start clearing from. |
| trigger | "mount" | "hover" | "mount" | Play once on mount, or replay on hover. |