The Concept
L'Essence is a fictional Grasse perfume house launching Eau N°9, Ambre Fantôme. The page treats fragrance as visible matter: slow forms drift, merge, darken, and leave a trace. It is written like a product launch but paced like a private smelling session, with the first viewport acting as label, vapor, and bottle signal at once.
The atmosphere is soft, but not timid. Cream is air, amber is heat, blush is skin, and deep plum gives each section a shadow. Asymmetry and overlap keep the page feeling poured and handled rather than templated.
Liquid Metaballs
The liquid fields begin in index.html as empty .goo containers plus SVG filters. In styles.css, feGaussianBlur softens each circle and feColorMatrix raises alpha contrast until separate circles fuse into a liquid edge. In main.js, GooField creates blob spans, sizes them from their container, and moves them with sine drift. The shared frame() loop uses transform-only motion, pauses when document.hidden, and lets the hero blobs gently pursue the cursor.
Generated Still & Loop
The art direction now integrates local Higgsfield assets as primary material: /assets/gen/essence/hero.jpg is a GPT Image 2 flacon still, and /assets/gen/essence/liquid.mp4 is the five-second Kling 3.0 liquid loop animated from that still. The hero uses the still as a graded editorial product portrait. The sillage section uses the loop as a full-bleed atmosphere with a poster fallback. syncAmbientVideo() pauses the video when reduced motion is requested, the tab is hidden, or the section leaves the viewport; sillageMedia updates a cursor-following light lens, and sillageWarm toggles the warmed accord reveal. All other major visuals remain code-generated.
Pyramid & Composition
The scent pyramid is built from three buttons, so hover, focus, and click all work. setTier() swaps the top, heart, or base palette, swells the vessel blobs, and updates the note copy. In the composition section, the range input stores a target time. tickComposition() eases toward it while paintComposition() interpolates six blob colors from citrus dawn to plum dusk and updates the clock.
CSS Bottle
The hand-rendered bottle still uses no image. The cap, neck, glass, liquid, label, highlights, and shadow are layered divs with gradients, inset shadows, and slightly imperfect radii. Transparent gradients create the hard left highlight, soft right rim, warm liquid base, and paper label, so the object reads as glass even though it is pure CSS.
Palette & Type
The type system is deliberately narrow. Instrument Serif carries romantic labels, italic names, and ghost numerals. Manrope handles controls, metadata, prices, and functional copy. The core tokens are cream #f6efe6, blush #e8c4b8, amber #c98d4b, and deep plum #3d2135.
Reproduce This
Prompt an AI agent to build a perfume launch page in pure HTML, CSS, and JavaScript using self-hosted Instrument Serif and Manrope. Ask for SVG goo-filter metaballs with cursor attraction, a full-bleed local still-to-video asset moment, an accessible scent pyramid, a dawn-to-dusk composition slider, a pure CSS bottle, reduced-motion support, grain, invented perfumery copy, and zero external requests.