Digit Countdown Banner Block for React

The first moment of next month in the visitor's own time zone, worked out in the browser: monthEnd() at the top of the file. The server can't know the time, so until the page is running the digits are hidden and the space is reserved, so nothing shifts when they appear. When the countdown reaches zero it moves to the end of the next month by itself. For a fixed deadline, return your own Date from monthEnd() and the hairline's start from leftOf().

Its width is the share of the month still ahead, from the first of the month to the end. It starts full, drops to the real share once the page knows the time, and is updated every thirty seconds (DRAIN_EVERY_MS) with a CSS width transition; that's slow because a month has forty thousand minutes, so the line shifts by a pixel only every few hours. It is decoration and hidden from screen readers; the countdown carries the information.

The visible digits are hidden from assistive technology, and a visually hidden sentence in full words ("19 days, 7 hours, 50 minutes, 17 seconds") takes their place inside a time element. It is not a live region, so a screen reader doesn't read every second out; it reads the current time when the reader reaches it.

Yes: Countdown Text takes a format (narrow is the default, "19d 07h 50m 17s"; short and long use words; digital writes 19:07:50:17) and a locale, which also sets the digits and unit names. Days and hours drop out when they reach zero, so the last hour reads 59m 59s.

Claim early price is a real link (href="#"): point it at your offer or checkout. It is a ShineButton with render set to an a element and nativeButton={false}.

Only a digit that changes moves: it drops into its one-digit window as the old one falls away. With reduced motion the digits change in place and the hairline jumps to its new length. On a narrow screen the band stacks: the copy, then a rule, then the countdown and the button.