# Hero Section (Moonarc)

A complete hero as one component with props: an ambient aurora, a headline split and revealed word by word, supporting copy with a rotating word, two actions and a typed command. The parts arrive in a fixed order and timing.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-section` (license key required)
- Tier B · category section · trigger load
- Readout: `<HeroSection headline="…" rotate={[…]}>`
- Browser support: widely (every browser)
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 18.6 kB raw)
- Page: https://moonarc.dev/components/hero-section/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `level` | `1 | 2` | `1` | Heading level of the headline: 1 on a page's own hero, 2 under another h1 (a demo, or a block further down). |
| `headline` | `string` | none | Headline, split on the server. |
| `eyebrow` | `string` | none | Small label above the headline. |
| `copy` | `string` | none | Supporting copy. |
| `rotate` | `string[]` | none | Words rotated at the end of the copy. |
| `primary` | `{ href, label }` | none | Primary action. |
| `secondary` | `{ href, label }` | none | Secondary action. |
| `command` | `string` | none | A command typed under the actions. |
| `aurora` | `number` | `0.4` | Aurora strength; 0 removes it. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'start'` | Text alignment. |

## Usage

```astro
---
import HeroSection from '@/components/moonarc/pro/HeroSection.astro';
---
<HeroSection
  eyebrow="Astro 5 · 6 · 7"
  headline="A complete hero in one component"
  copy="Ship"
  rotate={['faster', 'lighter', 'calmer']}
  primary={{ href: '/setup/', label: 'Set up' }}
  command="npx astro add moonarc"
/>
```

## Reduced motion

Inherits every part: fades without travel, static aurora, full text at once.

## With ClientRouter

Inherits every part; nothing to wire.

## Craft

- Headline first, copy at 400 ms, actions at 550 ms: three beats, never more, in a hero.
- Split step 45 ms so a ten-word headline finishes inside half a second.
- The aurora sits behind a positioned inner container so it never captures clicks or affects layout.

## Replaces

- Hero blocks (Tailwind Plus, shadcnblocks)
- Aceternity hero sections

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/hero-section` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: aurora, reveal, split-text, rotating-text, typewriter.