SCROLL EXPERIENCE
Design in motion
Parallax, reveal-on-scroll, a pinned story, counting stats and a sideways gallery. Just start scrolling.
Scroll to begin01 — Reveal
Elements arrive as you scroll
Each card fades and slides into place the moment it enters the viewport, with a staggered delay.
Fast
Buttery transitions powered by the Intersection Observer API.
Polished
Layered gradients, soft shadows and rounded geometry throughout.
Responsive
The grid reflows from three columns down to one on small screens.
Modular
Every section is independent and namespaced to avoid clashes.
Accessible
Semantic markup with clear focus and reduced-motion friendly.
Delightful
Small motion details that reward the act of scrolling.
1. Add a habit
Create a habit in seconds. The pinned phone on the left stays put while these steps scroll by.
2. Check in daily
Tap once a day to mark it done. Watch the screen number update as this step reaches the centre.
3. Build a streak
Consecutive days stack into a streak. Momentum becomes the reward that keeps you going.
4. See your growth
Weekly insights reveal the pattern behind your progress over time.
By the numbers
05 — Gallery
Scroll sideways
A horizontal, snap-to strip nested inside the vertical page.
Aurora
Sunset
Ocean
Forest
Berry
Ember
Slate
Candy
You reached the end
That was a lot of scrolling — nicely done.
Back to top