# Hero Poster (Moonarc)

The first screen of an event, made like its poster: one colour block with the edition and the place in the mono face, the name huge, the dates, a line, two actions, three facts, a countdown to the doors (core CountdownFlip) and the days as chips, and beside them a composition of nine shapes in the block's drawing colours that pop into place one after another as the page opens and turn a quarter when a pointer rests on them, one of them turning round a quarter at a time once they are in, inside five seconds, then resting. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-poster` (license key required)
- Tier B · category section · trigger load, hover
- Readout: `<HeroPoster title dates countdown={{ to }} days={[…]} />`
- Browser support: widely (every browser)
- Measured cost: 0 B JS (CSS 15.9 kB raw)
- Page: https://moonarc.dev/components/hero-poster/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | none | The heading: the event's name. Slot "title" wins and may hold an <em>, set in the emphasis. |
| `dates` | `string` | none | The dates, large under the name. |
| `edition` | `string` | none | In the mono face above the name: the edition. |
| `place` | `string` | none | In the mono face beside the edition: the place. |
| `lede` | `string` | none | A line under the dates. |
| `primary` | `{ href: string; label: string }` | none | The main action, e.g. to the tickets. |
| `secondary` | `{ href: string; label: string }` | none | The second action, outlined. |
| `facts` | `{ label: string; value: string }[]` | none | Up to three short facts under the actions. |
| `countdown` | `{ to: string; label?: string; units?: Unit[]; labels?: Record<Unit, string>; done?: string }` | none | A countdown to the doors on a card of its own: the moment (an ISO date with its offset), its label, the words under the cards, and what it says once the doors are open. |
| `days` | `{ label: string; date: string; block?: 1 | 2 | 3 | 4 | 5 }[]` | none | The days as chips: a weekday in the mono face over its date, each in a colour block. |
| `block` | `1 | 2 | 3 | 4 | 5` | `2` | The colour block the poster paints. |
| `seed` | `string` | none | A word the composition is drawn from: the same word, the same shapes. Unset, the title. |
| `level` | `1 | 2` | `1` | Heading level: 1 as the page's hero, 2 under another h1. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import HeroPoster from '@/components/moonarc/pro/HeroPoster.astro';
---
<HeroPoster
  edition="Edition 07"
  place="Your city"
  dates="14–16 May 2027"
  lede="Three days of talks and workshops on design and the web."
  primary={{ href: '/tickets/', label: 'Get tickets' }}
  secondary={{ href: '/schedule/', label: 'See the schedule' }}
  countdown={{ to: '2027-05-14T09:30:00+02:00', label: 'Doors open in' }}
  days={[{ label: 'Fri', date: '14 May' }, { label: 'Sat', date: '15 May' }, { label: 'Sun', date: '16 May' }]}
>
  <span slot="title">Sitename <em>Conference</em></span>
</HeroPoster>
```

## Reduced motion

The shapes stand in place without popping in or turning; the countdown still counts.

## With ClientRouter

The countdown is CountdownFlip's, bound by the runtime once per swap; the rest is CSS.

## Craft

- The nine shapes and their colours are picked from a hash of the title, so a poster keeps its composition between builds and two events rarely share one.
- The name's size is scaled by --ma-display-scale, so a wide face and a condensed one both fill the poster without a word breaking.
- The countdown sits on the block's own card pair, so its flip cards read on whatever colour the palette gives the poster.
- The shapes are hidden from assistive technology; the poster's words carry everything.

## Replaces

- Event landing heroes (Framer templates)
- Countdown banners

## Source

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