Le pitch
dot365 transforme le temps en une grille de points. Chaque point représente une unité de temps — jour, semaine, heure, minute. Les points passés s’éteignent, le point courant pulse, les points restants attendent. Six échelles, une seule question : où en est-on ?
Essayer : presque.cool/dot365/
Pourquoi ce projet
Je voulais voir l’année. Un point par jour, ceux qui sont passés éteints, le présent qui pulse. L’abstraction la plus directe que j’aie trouvée pour représenter quelque chose qu’on ressent mais qu’on ne regarde jamais.
La représentation abstraite du temps
Un seul élément visuel, six échelles. dot365 utilise la même métaphore — un point par unité — pour six niveaux de temps :
- Année — 365 (ou 366) points pour les jours, ou 52 pour les semaines, ou 12 pour les mois
- Mois — les jours du mois courant
- Semaine — 7 points, lundi à dimanche
- Jour — 24 points pour les heures
- Heure — 60 points pour les minutes
- Minute — 60 points pour les secondes
Chaque point a trois états. Passé : gris, estompé — c’est fini. Courant : coloré, pulsant — c’est maintenant. Restant : bordure fine, transparent — c’est à venir.
Ce qui rend cette représentation efficace, c’est sa simplicité. 365 petits cercles sur un écran, c’est saisissant. On voit d’un coup d’œil combien de l’année est derrière soi. Le même mécanisme appliqué à l’heure (60 points-minutes) crée un sentiment d’urgence très différent.
Le système de thèmes
L’identité visuelle de dot365 repose sur l’espace colorimétrique OKLCH — un espace perceptuellement uniforme où les couleurs de même luminosité paraissent effectivement identiques à l’œil. Chaque couleur d’accent a deux variantes : une pour le mode clair, une pour le mode sombre, calibrées pour un contraste optimal dans chaque contexte.
10 couleurs d’accent au choix. Le thème (clair, sombre, système) est détecté automatiquement au chargement — avec un script inline dans le <head> qui empêche le flash blanc redouté.
Les couleurs sont injectées comme variables CSS au runtime, ce qui évite les re-renders React pour un simple changement de thème.
Stack technique
- React + TypeScript — Composants fonctionnels, typage strict
- Vite avec SWC — Build rapide, chunking manuel
- Tailwind CSS — OKLCH, dark mode natif
- Zustand — State management + persistance localStorage
- PWA — installable, offline, Workbox
- i18n maison — Français/anglais, clés type-safe via TypeScript
- Compression — Brotli + Gzip sur les assets
- CSP — Content-Security-Policy avec hashes auto-générés
Évolutions
| Date | Version | Description |
|---|---|---|
| Jan 2025 | 1.0 | Version initiale — Alpine.js, grille de points |
| Jan 2026 | 2.0 | Refonte React — TypeScript, Tailwind, Zustand, PWA, thèmes |
Bilan
Durée : quelques jours par version, sur un an.
Ce que j’ai appris :
- Que la représentation la plus simple est souvent la plus parlante — 365 points disent plus qu’un pourcentage
- L’espace OKLCH et la gestion des contrastes entre thèmes clair et sombre
Ce que je referais pareil :
- Partir d’une idée abstraite (visualiser le temps) et chercher la forme la plus épurée possible
- Le point pulsant pour marquer le présent — un petit détail qui donne vie à la grille
Ce que je changerais :
- J’ajouterais un générateur de wallpaper quotidien (mobile) qui exporte automatiquement la vue du jour, pour visualiser l’avancement dans l’année directement sur le fond d’écran.
The pitch
dot365 turns time into a dot grid. Each dot represents a time unit — day, week, hour, minute. Past dots fade out, the current dot pulses, remaining dots wait. Six scales, one question: where are we?
Try it: presque.cool/dot365/
Why this project
I wanted to see the year. One dot per day, the ones that have passed faded, the present one pulsing. The most direct abstraction I could find for something we feel but never actually look at.
The abstract representation of time
One visual element, six scales. dot365 uses the same metaphor — one dot per unit — across six time levels:
- Year — 365 (or 366) dots for days, or 52 for weeks, or 12 for months
- Month — the days of the current month
- Week — 7 dots, Monday to Sunday
- Day — 24 dots for hours
- Hour — 60 dots for minutes
- Minute — 60 dots for seconds
Each dot has three states. Past: gray, faded — it’s over. Current: colored, pulsing — it’s now. Remaining: thin border, transparent — it’s ahead.
What makes this representation work is its simplicity. 365 small circles on a screen is striking. You can see at a glance how much of the year is behind you. The same mechanism applied to the hour (60 minute-dots) creates a very different sense of urgency.
The theming system
dot365’s visual identity relies on the OKLCH color space — a perceptually uniform space where colors of equal lightness actually appear equal to the eye. Each accent color has two variants: one for light mode, one for dark mode, calibrated for optimal contrast in each context.
10 accent colors to choose from. Theme (light, dark, system) is detected automatically on load — with an inline script in the <head> that prevents the dreaded white flash.
Colors are injected as CSS variables at runtime, avoiding React re-renders for a simple theme change.
Tech stack
- React + TypeScript — Functional components, strict typing
- Vite with SWC — Fast builds, manual chunking
- Tailwind CSS — OKLCH, native dark mode
- Zustand — State management + localStorage persistence
- PWA — installable, offline, Workbox
- i18n custom — French/English, type-safe keys via TypeScript
- Compression — Brotli + Gzip on assets
- CSP — Content-Security-Policy with auto-generated hashes
Timeline
| Date | Version | Description |
|---|---|---|
| Jan 2025 | 1.0 | Initial version — Alpine.js, dot grid |
| Jan 2026 | 2.0 | React rewrite — TypeScript, Tailwind, Zustand, PWA, themes |
Takeaways
Duration: a few days per version, over one year.
What I learned:
- That the simplest representation is often the most expressive — 365 dots say more than a percentage
- The OKLCH color space and managing contrast between light and dark themes
What I’d do the same:
- Start from an abstract idea (visualizing time) and search for the most minimal form possible
- The pulsing dot to mark the present — a small detail that brings the grid to life
What I’d change:
- I’d add a daily wallpaper generator (mobile) that exports the current-day view, so you can see your year progress directly on your phone home screen.