ASCII countdown

Installation

Usage

Copyimport { AsciiCountdown } from "@/components/asciicn/ascii-countdown";
 
export function Launch() {
  return (
    <AsciiCountdown
      to="2026-12-01T17:00:00Z"
      onComplete={() => console.log("launched")}
    />
  );
}

to takes a Date, an ISO string or epoch milliseconds. The clock shows days, hours, minutes and seconds, each digit drawn from a 5x7 pixel font. At zero it draws doneText in the same type and calls onComplete once.

The countdown fills its container's width. It picks the largest digit that fits, up to size pixels tall, by changing how many cells each font pixel covers. When one row would make the digits smaller than 40 px, as on a phone, it splits into two rows: days and hours, then minutes and seconds.

When a digit changes, only the cells that differ run through a few glyphs and settle, each at its own moment. scramble sets how long that takes. The colons dim and brighten once a second, in step with the seconds.

Examples

Banner

size={22} and 6 px cells keep the digits small enough for a strip at the top of a page. Labels and ghost pixels are off, and only the colons take the accent.

Done state

Five seconds out, with hideZeroDays. At zero the last digits scramble into doneText and onComplete changes the button.

Braille dot matrix

charset="braille" draws each font pixel as a patch of dots. colorMode="duotone" shades each digit from the top of the sodium ramp down. Duotone ramps are tuned for dark paper.

Props

Other props pass through to the root div.

Notes

• Changed digits scramble for a beat and settle, the colons blink softly, each group has a label under it, and at zero it shows doneText and calls onComplete.
• The digits are drawn on a canvas that is aria-hidden. A visually hidden role="timer" element gives the time left to the minute and the target date, so a screen reader is not told every second.
• Nothing that depends on the clock renders on the server. The first client render matches the server, then the countdown starts, so there is no hydration mismatch.
• With reduced motion, or animate={false}, digits change without scrambling and the colons hold steady. The time still updates every second.
• The canvas pauses offscreen and in hidden tabs. When it comes back, the digits that changed while it was away scramble once.
• Labels are page text under the canvas, so they stay readable at any cell size. They take --ascii-ink at reduced opacity and are hidden from screen readers, which get the timer text instead.