Showroom · Make-of

How Pêche was made

A perfume commercial with no perfume, no camera crew, and no video file — a glass flacon dropped into a dusk pool, rendered live and directed by your scroll.

What it demonstrates

That the language of luxury advertising — the suspended product, the slow-motion splash, the underwater beat, the packshot — can be written in code instead of filmed. Because the film is a function of scroll position rather than a video timeline, it plays at whatever speed the visitor reads at, forwards and backwards, and it weighs kilobytes, not megabytes.

Techniques, honestly named

• A scroll-scrubbed timeline — the page pins a full-viewport canvas for five viewport-heights of scroll; progress through that span is the film's clock. Camera, bottle, captions, and the waterline flash are all pure functions of it.
• A deterministic splash — the crown is 90 droplets on seeded ballistic arcs: position = launch velocity × time + gravity, where "time" is scroll progress past impact. Scroll back and the splash un-happens. Ripple rings, a foam disc, and the ring pulses around the floating bottle work the same way.
• The examples' water — three.js r160's own Water shader (a planar reflection with scrolling normal maps) tuned pool-calm, under the library's Sky shader with the sun two degrees over the horizon. The film uses AgX at 1.18 exposure for its soft highlight rolloff, with an ACES fallback held below 0.5.
• A procedural flacon — no model files: a deep extruded, decanter-cut shell with curved shoulders, a heavy glass heel, inset glossy "juice" with a crisp meniscus, a gold collar and faceted cap, and a satin label drawn to a canvas texture after the display face loads. Layered transparent clearcoat materials retain the glass highlights without three.js's costly full-scene transmission pass.
• Two worlds, one cut — above the waterline: sky, water, splash. Below: exponential fog, caustic textures, additive light shafts, rising bubbles, a sun glow sprite. The swap happens the frame the camera crosses y = 0, hidden inside a white "lens flash" derived from camera height.
• Respectful fallbacks — reduced motion renders the film as four composed stills with captions (captured from the same scene); no WebGL or a blocked CDN swaps in a photographed dusk pool; the loop pauses in hidden tabs; a lost GPU context is caught and the environment map rebuilt; pixel ratio is capped, and a one-way quality governor watches real frame times — weak or software-rendered machines step down to a lower resolution and finally to a frozen-frame-per-scroll stills mode, so the film can be slow-rendered but never janky.

Recreate it