# Terminal Hero (Moonarc)

A hero for developer tools: split headline on the left, a terminal window on the right that types the install command and prints its output line by line, on a pulsing dot field. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-terminal` (license key required)
- Tier B · category section · trigger load
- Readout: `<HeroTerminal command="npx …" output={[…]}>`
- Browser support: limited (Chrome 116 · not Firefox · Safari 18); elsewhere: the command still types and the output lines still print one by one, each held at no height by the font-size in the same keyframes until its turn (Firefox)
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 14.8 kB raw)
- Page: https://moonarc.dev/components/hero-terminal/

## 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 by word. |
| `command` | `string` | none | The command typed into the terminal. |
| `output` | `string[]` | none | Lines printed after the command finishes, 260 ms apart. |
| `eyebrow` | `string` | none | Small label above the headline. |
| `copy` | `string` | none | Supporting copy. |
| `primary` | `{ href, label }` | none | Primary action. |
| `secondary` | `{ href, label }` | none | Secondary action. |
| `title` | `string` | `'terminal'` | Window title, and the accessible name of the window (a figure); screen readers then read the command and its output as text. |
| `media` | `'right' | 'left' | 'none'` | `'right'` | Side of the terminal; none drops it (or slot media to replace 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; center reads best with media="none". |

## Usage

```astro
---
import HeroTerminal from '@/components/moonarc/pro/HeroTerminal.astro';
---
<HeroTerminal
  eyebrow="CLI"
  headline="Install with one command"
  copy="One command sets up the project and its dependencies."
  command="npx create-acme@latest"
  output={['✔ Project created', '✔ Dependencies installed', '✔ Ready in 4 s']}
  primary={{ href: '/setup/', label: 'Set up' }}
/>
```

## Reduced motion

Headline and copy fade; the command and its output are shown at once; the dots hold still.

## With ClientRouter

Inherits every part; nothing to wire.

## Craft

- Output lines start after the command has been typed (length × 45 ms + 600), computed on the server, so no script watches the typewriter.
- 260 ms between output lines: the cadence of a real install log, fast enough to finish before the reader looks away.
- The window enters from below at 200 ms, before the copy, because it is the subject.

## Replaces

- Hero with code (Tailwind Plus)
- Terminal (Magic UI)

## Source

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