# Hero Blocks (Moonarc)

The opening of a colour-block site: the headline rises line by line out of its masks, its last word turns through a few in the emphasis face (RotatingText), a round badge with text running around it links further down the page, the lede and two pill actions sit under it, and a strip of tiles in the palette's blocks runs across the bottom (Marquee), each a drawing (Motif) or a picture with a caption. The rise is a CSS animation on load, so it needs no script. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-blocks` (license key required)
- Tier B · category section · trigger load, hover
- Readout: `<HeroBlocks lines={[…]} words={[…]} tiles={[…]} />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16)
- Measured cost: 0 B JS (CSS 26.8 kB raw)
- Page: https://moonarc.dev/components/hero-blocks/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | none | The headline, one string per line; each line rises from its own mask, a stagger step after the one before. |
| `words` | `string[]` | none | Words that take turns as the headline's last line, in the emphasis face and colour (--ma-font-em, --ma-em). The first is the one read aloud. |
| `cycles` | `number` | `3` | Rounds the words turn before the first comes back and stays (WCAG 2.2.2). |
| `eyebrow` | `string` | none | A short line above the headline. Slot "eyebrow" wins; slot "meta" sits at the other end of the same row (a clock, an opening time). |
| `lede` | `string` | none | The paragraph under the headline. Slot "lede" wins. |
| `primary` | `{ href: string; label: string }` | none | The first action: a pill in the action colour; on hover the first colour block wells up from below its label. |
| `secondary` | `{ href: string; label: string }` | none | The second action: an outlined pill that fills with the text colour on hover. Slot "actions" replaces both. |
| `magnetic` | `boolean` | `true` | The primary action follows the pointer a little (Magnetic). |
| `badge` | `{ href: string; label: string; text: string }` | none | The round badge beside the headline from a 64rem box: where it links, its accessible name, and the text on its ring (CircularText, one turn in 24 s). End the text with a separator so the ring closes. |
| `tiles` | `{ label?, motif?, block?, shape?, image? }[]` | none | The strip under the hero. Each tile paints a colour block (the five in turn when unset) with a drawing, or shows a picture; shape is tall (9 : 16), portrait (4 : 5, default) or square. The strip is decoration and is hidden from assistive technology. |
| `duration` | `number` | `60` | Seconds the strip takes for one pass. |
| `level` | `1 | 2` | `1` | Heading level: 1 when the hero opens its page, 2 when it is shown under another h1. |
| `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; the actions invert on ink and brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import HeroBlocks from '@/components/moonarc/pro/HeroBlocks.astro';
---
<HeroBlocks
  eyebrow="Creative agency"
  lines={['A feed that lives', 'up to the']}
  words={['real thing.', 'dining room.', 'villa.']}
  lede="We plan, shoot, design and post for restaurants, stays and lifestyle brands, and run the ads too."
  primary={{ href: '/contact/', label: 'Start a project' }}
  secondary={{ href: '/work/', label: 'See the work' }}
  badge={{ href: '#work', label: 'See the work', text: 'CREATIVE AGENCY • SINCE 2023 • ' }}
  tiles={[
    { label: 'Reel', motif: 'wave', shape: 'tall' },
    { label: 'Menu design', motif: 'plate' },
    { label: 'Live', motif: 'phone', shape: 'tall' },
  ]}
/>
```

## Reduced motion

Everything is in place from the start: no rise, the first word stays, the strip and the badge stand still.

## With ClientRouter

CSS animations and the primitives' own bindings; nothing of its own to rebind. Each visit plays the rise again.

## Craft

- Each line rises out of a mask a stagger step and a half after the one before, so the headline reads top to bottom instead of landing at once.
- The turning word is a line of its own, in the emphasis face 1.1 times larger: it is the word that changes, so it is the one set apart.
- The headline is read once, whole, with its first word; the moving copy is hidden from a screen reader, which would otherwise hear every word in turn.
- The hover fill on the actions is a circle that grows from below the pill: a colour that wells up reads as pressed, a flat swap reads as a glitch.
- The tiles keep one height and their own proportions, so a story, a post and a square sit in one strip the way they sit in a feed.

## Replaces

- Agency hero sections (Framer templates)

## Source

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