# Editorial Hero (Moonarc)

A split hero: a tall headline revealed line by line on the left, a live panel sliding in from the right, on a slowly drifting grid. Copy and actions follow in two beats; the primary action is magnetic. Everything inside is free-tier; the composition is what is sold.

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

## 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; \n breaks lines, each revealed in turn. |
| `eyebrow` | `string` | none | Small label above the headline. |
| `copy` | `string` | none | Supporting copy. |
| `primary` | `{ href, label }` | none | Primary action, magnetic. |
| `secondary` | `{ href, label }` | none | Secondary action. |
| `image` | `{ src, alt }` | none | Panel image; or slot anything into the panel. |
| `media` | `'right' | 'left' | 'none'` | `'right'` | Side of the panel; none drops it and the text takes the width. |
| `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; center reads best with media="none". |

## Usage

```astro
---
import HeroEditorial from '@/components/moonarc/pro/HeroEditorial.astro';
---
<HeroEditorial
  eyebrow="Now in beta"
  headline={"Field notes for small studios,\nwritten every week."}
  copy="Short essays on pricing, hiring and the work itself."
  primary={{ href: '/subscribe/', label: 'Subscribe' }}
  secondary={{ href: '/archive/', label: 'The archive' }}
  image={{ src: '/hero.png', alt: 'A desk with a notebook' }}
/>
```

## Reduced motion

Inherits every part: lines fade without travel, the panel fades in place, the grid holds still, the magnet is off.

## With ClientRouter

Inherits every part; nothing to wire.

## Craft

- Lines at 110 ms: slower than words (40 ms) because a line is a thought, and the reader should finish one before the next arrives.
- The panel enters from its own side at 250 ms, after the first line and before the copy, so the two columns read as one composition.
- Only the primary action is magnetic, so at most one thing on the page pulls at the cursor.

## Replaces

- Hero blocks with image (Tailwind Plus)
- Aceternity hero sections

## Source

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