Get beauty and skincare favorites delivered free — and shop member deals
- Fast, free delivery on millions of items
- Access to Prime Big Deal Days deals on October 6–7
- Prime Video, Amazon Music and more included
Discover the Hidden Art of Fragrance Visualization
Within this AI-crafted exhibition, ‘L’ESSENCE’ transforms perfume into a visible, liquid landscape. Its signature move is the use of dynamic, cursor-attracted liquid metaballs that evoke the tactile warmth and delicate shadows of a scent, creating an immersive visual experience that blurs the line between fragrance and materiality.
Building, Critiquing, and Refining
The site was constructed through a streamlined three-pass pipeline: first, developing the interactive metaball visual system, then subjecting it to relentless critique for fluidity and responsiveness, and finally, art director certification to ensure it captures the perfume’s essence. This process was guided by an AI-generated framework that emphasizes sensory immersion and visual elegance, resulting in a site that feels both handled and poured—mirroring the perfume’s character.
The full build notes live in the room’s design guide.
The Palette, Typography, and Signature Technique
This site employs a nuanced palette of soft, warm tones—creamy #f6efe6, blush #e8c4b8, amber #c98d4b, and deep plum #3d2135—that evoke the scent’s warmth and depth. The typography pairs the romantic, serif-based Instrument Serif in italics for labels and numerals, with the precise and modern Manrope for controls and body text, establishing a delicate balance between elegance and clarity.
The core signature technique is the use of liquid metaballs—animated, blobby SVG elements softened with Gaussian blur and color matrices—drifting and merging in response to cursor movement. This creates a liquid, living surface that mimics the scent’s intangible qualities, with CSS-crafted bottle shapes and local assets seamlessly integrated for a tactile presentation.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 22 of 175, “essence”):
L’ESSENCE — parfumerie. Fiction: a perfume house launching Eau No 9 “Ambre Fantome”. Aesthetic: soft luxury: cream #f6efe6, blush #e8c4b8, amber #c98d4b, deep plum #3d2135. Fonts: instrument-serif (display italic), manrope (body). SIGNATURE: liquid metaball blobs — 5-7 blurred circles in an SVG goo filter (feGaussianBlur + feColorMatrix contrast) drifting and merging in the hero, colored by scent notes, gently attracted to the cursor; scent-note pyramid: interactive three-tier diagram (top/heart/base) — hover a tier and its blobs swell while note names (bergamot, ghost amber, iris butter) fan out with silky staggers; a “composition” section where a horizontal slider morphs the blob palette from citrus dawn to plum dusk, copy updating live. Bottle rendered in pure CSS (gradients + highlights). Easing everywhere: long, perfumed cubic-beziers; nothing snaps. Unforgettable: scent made visible as slow liquid light.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/essence/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
luxury perfume bottle with CSS design
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Experience the Liquid Light for Yourself
Visit the live AI-built exhibition to explore the evocative visualizations of ‘L’ESSENCE — Eau N°9 · Ambre Fantôme’ and browse all 175 creations in the collection at our dedicated hub. Immerse yourself in the art of digital perfumery—crafted entirely by AI, for your sensory curiosity.
Visit the live room → · Browse all 175 rooms
Previously in Wing I
- Room 6: Abyssal Station — a 3,800 m descent
- Room 15: Apothecarium — Bitters & Botanical Remedies, est. 1783
- Room 16: BRUTA — Raw Concrete Architecture Collective
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
