Blueprint Reveal
A design blueprint that draws itself, then wipes into the finished UI on hover, scroll or click. Tells the story from wireframe to product.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/blueprint-revealOther Examples
Reveal On Scroll
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | - | The finished UI shown over the blueprint. Any content works: a screenshot, a mock or a real component. |
regions | BlueprintRegion[] | DEFAULT_REGIONS (nav, hero text, CTA, image, three cards) | Layout drawn as the wireframe, in % of the frame. Match it to the finished UI. |
trigger | "hover" | "inView" | "click" | "hover" | What reveals the finished UI. Hover also reveals on keyboard focus; click adds a toggle button. |
revealed | boolean | - | Controlled state: true shows the finished UI. |
onRevealedChange | (revealed: boolean) => void | - | Called when the state changes. |
tone | "blue" | "ink" | "paper" | "blue" | Blueprint colours. |
aspectRatio | string | "16 / 10" | CSS aspect ratio of the frame. |
dimensions | string | "1440 × 900" | Size note on the top ruler. Pass an empty string to hide it. |
label | string | "Design blueprint. Reveal to see the finished page." | Accessible name of the frame. |
className | string | - | Extra classes for the frame. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the frame. |