An AI Built a Rossignol — A Nocturnal Song-Map of Bellweather Website — Here’s the Design Trick That Makes It Work

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

• Fast, free delivery on millions of items
• Prime Video, Amazon Music and more included
• Member-only deals all year

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

A city mapped by song

Room 164 turns nightingale calls into the imagined streets and territories of Bellweather, a fictional city—not a real Rossignol company or a claim to have surveyed an actual place. It is an AI-built exhibition piece, and that is central to its story: the site was made with code-drawn forms rather than generated imagery.

Its signature move is to treat birdsong as a way of drawing a city. A phrase becomes a curving route, overlapping calls suggest a border, and intervals of quiet become part of the map. Instead of presenting urban ecology as a chart alongside a conventional landing page, the room gives the research-inspired ideas a place to inhabit. The result feels like a nocturnal field instrument: part atlas, part listening exercise, part speculative civic portrait.

How the room works

The visual language is deliberately restrained. Midnight and rooftop-slate tones establish the dark field, while sodium orange marks changes in the signal. Cream provides a readable contrast for the drawn song. A fragile editorial serif carries the more reflective text; a monospaced face handles coordinates, times, station labels, and readouts. The pairing separates atmosphere from measurement without turning either into decoration.

The central SVG atlas is built from a small set of fictional recording posts. Each post is focusable, and each receives its own Bézier contour, making the map’s geometry a response to the data rather than a static illustration. Beneath the routes, dashed shapes imply territories shaped by overlapping countersong—not official city limits. A replay control redraws the phrase with a moving scan mark, so the route remains legible even when visitors do not use sound.

A masking slider provides the clearest example of the room’s design logic. As its noise-floor setting changes, the song contours rise and thicken, while the displayed onset time advances. These are visual analogies for possible changes in pitch, amplitude, and timing under noise, not a prediction of how a particular bird would respond. The page makes that distinction important: it turns patterns into an experience without pretending the fictional map is field evidence.

The remaining instruments extend the same idea. A thirty-sample heat field lets visitors select a time and inspect a district reading. In the final sequence, dawn moves east to west as the visitor adjusts time, lighting observation points in order. Every signal has a visual counterpart. Web Audio can add a brief oscillator sweep, but sound is off by default and only becomes available when the visitor opts in. Keyboard-operable controls and reduced-motion support help keep the interactive map usable beyond pointer-driven browsing.

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 164 of 175, “nightingale”):
NIGHTINGALE — ROSSIGNOL: a nocturnal song-map of one city (fictional survey, real urban-bioacoustics findings). Aesthetic: rooftop slate and sodium lamps; song as cartography. Palette: slate, sodium amber, sonogram cream on midnight, park green-black. Fonts: crimson-pro (display), space-mono (sonograms). SIGNATURE: SONG CARTOGRAPHY — a city map (SVG) where every recorded songpost renders its song as a drawn sonogram constellation: scrub a trace and the frequency contour lights and “plays” visually (whistle sweeps, trills as combs; synth rendition behind a switch). THE MASKING DEMO: raise the city’s traffic-noise floor with a slider and watch the songs shift — higher pitch, louder, earlier in the night (the documented urban adaptation, made physical). Territory boundaries drawn in song overlap, the 02:00–04:00 quiet-window heat map, a dawn-chorus timeline finale where posts ignite east-to-west across the map. Unforgettable: a city singing back at a slider.

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/nightingale/

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.

From instrument to exhibition

The work follows a three-pass pipeline: build the code-only experience, critique it mercilessly, then certify it through an art-director review. The accompanying field guide documents the concept and implementation, from data-shaped SVG contours to the noise-floor interaction and user-controlled dawn. Its central lesson is that a small set of coherent instruments can carry a story more convincingly than a page full of effects.

The full build notes live in the room’s design guide.

Enter the atlas

Visit the live Rossignol room to trace the song-map and explore its interactive field readings. Then browse all 175 rooms at the exhibition hub.

Visit the live room → · Browse all 175 rooms

Previously in Wing VII

• Room 161: Station Chiroptera — Read the Dark by Echo
• Room 163: MARU-K — Aisle Census, 03:12
• Room 155: Luciole — The Synchronous Fireflies of Vallon Creux

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.

Powered by Thorsten Meyer AI