Duck Hero
The landing section: announcement pill, display headline, two actions, and a terminal that types itself beside them.
Preview
Stick it on anything.
A dark-first shadcn registry with holographic accents and thick sticker borders. One command installs the theme everywhere.
31 components · MIT · no runtime dependency
Installation
One command writes the section and every component it renders.
pnpm dlx shadcn@latest add @duck/duck-heroThe block lands in components/blocks/duck-hero.tsx. It builds on announcement, holo-button and terminal, which the CLI installs alongside it. Already installed items are skipped.
Usage
import { DuckHero } from "@/components/blocks/duck-hero"A block is a starting point, not a widget. The props exist so the example renders with real content — once the file is in your project, hard-code what never changes and delete the rest.
Props
Everything not listed here is forwarded to the root element.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | { text: string; tag?: string; href?: string } | - | The pill above the headline. With an href it grows an arrow. |
| title | React.ReactNode | - | The headline. One line beats two — it is set at 7xl on desktop. |
| description | React.ReactNode | - | Subhead under the headline. |
| primaryAction | { label: string; href: string } | - | Rendered as the holo button. This is the page's one holo element. |
| secondaryAction | { label: string; href: string } | - | Rendered as an outline button next to the primary one. |
| terminal | TerminalLine[] | - | Transcript for the right column. Omit it and the hero goes single-column. |
| aside | React.ReactNode | - | Replaces the terminal: a screenshot, an illustration, a live demo. |
| proof | React.ReactNode | - | Slot under the actions for stats, logos or an avatar row. |
Rules
What keeps this section from turning into noise.
- The primary action is the holo. Nothing else in the first viewport gets it.
- The terminal is one idle animation. Adding a second loop beside it breaks the budget for the whole page.
- Actions are plain anchors so the block stays framework-agnostic. Swap them for your router's Link once it is in your project.