Matcha Explosion
A promotional page for an iced matcha espresso, where scroll plays an exploding cup frame by frame.
How it’s built
- MatchaScroll
- Draws the frames to a canvas. Scroll runs through a spring (stiffness 60, damping 20) before it becomes a frame index, so the sequence eases rather than stutters.
- Loading
- The first 20 critical frames load at high fetch priority and drive the loading screen’s progress; the rest load at low priority.
- Build
- Next.js with the React Compiler enabled.
What it does
- A loading screen that reports real progress on the frames that matter first.
- Sections for the tea, the roast and the drink, ending on an order card.
Screens
Where it sits
Next.js 16 · React 19 · Framer Motion · Tailwind CSS v4 · TypeScript
By the numbers
- Frames in the sequence
- 197
- Critical frames
- 20
