# Hero Specimen (Moonarc)

The first screen of a maker's site: the heading, a line, two actions and three facts on one side; on the other, the products themselves, each drawn on its plate (ProductArt) with its name, a spec line in the mono face and its price. The plates take turns: one product rises in as the last fades, and the plate's colour changes with it. Small plates under them pick one (radio buttons, so the arrow keys move along them), which stops the turning; a Pause switch, a pointer or the focus on the plates stop it too. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-specimen` (license key required)
- Tier B · category section · trigger load, click
- Readout: `<HeroSpecimen items={[{ name, art, spec, price }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: the plates turn and the pause switch works; picking a small plate does not hold one
- Measured cost: 0 B JS (CSS 22.6 kB raw)
- Page: https://moonarc.dev/components/hero-specimen/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `{ name, art: { name, colour?, accent?, block? }, spec?, price? }[]` | none | Two to five products. art.name is a ProductArt drawing; colour and accent any CSS colour (var(--ma-block-2) follows the palette); block the plate's colour block (the first four in turn when unset). |
| `eyebrow` | `string` | none | A short line above the heading, after a dot. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `lede` | `string` | none | A line under the heading. |
| `primary` | `{ href: string; label: string }` | none | The main action. |
| `secondary` | `{ href: string; label: string }` | none | The second action, outlined. |
| `facts` | `{ label: string; value: string }[]` | none | Up to three short facts under the actions: a label in the mono face and its value. |
| `step` | `number` | `4.5` | Seconds each product stands before the next. |
| `listLabel` | `string` | `'Featured pieces'` | Accessible name of the list of products. |
| `pickLabel` | `string` | `'Show a piece'` | Accessible name of the row of small plates. |
| `pauseLabel` | `string` | `'Pause'` | The pause switch's words. |
| `priceLabel` | `string` | `'Price'` | The words a screen reader hears before each price. |
| `level` | `1 | 2` | `1` | Heading level: 1 as the page's hero, 2 under another h1. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the plates keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import HeroSpecimen from '@/components/moonarc/pro/HeroSpecimen.astro';
---
<HeroSpecimen
  eyebrow="Firing 08 is on the shelf"
  lede="Cups, bowls and vases thrown by hand and fired a few dozen at a time."
  primary={{ href: '/pieces/', label: 'See the pieces' }}
  secondary={{ href: '/studio/', label: 'How we make them' }}
  facts={[{ label: 'Fired', value: 'Every six weeks' }, { label: 'Batch', value: 'About 120 pieces' }]}
  items={[
    { name: 'Tall vase', art: { name: 'vase', colour: 'var(--ma-block-2)', block: 1 }, spec: '32 cm · Stoneware', price: '$86' },
    { name: 'Morning cup', art: { name: 'cup', colour: 'var(--ma-block-1)', block: 2 }, spec: '300 ml', price: '$24' },
    { name: 'Breakfast bowl', art: { name: 'bowl', colour: 'var(--ma-block-2)', block: 3 }, spec: '16 cm', price: '$32' },
  ]}
>
  <span slot="headline">Clay for the table, <em>thrown slowly</em></span>
</HeroSpecimen>
```

## Reduced motion

The plates stand still on the first product and the pause switch is not shown; the small plates still pick one.

## With ClientRouter

CSS only; nothing to rebind. Each swap starts the turning from the first product.

## Craft

- Every product is in the page as a list, so a screen reader hears them all; the turning is only what the eye sees.
- The plates cross-fade over the last tenth of each step while the next product rises into place, so the colour of the plate changes with the product instead of cutting.
- Two to five products each get their own keyframes, so a product stands for one step whatever the count.
- A pointer resting on the plates, the focus inside them or the pause switch hold the turning: WCAG 2.2.2 asks for a way to stop anything that moves on its own for longer than five seconds.
- The small plates are radio buttons in a fieldset: the arrow keys move along them, and the checked one is ringed.

## Replaces

- Shop hero sliders (Shopify themes)
- Product carousels

## Source

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