Two curtain panels slide apart to uncover your content, with an optional label that fades out first.
New
Aero One
$129
npx shadcn@latest add https://hyperblur.dev/r/curtain-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/curtain-reveal.tsx.
import { CurtainReveal } from "@/components/hyperblur/curtain-reveal"
<CurtainReveal trigger="view" label="HYPERBLUR">
<ProductCard />
</CurtainReveal>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Content hidden behind the curtains. |
| trigger | "mount" | "view" | "hover" | "mount" | Open on mount, once when scrolled into view, or while hovered or focused. |
| direction | "horizontal" | "vertical" | "horizontal" | Panels part left and right, or top and bottom. |
| color | string | "#0f0f0f" | Curtain color. |
| duration | number | 1.1 | Seconds the panels take to slide. |
| delay | number | 0.3 | Seconds to wait before opening. |
| label | ReactNode | Logo or text centered on the curtains. It fades out before the panels move. |