Countdown Flip
DataA flip clock counting down to a date: days, hours, minutes, seconds, each a card whose top half folds down over the hinge when the number changes.
every browserload
Hero Poster
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.
Live demo
Sitename Conference
14–16 May 2027
Three days of talks and workshops on design and the web, in one hall by the river.
- Speakers
- 24
- Stages
- 3
- Seats
- 800
- Fri14 May
- Sat15 May
- Sun16 May
Doors open in
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
density
Measured
JavaScript of its own
0 B
CSS 15.9 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
every browser.
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:
npx shadcn@latest add @moonarc-pro/hero-poster---
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>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: countdown-flip.
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. |
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-cd.ma-poster.ma-poster__actions.ma-poster__art.ma-poster__btn.ma-poster__btn--primary.ma-poster__btn--secondary.ma-poster__cell.ma-poster__copy.ma-poster__count.ma-poster__count-label.ma-poster__dates.ma-poster__day.ma-poster__day-date.ma-poster__day-label.ma-poster__days.ma-poster__facts.ma-poster__lede.ma-poster__meta.ma-poster__panel.ma-poster__side.ma-poster__title
Slots
slot="title"
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.
Why it is built this way
- 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. See the migration table.
Related
Lineup Grid
ProWho is on: each person a drawn portrait on a colour block (PortraitArt, seeded from the name), the name and what they do, and on the back of the portrait their session: its title, the day and time, the stage.
newly · Chrome 105 · Firefox 121 · Safari 15.4hover
Schedule
Three days, one hall
Fri14 May
Doors and badges from 09:30
10:00–10:30
Opening
10:30–11:15
Letters that move
Type designer
12:15–13:30
Lunch
14:00–16:00
Drawing with code
Illustrator
Sat15 May
The party is in the garden from 19:00
10:00–10:45
Fast pages
Web engineer
13:30–15:30
Motion with manners
Motion designer
16:00–16:45
Everyone reads
Accessibility lead
Sun16 May
A shorter day, done by 16:00
10:30–11:15
Words on screens
Writer
11:30–13:00
Light for products
Photographer
15:15–16:00
Closing
A programme by day: a row of day chips (radio buttons, each a weekday over its date in a colour block) picks the day, and under it the day's sessions in order, with the time in the mono face, the title, who leads it, the stage as a chip in the stage's own colour and the kind of session beside it.
newly · Chrome 105 · Firefox 121 · Safari 15.4clickload
Ticket Tiers
ProThe tickets, as tickets: each tier a card with a perforated line under its head (a notch cut from each side), the name and the price, what it includes, how many are left (a count, and a bar that fills as the card comes into view) and its action.
Chrome 120 · not Firefox · Safari 26scrollhover
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown