Field notes · No. 40

The anatomy of
an apparition.

A practical account of how La Fée Verte turns a static browser page into a living belle-époque poster.

Design guide 01 / 06

01 · Concept

The poster becomes a place

La Fée Verte imagines an absinthe house whose identity has survived since 1897 without becoming a museum. The page borrows the vertical drama, botanical borders, creamy stock, and seductive typography of an art nouveau lithograph, then gives those ingredients digital behavior. The dominant bottle-green field establishes nocturnal intimacy; absinthe green appears in concentrated shocks; gold traces the ornament. The supplied muse portrait is treated as the house’s star poster, not generic decoration, and its caption names GPT Image 2 via Higgsfield as the image source.

02 · Signature system

Vines that never repeat

The ornament generator lives in main.js. makeOrnament() creates an SVG for every .ornamented section. A session seed comes from crypto.getRandomValues(); randomFor() turns it into reproducible values for that load. Each named mode receives primary Bézier stems, counter-curves, hand-shaped leaves, buds, and spiral tendrils with varied control points and delays. IntersectionObserver adds .in-view as a section enters the viewport. In styles.css, stroke dashes draw while leaves and buds bloom behind them. The result is structurally art nouveau—long whiplash curves and organic asymmetry—but unique on every visit.

01Seed02Bézier03Leaf04Grow

03 · Louche & atmosphere

Making the ritual visible

The louche illustration is semantic inline SVG in index.html. Its carafe, spoon, sugar cube, droplets, and glass remain crisp at every size. CSS keyframes named drip, cloud, dissolve, and sway pace the ceremony. Inside the glass, radial gradients produce the opaline bloom; feTurbulence and feDisplacementMap roughen its edge into a natural cloud. A fixed, pointer-free texture layer uses an inline SVG noise filter to unify flat color and imagery like printed stock. Hover shifts in the menu and herbarium provide smaller discoveries without competing with the ritual.

04 · Key art

From portrait to apparition

The locally stored /assets/gen/absinthe/muse.jpg began as an original GPT Image 2 still made through Higgsfield. The production workflow can carry that still into a restrained Kling 3.0 loop, also exported locally, so ambient motion never introduces an external request. This delivery uses the supplied still as first-class hero art: explicit dimensions prevent layout shift, the clipped gold frame makes it a physical salon poster, and layered color grading binds it to the bottle-green field. setupApparition() in main.js drives the additional green-fairy reveal—pointer position moves a radial light, while a real button gives touch and keyboard visitors the same transformation. All borders, paper grain, plants, louche clouds, and lettering remain code-generated rather than baked into supporting images.

05 · Tokens

Ink, herb, metal, paper

Bottle green#16351f
Absinthe#9db54c
Ornament gold#c9a445
Poster cream#f2e8c9
Playfair Display — seductionEB Garamond — detail, counsel, provenance

Display copy uses locally hosted Playfair Display, usually italic, with tight spacing and deliberately oversized line breaks. EB Garamond carries body text, labels, and numbers. Fluid clamp() scales preserve the poster hierarchy from 390 to 1440 pixels. The responsive layout collapses grids but keeps the generous type, image frame, and botanical presence; reduced-motion visitors receive complete ornament with animation effectively paused.

06 · Reproduce this

Prompt the behavior, not the costume

Ask an AI coding agent for a single-page hospitality experience rooted in a precise historical graphic language. Specify one dominant field, two locally hosted typefaces, an authored content program, and one generative signature. Request seeded SVG Bézier ornament attached to semantic sections, intersection-triggered stroke drawing, an inline SVG process illustration with turbulence, accessible navigation, responsive checks at three widths, and a reduced-motion mode. Most importantly, ask the agent to inspect rendered screenshots and revise concrete compositional flaws. That final loop turns a collection of period references into a coherent place.