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 field station you can only read by echo
Station Chiroptera is an AI-built exhibition room, not a real research station or company. Its fictional field report explores a simple question: what if a page did not reveal itself all at once? Here, darkness is the interface. Press Space or tap to send a pulse across the screen; the passing wavefront briefly uncovers the report, then leaves a faint trace of where it traveled.
That reveal is the room’s signature move: echolocation becomes a rendering technique. Instead of using photographs or generated imagery to depict a cave, the page makes visibility itself feel acoustic—temporary, partial, and cumulative.
As an affiliate, we earn on qualifying purchases.
Seeing by listening
The imagined station records invented species and observations, but its call types draw on real acoustic distinctions. Brief, steeply changing sweeps suggest fine ranging in clutter; steady-frequency calls evoke Doppler detection; slower, flatter calls imply longer travel through open space. The fiction gives those ideas a place to live without pretending that the station or its records are real.
Black canvas, phosphor return
The visual system stays close to its premise. Cave black provides the field; luminous green signals an echo; amber marks measurement; and muted rose belongs to the wing and living tissue. Mineral white keeps longer passages legible. Zilla Slab gives headings a literary, instrument-like character, while JetBrains Mono carries coordinates, controls, and record details. Both typefaces are self-hosted.
The reveal mechanism
The page underneath is semantic HTML, but a Canvas mask initially covers it. A pointer action or Space key creates an echo source. Each animation frame paints the dark layer, then uses a destination-out blend to cut two expanding annuli through it. Their changing radii expose the content they cross, then the cover closes again.
A separate trace canvas adds a sharp green edge, a broken amber delay, and short reflector marks. Each pulse also contributes a low-opacity pool of remembered light, so previous readings linger without turning the cave into a permanently illuminated page. Memory is bounded rather than allowed to accumulate forever; the animation also limits pixel density to keep the drawing practical.
Instruments made from code
A three-post triangulation display turns arrival times into an illustrated flight corridor. Other panels draw distinct spectrogram patterns, a bat wing, and a heterodyne scope directly with Canvas, SVG, CSS, and HTML. Selecting a wing digit changes its emphasis and accompanying anatomical note; tuning the detector updates the comparison and scope. These are working visual interactions, not decorative screenshots.
Sound is optional and starts off. After the visitor enables it, Web Audio synthesizes a chirp and delayed return. The pulse sequence also uses spacing that tightens toward its endpoint, making the approach visible as well as audible. Across the room, animation pauses when the document is hidden. Reduced-motion preferences remove the moving canvas treatment and leave a still, readable page; the triangulation view likewise becomes static.
Atmosphere without image files
Layered radial fields, repeating cave contours, an SVG noise filter, translucent borders, and drawn light supply the texture. The constraint matters: the darkness is not a picture placed behind the content, but a responsive surface that changes with each visitor’s actions. No generated imagery, photography, or remote asset requests are needed.
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 161 of 175, “chiroptera”):
CHIROPTERA — STATION CHIROPTERA, an acoustic bat survey (fictional station, real echolocation science). Aesthetic: cave-black page that must be SEEN with sound. Palette: cave black, sonar-return green, wing-membrane rose-brown, detector amber. Fonts: zilla-slab (display), jetbrains-mono (call data). SIGNATURE: ECHO RENDER — the page begins almost entirely DARK: press space / tap to emit a click, and its expanding wavefront REVEALS whatever it touches for a few seconds before fading (echolocation as the literal render engine; auto-click mode behind a switch). Content you’ve “insonified” stays faintly phosphorescent. Call spectrograms per invented species (FM sweeps vs CF plateaus, each explained), the Doppler feeding-buzz accelerando rendered as type tightening, a heterodyne bat-detector demo (visual), wing-membrane anatomy with finger bones highlighted (a hand that flies). Unforgettable: reading a website by sonar.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/chiroptera/
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 brief to field guide
The site was built with AI, and that process is part of the work: an AI coding agent turns the brief into a semantic field report, the result faces a merciless critique, and an art director certifies the finished experience. The accompanying field guide explains the echo-render system, return memory, triangulation, and accessible fallbacks, making the piece both an exhibition and a record of how its interface works.
The full build notes live in the room’s design guide.
Enter the dark
Visit the live Station Chiroptera room and try reading by pulse: open the exhibition. Then browse the hub to explore all 175 rooms in the series.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 155: Luciole — The Synchronous Fireflies of Vallon Creux
- Room 152: Mothlight — A Porch-Light Census
- Room 154: Nightmarket — Mercado de Medianoche
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.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
