--- title: Radial Clock canonical: "https://presque.cool/projects/radial-clock/" description: "Une horloge radiale qui visualise le temps en anneaux concentriques — des secondes à l'année, du centre vers l'extérieur." ---
## Le pitch Radial Clock est une horloge qui représente le temps sous forme d'anneaux concentriques. Sept arcs progressent simultanément : secondes, minutes, heures, jour de la semaine, semaine, mois, année. Les cycles rapides au centre, les cycles lents à l'extérieur — ou l'inverse, selon vos préférences. **Essayer** : [presque.cool/radial-clock/](https://presque.cool/radial-clock/)
Durée ~1-2 jours/version
Période Jan 2016 → aujourd'hui
Stack
Preact TypeScript Canvas 2D PWA
Statut ✓ En production
--- ## Pourquoi ce projet Au début des années 2000, j'utilisais un économiseur d'écran appelé **Polar Clock**. Des anneaux concentriques qui se remplissaient au rythme du temps. Simple. Hypnotique. Je ne l'ai jamais oublié. En 2016, j'ai voulu recréer cette fascination pour le temps visualisé. Pas une horloge à aiguilles, pas des chiffres qui défilent — quelque chose de plus organique, où l'on _voit_ les cycles s'imbriquer les uns dans les autres. --- ## Ce qui le rend unique **Le temps comme système d'anneaux imbriqués.** Sept cercles tournent à des vitesses différentes : - **Secondes** — le cycle le plus rapide, au centre - **Minutes** → **Heures** → **Jour de la semaine** - **Semaine** → **Mois** → **Année** — le plus lent, à l'extérieur Chaque anneau progresse de façon fluide (pas de "tick" discret). Les couleurs changent avec la progression — optionnellement. On peut inverser l'ordre des anneaux, afficher ou masquer les labels, choisir son thème. L'interface est volontairement épurée. L'horloge occupe tout l'écran. Le temps est au centre. --- ## Un terrain de jeu technique Ce projet a été mon **laboratoire d'expérimentation** pendant 10 ans. Chaque version majeure correspondait à une envie d'appliquer ou tester quelque chose de nouveau : - **v1 (2016)** : Vanilla JS, premiers pas avec Canvas 2D et requestAnimationFrame - **v2 (2020)** : Amélioration responsive, adaptation mobile - **v3 (2025)** : Ajout des options (thèmes, langue, couleurs dynamiques, sens des anneaux) - **v4 (2026)** : Refonte complète en Preact/TypeScript **Le défi principal** : calculer la progression de chaque anneau de façon fluide. Les secondes sont simples (`seconds + milliseconds/1000`), mais la semaine de l'année ou la progression de l'année demandent plus de réflexion pour éviter les sauts visuels. --- ## Stack technique --- ## Évolutions | Date | Version | Description | | ---------- | ------- | --------------------------------------------------------------- | | Jan 2016 | 1.0 | Version initiale — Vanilla JS, Canvas 2D, 7 anneaux | | Avril 2020 | 2.0 | Amélioration responsive design | | Juil 2025 | 3.0 | Options — Thèmes, langue, couleurs dynamiques, sens des anneaux | | Jan 2026 | 4.0 | Refonte Preact — TypeScript, Zustand, PWA, tooltips interactifs | --- ## Bilan **Durée** : environ 1-2 jours par version, sur 10 ans. **Ce que j'ai appris** : - Canvas 2D et l'animation fluide à 60fps - La valeur d'un projet "terrain de jeu" — pas de pression, juste un espace pour expérimenter **Ce que je referais pareil** : - Garder un projet simple sur le long terme comme laboratoire technique **Ce que je changerais** : - Explorer la possibilité d'en faire un vrai économiseur d'écran natif (Electron ?)
## The pitch Radial Clock is a clock that represents time as concentric rings. Seven arcs progress simultaneously: seconds, minutes, hours, day of week, week, month, year. Fast cycles in the center, slow cycles on the outside — or reversed, as you prefer. **Try it**: [presque.cool/radial-clock/](https://presque.cool/radial-clock/)
Duration ~1-2 days/version
Period Jan 2016 → today
Stack
Preact TypeScript Canvas 2D PWA
Status ✓ In production
--- ## Why This Project In the early 2000s, I used a screensaver called **Polar Clock**. Concentric rings filling up with time. Simple. Hypnotic. I never forgot it. In 2016, I wanted to recreate that fascination with visualized time. Not a clock with hands, not scrolling digits — something more organic, where you _see_ cycles nesting within each other. --- ## What Makes It Unique **Time as a system of nested rings.** Seven circles rotate at different speeds: - **Seconds** — the fastest cycle, at the center - **Minutes** → **Hours** → **Day of week** - **Week** → **Month** → **Year** — the slowest, on the outside Each ring progresses smoothly (no discrete "tick"). Colors change with progress — optionally. You can reverse the ring order, show or hide labels, choose your theme. The interface is intentionally minimal. The clock fills the screen. Time is at the center. --- ## A Technical Playground This project has been my **experimentation lab** for 10 years. Each major version corresponded to something new I wanted to try: - **v1 (2016)**: Vanilla JS, first steps with Canvas 2D and requestAnimationFrame - **v2 (2020)**: Responsive improvements, mobile adaptation - **v3 (2025)**: Options added (themes, language, dynamic colors, ring direction) - **v4 (2026)**: Complete Preact/TypeScript rewrite **The main challenge**: calculating each ring's progress smoothly. Seconds are simple (`seconds + milliseconds/1000`), but week of year or year progress require more thought to avoid visual jumps. --- ## Tech Stack --- ## Evolution | Date | Version | Description | | --------- | ------- | --------------------------------------------------------------- | | Jan 2016 | 1.0 | Initial version — Vanilla JS, Canvas 2D, 7 rings | | Apr 2020 | 2.0 | Responsive design improvements | | July 2025 | 3.0 | Options — Themes, language, dynamic colors, ring direction | | Jan 2026 | 4.0 | Preact rewrite — TypeScript, Zustand, PWA, interactive tooltips | --- ## Retrospective **Duration**: about 1-2 days per version, over 10 years. **What I learned**: - Canvas 2D and smooth 60fps animation - The value of a "playground" project — no pressure, just space to experiment **What I'd do the same**: - Keep a simple long-term project as a technical lab **What I'd change**: - Explore making it a real native screensaver (Electron?)