Inside Room 171 of 175: The Making of “BLACKOUT — 03:12–05:47, Verlicht”

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 blackout with a battery bar

BLACKOUT is a fictional exhibition room about one fictional city’s 155-minute power outage. Its central idea is simple and unsettling: the page behaves like an emergency appliance, spending its own reserve as the reader moves through the night. The site was built by AI, and that fact is part of the story: this is an experiment in making interface behavior carry narrative weight.

The signature move is a scroll-linked charge meter that steadily falls from full power to a final sliver. As it drops, the room gives up ornamental motion, then dims its drawn imagery, then switches display text to an emergency typeface. The testimony remains readable throughout. At the end, the last few percent belong to the people remembering what happened.

Designed to shed its luxuries

The visual language starts in near-black, punctuated by emergency amber, candle gold, and a small signal of UPS green. Silkscreen gives clocks and labels a hard-edged, instrument-panel character; Archivo carries the longer recollections with a quieter, more legible voice. The contrast makes the page feel like a device without turning its human accounts into props.

There are no generated images. CSS gradients and clipped shapes create candlelight; SVG paths and code-drawn stars build the night sky; small blocks of light form the city windows. These elements are not just a low-cost illustration strategy. Their constructed quality suits a room whose atmosphere is being assembled under pressure.

One native range control lets readers lower the fictional streetlight load. As the glare recedes, the skyline changes and more stars emerge, making the control part of the scene rather than a detached visual effect. In the candle passages, a pointer-guided glow follows with a little lag, like a flame that has weight. It stops outside those sections and gives way on touch devices or when reduced motion is requested.

A restoration switch brings the city lights back in stages. That return gives the page a resolution, while the earlier depletion makes every decorative detail feel provisional. The interaction design keeps asking a useful question: what should an interface protect when resources run short? Here, the answer is the testimony.

Three passes, one room

The room moved through a three-pass pipeline: build the experience, critique it mercilessly, then seek art-director certification. The accompanying field guide documents the concept, visual techniques, design tokens, and reproduction notes, including how the page responds to reduced motion and changing charge.

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

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 171 of 175, “blackout”):
BLACKOUT — THE NIGHT THE GRID BLINKED: 03:12–05:47, city of Verlicht (fictional outage, oral-history register). Aesthetic: a website running on backup power. Palette: emergency amber, candle warm, dead-screen black, UPS-panel green. Fonts: silkscreen (panel readouts), archivo (body). SIGNATURE: BACKUP POWER — on load the site FAILS beautifully (elements flicker out, one dying pixel line) then reboots onto backup: a UPS battery bar sits at the top and DRAINS as you read; at thresholds the site sheds load — decorative animation dies first, then image dimming, then font fallback warnings — graceful degradation performed as art (and honestly explained in the guide). Candle-lit sections where the cursor is a flame with physics. The oral history: eleven invented neighbors, one night (the midwife’s flashlight, the man who finally saw stars downtown — a quiet zodiacal cross-reference), elevator-rescue log, the substation post-mortem in plain language. Power returns at 05:47 — and it’s almost a disappointment. Unforgettable: racing a battery bar to the end.

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

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.

Step into the outage

Visit the live BLACKOUT room and follow its reserve through the night. Then browse all 175 rooms at the hub for more experiments in art, craft, and interface.

Visit the live room → · Browse all 175 rooms

Previously in Wing VII

• Room 161: Station Chiroptera — Read the Dark by Echo
• Room 169: Hibernaculum — Where Winter Sleeps
• Room 163: MARU-K — Aisle Census, 03:12

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