Terminal Hero

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.

CLI

Install once. Measured forever.

One command adds the integration and every component.

Set up

$ npx astro add moonarcnpx astro add moonarc✔ Added integration✔ 102 components available✔ 0 B of runtime on this page

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 14.8 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Limited availability

Chrome 116 · not Firefox · Safari 18; needs display-animation. 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).

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/hero-terminal

src/pages/index.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' }}
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: dot-pattern, split-text, reveal, typewriter.

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".

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-hero-terminal.ma-hero-terminal__actions.ma-hero-terminal__bar.ma-hero-terminal__copy.ma-hero-terminal__eyebrow.ma-hero-terminal__headline.ma-hero-terminal__inner.ma-hero-terminal__line.ma-hero-terminal__media.ma-hero-terminal__primary.ma-hero-terminal__prompt.ma-hero-terminal__screen.ma-hero-terminal__secondary.ma-hero-terminal__text.ma-hero-terminal__window

Slots

slot="eyebrow"slot="headline"slot="copy"slot="actions"slot="media"

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.

Why it is built this way

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). See the migration table.

Dot Pattern

Backgrounds

A field of dots behind content, faded toward the edges, with an optional slow pulse.

every browseralways

Scroll Reveal

Scroll

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

every browserscroll

Split Text

Text

Splits a string into words, characters or lines on the server and reveals them with a capped stagger when they scroll into view.

every browserscroll

Typewriter

Text

Types a string one character at a time in any font, with a caret that stays solid while typing and blinks once idle.

Chrome 116 · not Firefox · Safari 18load

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown