Countdown Timer

Numbers that accurately count down to zero, building anticipation or imposing a limit.

Use

Event ticket reservations

Avoid

Processes where the exact completion time cannot be calculated

Safer Alternative

No safer default listed.

Risk Level

Low risk

Live Demo

Launching In

00Min

10Sec

What It Is

Numbers that accurately count down to zero, building anticipation or imposing a limit.

✓When to Use

Event ticket reservations
Product launch pages
Action undo windows (e.g., "Undo in 5s")

✕When NOT to Use

Processes where the exact completion time cannot be calculated

Configuration Tips

01Use monospaced numbers (tabular-nums) so the layout doesn't jump every second

You've Seen It In

TicketmasterGmail Undo Send

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Add a 10 second countdown timer.

Reference Implementation

The same implementation approach used by the live preview, kept compact enough to inspect and adapt.

"use client";
import { useState, useEffect } from 'react';

export function CountdownTimerDemo({ isPlaying = false }: { isPlaying?: boolean }) {
    const [timeLeft, setTimeLeft] = useState(10); "text-stone-400 italic">// 10 seconds

    useEffect(() => {
        if (!isPlaying) {
            setTimeLeft(10);
            return;
        }

        setTimeLeft(10);

        const interval = setInterval(() => {
            setTimeLeft((prev) => {
                if (prev <= 1) {
                    clearInterval(interval);
                    "text-stone-400 italic">// Reset after a delay to loop the demo
                    setTimeout(() => setTimeLeft(10), 2000);
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);

        return () => clearInterval(interval);
    }, [isPlaying]);

    return (
        <div className="flex h-64 w-full items-center justify-center overflow-hidden rounded-2xl bg-white p-4 shadow-sm ring-1 ring-stone-200">
            <div className="flex flex-col items-center justify-center bg-stone-900 rounded-2xl p-8 shadow-2xl min-w-[220px]">
                <p className="text-stone-400 text-[10px] mb-3 uppercase tracking-[0.2em] font-bold">Launching In</p>
                <div className="flex items-center gap-2">
                    <div className="flex flex-col items-center">
                        <span className="text-4xl font-mono tabular-nums text-white font-medium tracking-tight">00</span>
                        <span className="text-[9px] text-stone-500 uppercase font-semibold mt-1">Min</span>
                    </div>
                    <span className="text-stone-600 text-3xl pb-4">:</span>
                    <div className="flex flex-col items-center">
                        {"text-stone-400 italic">/* Use AnimatePresence or just a strict layout to avoid jumping. Tabular-nums handles it usually. */}
                        <span className="text-4xl font-mono tabular-nums text-white font-medium tracking-tight">
                            {timeLeft.toString().padStart(2, '0')}
                        </span>
                        <span className="text-[9px] text-stone-500 uppercase font-semibold mt-1">Sec</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

Related Effects

Number Ticker / Counting Animation

Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.