Centered Countdown Timer Hero Block for React

Change untilLaunch at the top of the file: it returns the milliseconds left until midnight on the 1st of next month, in the visitor's time zone, so the demo never counts down to a day that's already gone. For a fixed launch, return remainingMsUntilDate(new Date("2027-03-01T17:00:00Z")); the Z makes it the same instant everywhere. Change the badge's "Launching on the 1st" and the headline to match. Once that moment has passed, remainingMsUntilDate returns 0 and there's nothing left to count (a countdown has to start above zero), so render your launched state in place of the Timer from then on.

The server can't know the visitor's clock, so the countdown starts once the page runs in the browser: the band and its labels render on the server, and the digits fade in as soon as the time is known. That way the page never shows a made-up time first or a mismatch between server and browser. When the countdown reaches zero with the page open, it starts again towards the next 1st.

The form's request is a stand-in: an effect waits REQUEST_MS while the button shows Joining…, then sets status to "done". Replace that effect with a call to your list provider from submit (new FormData(event.currentTarget).get("email") gives the address), set "done" when it answers, and set "idle" again on an error so the visitor can retry. The browser checks the address before submit runs, because the input is type="email" and required.

The Shine Button swaps its label for a spinner and "Joining…", then for a check and "Subscribed", and stays there. The button keeps focus the whole time (it isn't disabled), a second press does nothing, the input turns read-only so the address can't change mid-request, and the line under the form cross-fades from "Join 3,200+ developers on the waitlist" to "You're on the list". Both lines share one grid cell, so the swap never moves the page.

The cells are a timer, named with the time left ("12 days 08:34:56"), which screen readers read when they reach it but don't announce every second. The form is named by an sr-only heading, and its input by an sr-only "Email address" label. A status line says "Joining the waitlist…" and then "You're on the waitlist", and the line it replaces is hidden from screen readers while it's invisible. With reduced motion on, the digits and the entrance don't animate.

The four cells keep one row down to 320 px: the digits drop from text-6xl to text-4xl and the unit names to 12px, and the hairlines stay. The input and the button stack below the sm breakpoint, the button taking the full width, so the button ends on the first screen.