Skip to content
All work
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
Visit live site (opens in a new tab)
Brew hero: coffee pouring into a black cup under the headline Crafted in Every Drop

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.

House Reserve No. 7: a kraft bag spilling coffee beans beside the product details
Product: the bag tips and the beans spill as you scroll.
A barista pouring latte art into a black cup
Café: a clip-path reveal opens onto the bar.