Misprint Hero
A hero headline printed as three colour-separation plates that fly in misregistered and spring into register — the cursor pulls the print slightly out of true again.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/misprint-hero.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/misprint-hero.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | string | — | The headline printed in three colour-separation plates. |
| 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 | 520 | Hero height in px. |
| drift | number | 7 | How far the plates drift apart as the cursor moves, in px. |
| className | string | — | Additional CSS classes. |