[05] Product Story
Flow
A long-form product story for a 750 ml vacuum-insulated bottle, where the product itself is drawn as parametric SVG so the scroll sequences can take it apart, reseat its lids and repaint it.
Concept, art direction, frontend development and motion engineering.
[Scroll to explore]
Category
Status
Stack
Project index
Role — Concept, art direction, frontend development and motion engineering.
Problem
A product page usually presents an object through photography and a spec table. That shows what the thing looks like, but not how it comes apart, how its parts relate, or what changes when you choose a different lid or finish.
Solution
Structured the page as a long-form story across twelve sections, with scroll-driven motion used to describe how the object is made rather than to decorate the page.
Drew the product as parametric SVG rather than using rendered stills, so the sequences can separate, reseat and recolour its parts.
Chose the kind of scroll motion per section: scrubbed where the user should control a continuous process, stepped where the content is discrete.
What I built
- A parametric product system drawn from one set of real dimensions — 268 mm tall, 73 mm body, 52 mm opening
- An exploded assembly sequence that pulls the liner out of the shell
- A lid system seating four different caps on one body
- A finish switcher that repaints the whole object from a single hex value
- Front elevation and plan dimension drawings stroked from the same geometry
- A reduced-motion path where scrubbed sections present their finished state rather than disabling the tween
Technical implementation
One GSAP lifecycle scoped to a gsap.context, so unmounting a section kills its ScrollTriggers with it.
Pinning uses CSS position: sticky rather than ScrollTrigger pinning, which is what holds cumulative layout shift at zero.
Every section draws in one shared coordinate space, so the exploded diagram's leader lines land on the parts they name at any viewport width without a single measurement in JavaScript.
Cylindrical shading is derived from one finish colour, so adding a finish means adding a hex value rather than re-rendering an asset set.
DOM node count fell 59%, from 3,358 to 1,376, by defining the paint servers once for the document and drawing each cap knurl as a single path instead of 25 separate line elements.
The honest limit is documented rather than hidden: drawn surfaces have no grain of their own, so close-range crops are held at roughly 1.5-2x. Past about 2.5x the frame stops reading as an object and starts reading as a gradient.
Outcome
A product story where the interaction carries the explanation — the object comes apart, changes lid and changes finish in front of the reader, rather than being described next to a photograph of it.
FLOW is a fictional product created as a design and development demonstration. Its specifications are illustrative.