Woodblock Hero
A woodblock-print sunrise hero — vermillion sun rising behind layered indigo hills, paper-coloured mist between the ridges, and gentle depth parallax as the cursor moves.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/woodblock-hero.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/woodblock-hero.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | string | — | Main headline set over the sky. |
| kicker | string | — | Small mono line above the headline. |
| subheadline | string | — | Supporting line under the headline. |
| children | React.ReactNode | — | CTA row rendered under the subheadline. |
| height | number | 560 | Hero height in px. |
| parallax | number | 1 | Parallax strength multiplier — 0 disables. |
| className | string | — | Additional CSS classes. |