LiveMotion Design
Brew
A coffee pour that runs, splashes and spills on scroll.
- Role
- Motion & UI design
- Date
- Nov 2026
- Tags
- Coffee, Frame sequence, Depth masking

The idea
A landing page for a specialty roaster where every visual is real photography or footage. The pour, the beans and the café do the selling.
The process
The hero clip was cleaned and cut into 120 scrub frames, with a mask per frame so the cup passes in front of the headline. Beans, splash, cup and bag were cut out and graded to one deep-brown palette. Seven sections follow a single cup from pour to café.
Motion techniques
- 120-frame canvas scroll scrub with per-frame cup masks
- Floating cut-outs with separate intro, scroll, pointer and drift layers
- Frames streamed in four lanes behind a short loader
- Clip-path café reveal
- Ping-pong loop finale
The outcome
A warm, tactile page with a working bag and order flow. Phones get a lighter frame set and in-place reveals; reduced motion shows every section in its final state.

