Blinds Reveal
One image turns into another through 3D slats that flip in sequence, like venetian blinds. Hover, scroll or click to flip.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/blinds-revealProps
| Prop | Type | Default | Description |
|---|---|---|---|
front* | { src: string; alt: string } | - | Image shown first. |
back* | { src: string; alt: string } | - | Image the slats reveal. |
slats | number | 10 | Number of slats. |
orientation | "horizontal" | "vertical" | "horizontal" | Horizontal slats flip up and down; vertical ones flip sideways. |
trigger | "hover" | "inView" | "click" | "hover" | What flips the slats. Hover also flips on keyboard focus. |
revealed | boolean | - | Controlled state: true shows the back image. |
onRevealedChange | (revealed: boolean) => void | - | Called when the state changes. |
duration | number | 800 | Milliseconds each slat takes to turn. |
stagger | number | 55 | Milliseconds between neighbouring slats starting. |
aspectRatio | string | "16 / 10" | CSS aspect ratio of the frame. |
className | string | - | Extra classes for the frame. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the frame. |
