# Field Hero (Moonarc)

A hero with a field of glyphs behind a panel in the brand colour (ink on a page without a theme) whose meta line, headline and actions wipe in one after another. The field is CSS counters on server-drawn noise, with two crossing waves and a cursor trail that decays one character at a time. Zero JavaScript of its own; swish inlines one measured listener.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-field` (license key required)
- Tier B · category section · trigger load, pointer
- Readout: `<HeroField headline="…" command="npx …">`
- Browser support: newly (Chrome 125 · Firefox 128 · Safari 17); elsewhere: the field shows its server-drawn contours without waves; the panel still wipes in
- Measured cost: 0 B JS (CSS 16.6 kB raw)
- Page: https://moonarc.dev/components/hero-field/

## 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. |
| `meta` | `string[]` | none | Short tokens 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. |
| `available` | `string[]` | none | Short tokens under the command, as chips: platforms, versions. |
| `availableLabel` | `string` | `'Available for'` | The words before the available chips. |
| `hue` | `number` | `68` | Base hue of the field in oklch degrees; the sunset arc turns from there. |
| `swish` | `boolean` | `false` | Two-dimensional cursor swish with a tail; inlines GlyphField's one listener, measured. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `'brand'` | 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'` | Panel padding ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'start'` | Text alignment inside the panel. |

## Usage

```astro
---
import HeroField from '@/components/moonarc/pro/HeroField.astro';
---
<HeroField
  meta={['Open source / MIT', '0.2.0']}
  headline="Motion components for Astro that survive every navigation and ship no runtime."
  copy="What most of them cost:"
  rotate={['0 B', 'nothing', 'zero']}
  primary={{ href: '/setup/', label: 'Set up in five minutes' }}
  command="npx astro add moonarc"
  available={['Astro 5', 'Astro 6', 'Astro 7', 'static', 'server']}
  swish
/>
```

## Reduced motion

No wipes, no waves, no bloom; cells still light under the cursor, without a tail.

## With ClientRouter

CSS-only; nothing to rebind.

## Craft

- Three wipes 120 ms apart on the gentle spring (meta, headline, actions) lead the eye from top to bottom.
- The panel is a solid ground over the field so the field reads as environment and the text as object; the field's focus sits right of the panel so the brightest glyphs are never under the text.
- The inner container passes pointer events through to the field; only the panel catches them.

## Replaces

- Canvas ASCII hero (motion.dev)
- hero sections with WebGL fields

## Source

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