Get business pricing on tech for your team
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
A night sky that learns to keep time
Room 155 is an AI-built exhibition piece: an interactive field notebook about fireflies whose separate flashes gradually fall into a shared rhythm. Luciole and Vallon Creux are fictional, created for the exhibit—not a real company, place, or field study. The site itself was built by AI, and that process is part of the story.
Its signature move is to make patience visible. Ninety-six simulated fireflies start out of sync. Visitors can watch their lights converge into a collective pulse, then disturb the field and see it find coherence again. Instead of presenting synchronization as a polished animation, the room treats it as an event produced by a living system of simple local interactions.
As an affiliate, we earn on qualifying purchases.
What makes the room work
A restrained nocturnal palette
The experience is grounded in near-black green, close to the color of a forest after dark. Bright chartreuse is reserved for the firefly signals, so each flash carries visual weight. A muted dusk mauve sets apart the human layer: notes, annotations, and the feeling of an observer at the edge of the scene. The contrast is deliberate, not merely decorative—the color system helps distinguish the simulated organisms from the notebook around them.
Two voices on the page
A literary serif gives the main text the measured quality of naturalist writing. A handwritten-style face appears more sparingly, on marginal details that suggest human observation. Long passages, soft boundaries, and off-center notes encourage a slow scroll through the exhibit rather than a quick scan of interface features. The composition asks visitors to spend time with the field before explaining it.
Interaction backed by an actual model
Each firefly is represented by an oscillator with its own phase and tempo, connected to nearby neighbors. On each frame, the simulation updates those phases: an individual keeps its natural rhythm while being nudged by the signals around it. A coupling control changes the strength of that influence, letting visitors loosen the chorus or help it settle.
A live coherence measure summarizes how closely the lights agree. Pointer interaction scatters phases and briefly disturbs the field; the same rules then guide recovery. The accompanying trace records the measured drop and return, while a phase diagram draws from the simulation itself. These views serve as evidence of the behavior on screen, rather than illustrations of an unrelated idea.
Code-made atmosphere
The exhibit’s visual elements are generated with HTML, CSS, SVG, and canvas—no downloaded image assets or prerecorded firefly sequence. CSS-built insects use layered shapes for wings and bodies, while gradients, silhouettes, and contour-like details create depth. Reusing prepared glow sprites helps keep the animation efficient. The simulation also pauses when its relevant views are offscreen or the page is hidden, and reduced-motion preferences receive a calmer presentation. Focus styling, announced state changes, and a compact mobile field map carry the experience beyond the desktop.
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 155 of 175, “luciole”):
LUCIOLE — the synchronous fireflies of Vallon Creux (fictional hollow, real Kuramoto synchronization). Aesthetic: forest-dark patience rewarded. Palette: forest black-green, firefly chartreuse #d4ff4a, dusk mauve. Fonts: caveat (field-notebook accents), crimson-pro (body). SIGNATURE: EMERGENT SYNC — hundreds of fireflies (canvas), each with its own internal clock, couple to their neighbors and SYNCHRONIZE while you watch — from chaos to a breathing unison in ~20 seconds (Kuramoto model explained in a margin note as it happens). CLICK anywhere to perturb — inject chaos and watch order re-emerge (the point of the whole site). A “wait for it” section that asks you to simply watch — and rewards stillness with the full display. The naturalist’s notebook register (pencil sketches in CSS), flash-pattern dialects per invented species, the two-week season calendar, why males flash and females answer. Unforgettable: breaking the sync and watching it heal.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/luciole/
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.
interactive nature exhibit display
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
From prompt to field guide
The AI-built site followed a three-pass pipeline: build the self-contained simulation and notebook, apply a merciless critique to pacing, clarity, performance, and accessibility, then seek art-director certification for the final experience. The accompanying guide documents the visual system and implementation choices, including the oscillator model, interaction, and responsive behavior, so the room can be understood as both an exhibit and a reproducible design study.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
Step into Vallon Creux
Visit the live Luciole room and watch the field move from scattered flashes toward a shared pulse. Then browse the hub’s full collection of 175 rooms for more AI-built exhibition experiments.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 152: Mothlight — A Porch-Light Census
- Room 154: Nightmarket — Mercado de Medianoche
- Room 151: Noctiluca — The bay that answers in light
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.
As an affiliate, we earn on qualifying purchases.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
