ONE count - Modern Countdown Timer

A sleek, ultra-modern, dark-themed countdown application with visual time-block representation using circles. Features auto-resume capability, local state persistence, and smooth animations.

Features

• Precise Countdown: DD:HH:MM:SS.CS format with centisecond precision (100 FPS updates)
• Visual Time Blocks: Scrollable circle grid showing burned, active, and unburned time blocks
• Smart Block Units: Auto-selects optimal time unit (seconds, minutes, hours, days) based on duration
• Auto-Resume: Countdown automatically resumes after page refresh
• Timezone Support: Auto-detection with manual override for 35+ timezones worldwide
• Dark Theme: Modern glassmorphism design with smooth animations
• Responsive: Works on desktop, tablet, and mobile devices
• LocalStorage Persistence: State saved automatically across sessions

Tech Stack

• Runtime: Bun
• Framework: React 19 + TypeScript
• Build Tool: Vite 6
• Styling: Tailwind CSS v4
• Animations: CSS animations + Tailwind transitions

Getting Started

Prerequisites

• Bun v1.0 or higher

Installation

# Install dependencies
bun install

Development

# Start development server (http://localhost:5173)
bun run dev

# Type checking
bun run type-check

# Build for production
bun run build

# Preview production build
bun run preview

Usage

1. Set Target Date: Select your target date and time using the date picker
2. Choose Timezone: Auto-detected, but can be changed from dropdown
3. Select Block Unit: Auto-selected based on duration, or manually override
4. Start Countdown: Click "START COUNTDOWN" button
5. Watch Progress: See the countdown, circle grid, and stats update in real-time
6. Auto-Resume: Refresh the page - countdown continues from where it left off
7. Reset: Click "Reset Countdown" to clear and start over

Smart Block Unit Algorithm

The app automatically selects the optimal time unit based on duration:

• < 10 minutes: Seconds (max 600 blocks)
• < 3 hours: Minutes (max 180 blocks)
• < 7 days: Hours (max 168 blocks)
• >= 7 days: Days

Design

• Dark Theme: Deep navy-black background (#0a0a0f)
• Glassmorphism: Semi-transparent surfaces with backdrop blur
• Color Palette:
  • Primary: #3d5afe (bright blue)
  • Active: #00e5ff (cyan glow)
  • Burned: #2a2a3e (muted purple-grey)
  • Unburned: #5a5a7e (mid-tone purple-grey)

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

This project was created using bun init in bun v1.3.5. Bun is a fast all-in-one JavaScript runtime.