Get furniture and decor delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A garden that asks you to wait
Jardin Vespertine is an AI-built exhibition piece: a fictional municipal garden where flowers open only when the visitor’s chosen time and place allow it. Its subject is anticipation, and its signature move is making darkness part of the interaction. Rather than revealing every bloom at once, the room turns a clock and a walk through the garden into invitations to look again.
That staged reveal gives the experience an interior-design logic. Plum-dark space holds the eye, while small areas of luminous white feel like carefully placed objects in a dim room. The flowers, moths, light and texture are all drawn with code, not photographs or image files. The constraint is also the concept: this is a digital night garden built from its own materials.
As an affiliate, we earn on qualifying purchases.
From prompt to planted scene
The process follows three passes: build the experience, critique it mercilessly, then certify the result through an art-director review. The accompanying field guide explains the timing, code-drawn forms, palette, accessibility choices, and reproduction brief, making the room’s construction part of the exhibit. The site was built by AI; that is the story, not a claim about a real garden or company.
The full build notes live in the room’s design guide.
Inside the Nocturne Wing
The palette does the work of setting a room’s atmosphere. Deep plum recedes like velvet in shadow; moonflower white is reserved for the blooms; muted gold marks moments of guidance and pollen; and near-black green grounds the botanical details. The result is dark without being visually flat: contrast appears where attention should land, rather than across the whole screen.
Typography adds another sensory layer. Italiana gives the display text a high-contrast, almost ceremonial presence, while Cormorant Garamond handles notes and labels with a softer, more intimate voice. The field guide treats type as a stand-in for scent: jasmine is light and slanted, datura arrives in emphatic capitals, and night phlox takes on a gentler serif character. Words become part of the garden’s atmosphere, not just its instructions.
Time, threshold, bloom
The central interaction combines a clock with entry into each flower bed. A visitor selects a time, then brings a bed into view; a flower opens only when both conditions are met. Each species has its own hour, so the garden unfolds in stages: moonflower first, night phlox later, and queen-of-the-night at midnight. Closed buds remain visible, preserving the sense that something is waiting rather than missing.
Under the surface, JavaScript compares the selected minute with each bed’s opening time and watches when beds enter the viewport. SVG paths are repeated around a central point to construct petals, with individual rotation and timing values giving each flower its own unfolding rhythm. The midnight flower adds a short vigil before its petals appear. Reduced-motion settings skip the wait and show the result directly, while the selected time can be carried in the page address for revisiting a particular garden state.
Small gestures, carefully composed
A CSS-drawn hawkmoth brings movement to the scene, with a timed approach and feeding sequence when invited. A larger moth follows a dashed route, and its looping motion pauses when it is out of view. Elsewhere, pointer movement shifts a warm lantern pool across the gardener’s path. These effects make the page feel inhabited without relying on external imagery: geometry, type, and light are the furnishings of this digital room.
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 157 of 175, “vespertine”):
VESPERTINE — JARDIN VESPERTINE, a night-blooming garden (fictional garden, real night-pollination botany). Aesthetic: dusk plum velvet; white flowers as lanterns. Palette: dusk plum, moonflower white, hawkmoth dust-gold, leaf black-green. Fonts: italiana (display), cormorant-garamond (body). SIGNATURE: NIGHT BLOOM — flowers open petal-by-petal (layered SVG choreography) ONLY as they enter the viewport’s darkness; each species keeps its true hour on the GARDEN CLOCK (moonflower at dusk, night-phlox at 22:00, queen-of-the-night once, at midnight) — arrive at a bed “too early” and the buds stay closed with a note of when to return (the clock can be turned, patience can be cheated, the garden forgives). Hawkmoth pollination choreography (hover-feeding at tubular white throats), scent rendered typographically (no image can smell; the type tries — jasmine in light italics, datura in heavy caps with a warning), the gardener’s lantern rounds. Unforgettable: a flower that made you wait.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/vespertine/
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.
Step into the garden
Visit Jardin Vespertine to turn the clock and see what the dark will reveal. Then browse all 175 exhibition rooms at the hub.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 155: Luciole — The Synchronous Fireflies of Vallon Creux
- Room 152: Mothlight — A Porch-Light Census
- Room 154: Nightmarket — Mercado de Medianoche
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.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
