Bloomday

Inspiration. Mood trackers usually ask for a score from 1 to 5. It’s quick, but it flattens a whole day into one number and gives nothing back, so most people stop using them. The hackathon brief says great products are about how they look, feel and work. I wanted to see whether that could change a boring daily habit.

What it does. You describe your day with five sliders, and a flower redraws live as you move them. Each slider controls one visible thing: energy sets the petal count, calm rounds or sharpens the petals, focus adds layers, warmth moves the colour from violet to amber, and curiosity adds twist and uneven petals. You add a one-line note and plant the bloom. It joins a 31-day October garden where every day is a small flower. Tap any past day to look at it again or replant it.

How I designed it. I wanted the picture to be a readable record, so I tied every slider to a single visible change. I kept the page quiet, with lilac-tinted neutrals and one magenta accent, so the flower is the only large piece of colour. The same flower always comes from the same values, so shapes stay steady while you drag. It works in light and dark mode and down to phone width, and it respects reduced-motion settings.

Challenges. The hardest part was making the flowers look different enough to be meaningful without looking random. I solved it by mapping each slider to one property and using a fixed seed for each day’s uneven petals. The second challenge was keeping the garden from feeling empty on day one, so days 1 to 16 hold clearly labeled sample blooms.

What I’m proud of. The check-in takes about thirty seconds, and the result is something people might want to look at, not just a log.

What’s next. A weekly flower that averages seven days, a downloadable image of the finished garden, and a shared garden for a team or class.

Built With

• grid-and-flexbox-for-responsive-layout-vanilla-javascript:-no-frameworks-or-build-step-canvas-2d-api:-bezier-curve-petals-and-a-golden-angle-spiral-for-the-seeds-localstorage:-saves-planted-blooms-in-the-browser
• html5:-single-self-contained-page-with-semantic-structure-css3:-custom-properties-for-light-and-dark-themes
• instrument-sans
• jetbrains
• with-no-server-google-fonts:-bricolage-grotesque