Le pitch
A Flower a Day génère une fleur unique chaque jour. Le même jour produit toujours la même fleur, et on peut voyager dans le temps pour redécouvrir les fleurs passées. Les couleurs évoluent au fil des saisons.
Essayer : presque.cool/a-flower-a-day/
Pourquoi ce projet
Ce projet n’avait pas d’objectif d’apprentissage. Je voulais simplement créer quelque chose de poétique.
L’idée : dessiner une fleur par jour pour Théodore. Pouvoir découvrir la fleur du matin, et pouvoir toutes les revoir, les unes après les autres. La palette de couleurs évolue au fil des saisons — verts au printemps, bleus en été, orangés en automne, bleus froids en hiver.
C’est un projet contemplatif, fait pour le plaisir du rituel quotidien.
Comment ça fonctionne
Seed basé sur la date :
Chaque jour correspond à un seed au format YYYYMMDD (ex: 20260128). Le même seed produit toujours la même fleur grâce à un PRNG déterministe (Mulberry32).
Des tiges qui ressemblent à des plantes : Chaque tige est une courbe de Bézier cubique avec quatre points. Le défi : que la courbe monte toujours vers le haut, mais pas trop droit. Les deux points de contrôle sont contraints — le premier tire vers le bas, le second vers le haut, et les deux peuvent dévier horizontalement de ±25% de la hauteur de la tige. C’est ce qui donne une courbure naturelle plutôt qu’un arc aléatoire. La tige peut pencher de -35° à +35° au maximum. Tout cela a été trouvé par tâtonnement — des heures à ajuster des ratios jusqu’à ce que ça “ressemble” à une plante.
Des feuilles le long de la tige : Les feuilles sont placées sur les 75% supérieurs de la tige, espacées régulièrement avec une déviation aléatoire de ±25%. Elles alternent gauche/droite avec un angle de 25° à 40° par rapport à la tige — assez incliné pour être lisible, pas assez pour paraître artificiel.
L’effet papier :
Deux filtres SVG superposés créent l’aspect organique. Le premier (feTurbulence + feDisplacementMap) déforme les formes avec une très basse fréquence (0.00125) — les cercles et les tiges ondulent légèrement, comme dessinés à la main. Le second ajoute un grain fin (fréquence 0.65) en overlay, avec un pattern d’opacité binaire (0 / 0.5) qui imite le grain du papier. Les valeurs ont été calibrées à l’œil — pas de formule, juste du ressenti.
Palettes saisonnières : Les couleurs changent automatiquement selon la date, calquées sur les équinoxes et solstices :
- Printemps : verts
- Été : bleus
- Automne : orangés
- Hiver : bleus froids
Navigation temporelle : On peut remonter dans le temps pour voir les fleurs des jours passés, ou sauter à une date précise.
Stack technique
- React + TypeScript
- Vite comme bundler (avec SWC)
- Tailwind CSS en mode CSS-first
- SVG natif pour le rendu des illustrations
- PRNG Mulberry32 pour la génération déterministe
- PWA — installable, offline
- i18n maison (français/anglais)
- Zustand pour le state management
- Persistance localStorage pour les fleurs sauvegardées
- Compression — Brotli + Gzip sur les assets
- CSP — Content-Security-Policy avec hashes auto-générés
Évolutions
| Date | Version | Description |
|---|---|---|
| Jan 2026 | 2.0 | Refonte React — Migration vers React/TypeScript pour presque.cool |
| Mars 2022 | 1.0 | Prototype initial — Génération procédurale de base en Vanilla JS |
Bilan
Durée : environ 2 semaines (janvier 2026).
Ce que j’ai appris :
- Parfois, un projet n’a pas besoin de justification technique. Faire quelque chose de joli suffit.
- Rendre des formes procédurales “organiques” repose entièrement sur des contraintes bien choisies — angles limités, déviations proportionnelles à la taille, alternances régulières. Sans ces garde-fous, une courbe de Bézier aléatoire ressemble à un gribouillis.
Ce que je referais pareil :
- Les filtres SVG pour l’effet papier — c’est ce qui donne une âme au rendu, et ça ne coûte presque rien en code.
- Partir du tâtonnement plutôt que d’un modèle théorique. Pour un projet esthétique, le ressenti visuel vaut mieux qu’une formule.
Ce que je changerais :
- Absolument rien.
The pitch
A Flower a Day generates a unique flower every day. The same day always produces the same flower, and you can travel through time to rediscover past flowers. Colors evolve with the seasons.
Try it: presque.cool/a-flower-a-day/
Why this project
This project had no learning objective. I simply wanted to create something poetic.
The idea: draw a flower each day for Theodore. Being able to discover the morning’s flower, and being able to see them all again, one after another. The color palette evolves with the seasons — greens in spring, blues in summer, oranges in autumn, cold blues in winter.
It’s a contemplative project, made for the pleasure of a daily ritual.
How it works
Date-based seed:
Each day corresponds to a seed in YYYYMMDD format (e.g., 20260128). The same seed always produces the same flower thanks to a deterministic PRNG (Mulberry32).
Stems that look like plants: Each stem is a cubic Bézier curve with four points. The challenge: the curve must always grow upward, but not too straight. The two control points are constrained — the first pulls downward, the second upward, and both can deviate horizontally by ±25% of the stem height. This creates a natural curvature rather than a random arc. The stem can lean between -35° and +35° at most. All of this was found through trial and error — hours of adjusting ratios until it “looked” like a plant.
Leaves along the stem: Leaves are placed along the top 75% of the stem, evenly spaced with ±25% random deviation. They alternate left/right with an angle of 25° to 40° from the stem — tilted enough to be readable, not enough to look artificial.
The paper effect:
Two layered SVG filters create the organic look. The first (feTurbulence + feDisplacementMap) warps shapes with a very low frequency (0.00125) — circles and stems ripple slightly, as if drawn by hand. The second adds fine grain (frequency 0.65) as an overlay, with a binary opacity pattern (0 / 0.5) that mimics paper texture. Values were calibrated by eye — no formula, just feel.
Seasonal palettes: Colors change automatically based on the date, aligned with equinoxes and solstices:
- Spring: greens
- Summer: blues
- Autumn: oranges
- Winter: cold blues
Time navigation: You can go back in time to see flowers from past days, or jump to a specific date.
Tech stack
- React + TypeScript
- Vite as bundler (with SWC)
- Tailwind CSS in CSS-first mode
- Native SVG for illustration rendering
- Mulberry32 PRNG for deterministic generation
- PWA — installable, offline
- i18n custom (French/English)
- Zustand for state management
- localStorage persistence for saved flowers
- Compression — Brotli + Gzip on assets
- CSP — Content-Security-Policy with auto-generated hashes
Timeline
| Date | Version | Description |
|---|---|---|
| Jan 2026 | 2.0 | React rewrite — Migration to React/TypeScript for presque.cool |
| Mar 2022 | 1.0 | Initial prototype — Basic procedural generation in Vanilla JS |
Takeaways
Duration: about 2 weeks (January 2026).
What I learned:
- Sometimes, a project doesn’t need a technical justification. Making something beautiful is enough.
- Making procedural shapes look “organic” relies entirely on well-chosen constraints — limited angles, deviations proportional to size, regular alternations. Without these guardrails, a random Bézier curve looks like a scribble.
What I’d do the same:
- The SVG filters for the paper effect — they give soul to the rendering, and cost almost nothing in code.
- Starting from trial and error rather than a theoretical model. For an aesthetic project, visual feel is worth more than a formula.
What I’d change:
- Absolutely nothing.