05 · Mercure N° 80: a perfume launch built around one piece of liquid metal

Mercure N° 80 is a launch page for a fictional eau de parfum from the house Maison Vif. A single raymarched mercury form sits fixed behind the page and changes shape as you scroll through five chapters. The moment that makes people stop is the last one: you type your initials into the reserve form and the metal pool reflects them back.

Inspiration

The site borrows ideas from a list of free design tools and rebuilds them by hand in vanilla code.

Added on top: a distance-field object lit by hard studio boxes, a studio sign reflected in the chrome that swaps to the visitor's initials, a bottle that melts into a pool, a satellite droplet the pointer pulls out on a goo bridge, and callout lines that follow the orbiting note droplets.

Visual direction

References

Magic UI, 21st.dev, Shader Gradient, InstantGradient, CSS Peeper and Refero do not clearly show up here, so they are left out.

Why these choices

Chrome only looks like chrome against a dark, high-contrast room with a few hard light sources, so the studio is near black with a handful of procedural light boxes. A fragrance has no real product shot to show yet, so one believable hero object carries the whole story.

Text over a busy macro shot is hard to read. Putting every body block on fluted glass keeps it legible and ties the page to the metal.

Trade-offs were made for speed and safety. The scene renders at about 0.62 of device pixels, then a post pass smooths the upscale. Quality drops further if frames run slow. There is a static CSS fallback, reachable with ?nogl or when WebGL fails, and a reduced-motion mode that slows time and turns off the pointer pull. The curtain always lifts after six seconds so nobody is trapped behind it. On narrow or short screens the callout column becomes small tags that ride beside the droplets. On mobile the vessel text sits on a dark scrim.

Who this kind of site is for

It wins where one hero object carries a launch: fragrance, watches, jewelry, spirits, audio hardware, a single-product drop. It suits a brand that wants awe more than information.

It is the wrong call for catalogs, shops with many products, or anything where load time and low-end phones matter more than spectacle. It also costs real GPU time, so a weak laptop will drop to a blurrier render.

How to make it

Stack and key techniques

The prompt

Build a single-file website, index.html, no libraries and no build step, for "Mercure N° 80", an eau de parfum from the fictional house Maison Vif. Use raw WebGL2 and procedural visuals only. One liquid mercury form is fixed behind the page and changes shape as the visitor scrolls through five chapters.

Visual direction: palette void #0a0705, cream #efe6d8, champagne #e6cfa6, steel #a9bbd0. Fonts from Google Fonts: Bodoni Moda (display, italic for the wordmark and accents), Cormorant Garamond (text), DM Mono (tiny wide-tracked captions). Fashion editorial layout, lots of empty space, numerals used as design: 80, Hg 200.59, 312 trials, 24 hours, N° 0412 / 0800. Motion is slow and eased, with line-by-line mask reveals and an intro curtain that counts up to 80 then lifts.

Rendering: raymarch a smooth-min field of up to 12 spheres plus a rounded cylinder (bottle) and a rippling disc (pool), inside a bounding sphere. Add one self-reflection bounce, a glossy floor with reflection and contact occlusion, procedural hard light boxes, fresnel, thin-film iridescence. Render to a texture at about 0.62 of device pixels, with adaptive down-scaling when frames run slow. A second pass does a smoothed upscale, bloom, fluted-glass refraction with chromatic split for up to four DOM rectangles, vignette, grain and dither.

Chapters (blend five keyframe states by smoothed scroll): 1 Hero, a resting droplet with a giant italic "Mercure" wordmark in difference blending. 2 The notes, a pinned section where three tinted droplets (citron, rose, amber) orbit and leader lines connect them to callouts for Top, Heart and Base. 3 The story, the metal merged again and close, with three cards on fluted glass and a full-width quote, "Cold as a coin. Warm as a hand." 4 The vessel, a silvered bottle with a steel sphere stopper and an etched label, plus a spec list on fluted glass. 5 Reserve, the bottle melts into a rippling pool and one drop keeps falling in.

Interactions: the pointer pulls a satellite droplet out of the body on a goo bridge (mirror the distance field in JavaScript and drive a spring). The cursor ring swells near the surface. A studio sign reading "MAISON VIF" is reflected in the chrome and changes to the visitor's initials as they type in the reserve form. The form has name, email, initials (three letters at most) and size, with inline validation and a demo-only confirmation, "Held in your name, N° 0412 / 0800". Make clear it is a fictional demo and nothing is sent. The submit button is a metallic gradient with a sweeping highlight.

Fallbacks and accessibility: a static CSS version when WebGL is missing or with ?nogl, a reduced-motion mode, keyboard focus styles, and a curtain that always lifts after a few seconds. Layout must work at 390px wide, with no horizontal overflow.

Verification loop: serve the page, screenshot desktop 1440x900 and mobile 390x844 at six scroll stops and a few in-between morph states, check the console for errors, test the pointer pull, form validation, submit and the initials reflection, then fix what you find and repeat. Report anything you could not check.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, and nothing independent tests their WebGL or shader correctness. The table rests on the spec table, Anthropic's own pages, earlier-generation reviews and plain extrapolation.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Raymarched smooth-min metal with self-reflection and floor Attempts it, small errors likely, such as a wrong step size leaving holes or stray edges Likely attempts it with more bugs, or simplifies to a flat 2D metal shader
Studio sign reflected in the chrome, swapping to initials Attempts it, likely wrong reflection placement so the text is mirrored or off-screen Probably simplifies it away or draws it as flat overlay text
Fluted glass refraction in the post pass over DOM rectangles Attempts it, likely misalignment between canvas pixels and DOM boxes at device pixel ratios Likely falls back to CSS backdrop blur stripes
Five-state scroll choreography with bottle melting into pool Does fine on the blend, may lose some of the melt polish Likely attempts it, with abrupt jumps between chapters
Pointer pull with mirrored CPU distance field and spring Attempts it, likely drift between CPU and GPU surfaces Likely simplifies to a cursor-following blob
Leader lines tracking orbiting droplets Does fine Attempts it, likely lines that lag or cross badly
Editorial typography, curtain, reveals, form Does fine Does fine, a bit more template-like

Rough overall estimate, as a judgment call: Opus 5.5 would likely keep roughly 75 to 90 percent of the visual impact from the same prompt in one pass. Sonnet 5.5 would likely keep roughly 50 to 70 percent. Evidence is thin for the Fable 5.1 versus Opus 5.5 gap, and it is probably small on layout and type, larger on the shader math.

What would close the gap: a screenshot feedback loop, which this site's builder used, and splitting the build into the scene shader first, then the post pass, then the DOM. With a few rounds of iteration Sonnet 5.5 would likely recover much of the loss, though the sign reflection and the pointer physics are the likeliest to stay rough.

← Previous reportNext report →