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
A bay that answers when you disturb it
Noctiluca is an AI-built exhibition piece: a fictional midnight field station where the water seems to register a visitor’s presence in light. Its central gesture is simple and memorable. Move, tap, or scroll, and an otherwise dark bay responds with a trail of blue-green sparks and spreading rings. The page doesn’t just depict a luminous shoreline; it makes interaction feel like pressure applied to a living environment.
That distinction gives the room its quiet emotional pull. The fictional bay invites a gentle approach rather than promising a spectacle on demand. Its story moves from the sensation of glowing water to the biology that can produce it, then toward a practical concern: reducing light pollution. Wonder becomes a reason to pay attention.
interactive light art installation
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
From brief to field manual
The process follows three passes: build the responsive, image-free environment and its shared disturbance behavior; critique it mercilessly for clarity, pacing, legibility, and whether each glow earns its place; then have an art director certify the finished experience against its concept and craft. The accompanying field guide documents the room’s visual system and implementation, including its canvas techniques, motion safeguards, and the choices that make the bay’s light part of the story.
The full build notes live in the room’s design guide.
responsive water simulation device
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Darkness is the material
The site was built without photography, video, or generated images. Instead, CSS, inline SVG, and Canvas 2D create the moon, water, sample chamber, route, grain, and drifting points of light. This is more than a technical constraint: the bay’s glow is made in response to the visitor, so the interface’s behavior carries the meaning.
A restrained palette, a deliberate voice
Abyssal navy holds most of the screen. Teal suggests depth, while bright cyan is reserved for moments of biological response; moon-silver text stays legible against the dark. The contrast keeps the luminous effects from reading as decoration alone. Display headlines use the fine, sweeping character of Cormorant, while Sora handles navigation, measurements, and scientific text with a clearer, more utilitarian tone.
One law, many gestures
The signature interaction is a shared disturbance system: pointer movement, taps, scroll velocity, and section arrivals all agitate a persistent field. In the browser, a Canvas renderer turns these inputs into decelerating sparks, elliptical ripples, and broader bands of light. Cached glow sprites help draw particles efficiently, while a cached background and bounded particle counts limit unnecessary work.
The same visual language supports several different acts of attention. Headings release a modest flare as they enter view. A drawn sample chamber presents a field census, and a visitor can type a name to form flickering organisms from its letter shapes. Later, a conservation sequence shields coded streetlamps and shifts the water’s contrast, turning the change in illumination into part of the argument.
These effects also have an accessible and performance-conscious side: render loops pause when the page is hidden, the name-writing scene pauses outside its viewport, and reduced-motion settings receive a still field. The piece pairs atmosphere with practical browser care instead of asking every device to animate constantly.
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 151 of 175, “noctiluca”):
NOCTILUCA — BAHÍA NOCTILUCA, a bioluminescent bay (fictional place, real dinoflagellate science). Aesthetic: black water that answers touch with light. Palette: abyssal navy, bioluminescent cyan #4df0ff, plankton teal, moon silver. Fonts: cormorant (display), sora (body). SIGNATURE: DISTURBANCE GLOW — the water IS the page background (WebGL/canvas): ANY disturbance triggers bioluminescence — the cursor leaves a glowing wake, scroll sends a swell of light across the water, clicks bloom like paddle strikes; even text softly ignites as it enters the viewport. The mechanism explained tenderly (luciferin, the shear-stress trigger, why the bay glows brightest on new-moon nights). A kayak night-tour log with waypoints, the conservation register (skyglow dims the bay — one darkened streetlamp at a time), a “cup of seawater” census (600,000 organisms). Unforgettable: writing your name in light on the water.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/noctiluca/
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.
As an affiliate, we earn on qualifying purchases.
Visit the bay
Explore Noctiluca — The Bay That Answers in Light and see what happens when you disturb the water. This is an AI-built fictional exhibition piece, not a real field station or company. To discover more rooms in the series, browse all 175 at the Fable hub.
Visit the live room → · Browse all 175 rooms
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.
Columbus Day / Indigenous Peoples' Day Picks
long weekend sales
As an affiliate, we earn on qualifying purchases.
