Event Countdown Banner Block for React

It counts a length of time, STARTS_IN_MS at the top of the file (2 days, 4 hours and 12 minutes), and starts when the browser has rendered the page. The server draws dashes in the cells, so the server's and the browser's first render agree and nothing goes stale in a cached page. For a real event, replace the constant with the date minus now, and work it out in the effect that starts the clock, never during render: Date.parse("…") - Date.now().

The sentence, not the digits. "Starts in 2 days 4 hours" is ordinary text that changes by the hour (by the minute on the last day), and the four cells are hidden from assistive technology because they repeat it. A ticking number would either stay silent or be read out every second. The one live part is a polite status line that speaks when the event goes live.

The sentence becomes "Live now. The keynote has started." with a green status dot, the status line announces "Vesperpath Live is on now.", the cells rest on zeros, and the button's label changes from Reserve a seat to Join the stream. It's the same link, so point both at the pages you need by changing the label and href together.

Reserve a seat is a link (href="#"): point it at your registration page. It's an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus. It renders the link it's given with render, with nativeButton={false}.

The strip fades up once when the page loads, and the digits change in place each second without animating. With reduced motion the entrance is off and the seconds cell is hidden, so the clock moves by the minute instead of changing every second.

The tile and the text come first, the four cells follow at full width, each taking a quarter, and the button sits under them at the start. At 320 pixels nothing scrolls sideways. The digits keep their order in a right-to-left layout, and the rest mirrors.