Skip to content
All work
LiveMotion Design

Bloom

A face serum that unfolds as a four-chapter scroll film.

Role
Motion & UI design
Date
Nov 2026
Tags
Beauty, Scroll film, WebGL matte
Visit live site (opens in a new tab)
Bloom ritual chapter: a golden serum bottle on a stone plinth in front of the word Ritual

The idea

A botanical face serum told as one short film: Pick, Distill, Drop, Ritual. Scroll chooses the chapter; the footage travels there at real speed.

The process

All footage was graded into one clip carrying a per-frame product matte, so a small WebGL layer can draw the product in front of the chapter word. Every motion value lives in one config file, and hold loops keep each chapter alive without ever seeking.

Motion techniques

  • Scroll-targeted video that travels at real speed and reverses smoothly
  • WebGL matte that puts the product in front of live text
  • Pre-rendered hold loops for every chapter
  • Mask-reveal letters timed to the footage
  • Hand-off: the bottle glides into the product cards

The outcome

A calm, premium page where the motion never jumps. Copy sits on a glass pill that passes AA over any frame, and reduced motion swaps the film for graded stills.

Distill chapter: a glass flask of golden serum in front of the word Distill
Distill: the product passes in front of the chapter word.
Find your ritual: three serum bottles in rose, gold and green product cards
Collection: the film hands the bottle over to the cards.