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.
What most of them cost: 0 B, nothing, zero
npx astro add moonarc
Available forAstro 5Astro 6Astro 7staticserver
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
JavaScript of its own
0 B
CSS 16.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Chrome 125 · Firefox 128 · Safari 17; needs property, css-math, counter-style, has. Elsewhere: the field shows its server-drawn contours without waves; the panel still wipes in.
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:
npx shadcn@latest add @moonarc-pro/hero-field---
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
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: glyph-field, rotating-text, typewriter.
| 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. |
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.
.ma-hero-field.ma-hero-field__actions.ma-hero-field__aside.ma-hero-field__available.ma-hero-field__chip.ma-hero-field__command.ma-hero-field__copy.ma-hero-field__headline.ma-hero-field__inner.ma-hero-field__media.ma-hero-field__meta.ma-hero-field__panel.ma-hero-field__primary.ma-hero-field__secondary.ma-hero-field__wipe
slot="eyebrow"slot="headline"slot="copy"slot="actions"slot="aside"slot="media"
No wipes, no waves, no bloom; cells still light under the cursor, without a tail.
ClientRouterCSS-only; nothing to rebind.
Replaces: Canvas ASCII hero (motion.dev) · hero sections with WebGL fields. See the migration table.
A field of braille dots that reads as a flowing contour map: two waves cross it, the colour turns along a sunset arc, and the cursor carves a trail that decays one dot at a time.
Cycles through a list of words in place.
Types a string one character at a time in any font, with a caret that stays solid while typing and blinks once idle.
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown