Vespertine Field Guide

Jardin Vespertine is a fictional municipal garden rooted in real night-pollination botany. Its subject is anticipation: the unforgettable flower is the one that made you wait. Visitors turn a permissive brass clock, enter each bed’s darkness, and discover that every species obeys its own hour.

Dusk behaves as a material. Plum velvet absorbs the page; moonflower white appears only in concentrated blooms; dust-gold marks time, pollen, and guidance. Every flower, moth, light pool, stem, and grain is code-grown—no raster imagery, generated asset, or external request. That constraint is proudly part of the Nocturne Wing.

In main.js, addPetals() repeats species-specific SVG paths around a 250 × 250 origin. Each receives --rot, --delay, and a minute directional drift. updateGarden() compares the range input with each bed’s opening minute, while IntersectionObserver records entry into darkness. Only both conditions add .is-open. Moonflower opens at 19:30, night phlox at 22:00, and queen-of-the-night at midnight.

Closed buds remain illustrated rather than disappearing. The queen adds a compressed four-minute vigil: an interval advances 23:56 through midnight only while the document is visible, twelve CSS witness-lights gather, then the true clock state releases 18 petals. Reduced motion jumps directly to the earned result. The chosen minute is written into the main page URL, so a particular night can be revisited.

The hawkmoth is CSS geometry with paired eyespot wings, antennae, a segmented body, and a proboscis. “Invite the hawkmoth” triggers a timed approach, rapid wingbeats, tubular contact, and an accessible feeding report. The larger specimen follows a dashed observation transect; visibility changes pause its repeating animation.

Scent cannot be pictured, so type performs it. Jasmine is a light italic; datura arrives in heavy warning capitals; night phlox drifts in vanilla-soft serif. A scent-name creates a capped trail of words through .scent-trace. In the rounds, pointer coordinates update --lantern-x and --lantern-y, moving a warm pool over the gardener’s drawn route.

Italiana supplies the pale, high-contrast display voice; Cormorant Garamond carries body text, field labels, and human notes. The foundation tokens in styles.css are dusk plum #160d18, moonflower white #fff9e9, moth dust-gold #c8a76b, and leaf black-green #101c16.

A prompt for another agent

Build a responsive nocturnal botanical experience in pure HTML, CSS, and JavaScript. Make time interactive: a clock must gate viewport-triggered, petal-by-petal SVG blooms at botanically plausible hours. Use near-black botanical color fields, serif typography as scent, code-drawn pollinators, a moving lantern route, keyboard-accessible controls, rich field notes, and a reduced-motion path. Use no raster imagery or external requests.

Ask the agent to verify 390px, 834px, and 1440px captures, plus early and late clock states. Preserve darkness around the interaction. The pale blooms should feel earned.