Bloomley
Landing for a calm wellbeing habit
- Role
- Product Designer & Frontend Lead
- Stack
- Astro / Lenis / CSS scroll-driven animations
- Status
- In development
Most habit apps sell pressure: streaks, rings and missed-day guilt. Bloomley sells the opposite. The landing has to make a wellbeing product feel gentle and easy to start, with one character who shrinks the goal to fit the day.
The brief
Bloomley's landing has one job: sell calm instead of pressure. The message is one mission a day, no streak guilt, and a goal that gets smaller when the day is hard. I owned it end to end, from positioning and copy to design, illustration, motion and the build.
One character, generated with AI
Bloom was generated with AI. I went from rough drafts to final assets and art-directed the poses with a character sheet, so the same face, body and colors hold across the hero, the energy levels and the feature art.
Three decisions, then you are done
How it works is three short steps: name one intention, let Bloom shrink it to today, then do it and stop. Each step is brief, so the page reads as a process with a clear end.
Low on energy, the mission gets smaller
This is the core idea. Bloomley asks how you are before it asks anything of you, and the mission size follows the answer: five, ten or twenty minutes. The landing shows the three states with three poses, so the promise is visible before a reader scrolls on.
The flow: value before a password
Most wellbeing apps ask who you are before they show you anything. This section shows the first mission in iPhone mockups before any sign-up. The phones fly in as you scroll, so the motion follows the reader instead of running on a timer.
Build and motion
Built with Astro, with Lenis for smooth scrolling and CSS scroll-driven animations for the phone entrances. The hero entrance is CSS keyframes, and visitors who ask for reduced motion land on the finished frame. Pointer parallax and the blink are small scripts, and the page is served as pre-rendered HTML.
