A web app that displays the current time using a grid of miniature analog clocks. Each clock's two hands rotate to collectively form digital‑style digits — inspired by the A Million Times kinetic art installation by Humans Since 1982.
No build step, no dependencies. Just open the file:
open index.html
Or serve it locally:
python3 -m http.server 8000
- Fat seven‑segment digits — 6×9 bitmask‑based digit patterns with 2‑cell‑wide segments
- Algorithmic hand angles — computed automatically from neighbor connectivity
- Two layout modes — full‑width matrix grid or separate per‑digit groups
- Realistic off‑cells — hands overlap at 12 o'clock (same color as active cells, no fading)
- Smooth transitions — shortest path, long rotation, overshoot, scenic, and randomized modes
- Configurable hand styles — wedge, rounded, or thin
- Clock face options — ring border, colored tick marks (black/red/blue)
- Dark and light themes — plus auto mode that switches at sunset/sunrise
- Demo mode — scripted sequences or speed‑clock cycling through times
- Settings drawer — all options accessible from a collapsible bottom panel
- Persistent settings — saved to localStorage with version tracking
index.html — Single‑page markup (canvas + drawer)
style.css — Responsive layout, drawer UI, theming
app.js — All application logic (~860 lines)
Each digit is defined as a 6×9 bitmask where 1 = clock is part of the digit, 0 = background. Hand angles are computed by examining each active cell's neighbors:
| Neighbors | Behavior |
|---|---|
| 0–1 | Both hands point toward the single neighbor (dead end) |
| 2 | One hand toward each neighbor (corner or straight line) |
| 3 | Through‑line wins — uses the opposite pair (up/down or left/right) |
| 4 | Horizontal rows show left/right, vertical areas show up/down |
Background clocks stack both hands at the same angle (like 12:00), making them appear as a single subtle line while using identical color and weight as active clocks.
All settings are adjustable via the bottom drawer and persisted in localStorage.
| Category | Options |
|---|---|
| Time | 12h/24h, seconds, colon |
| Layout | Matrix / Per Digit, density slider |
| Style | Hand style, face ring, tick marks + color, theme |
| Background | Off‑cell mode, drift animation |
| Animation | Duration, easing, transition mode |
| Demo | Enable, speed/scripted/both |
MIT