Steal This: The Signature Technique Behind “The Cenotaph at Night | A Two-Minute Vigil”

Buying for a business?Offer from Amazon

Get business pricing on tech for your team

• Business-only prices and quantity discounts
• Tax-exempt purchasing
• Multiple users, one account, clear invoices

Create a free Business account →Free to register

As an affiliate, we earn on qualifying purchases.Hide

The Cenotaph at Night: A Ritual of Silence

This virtual memorial immerses visitors in a contemplative civic vigil, emphasizing stillness over spectacle. Its defining feature is a single, floodlit historic photograph that remains static, encouraging visitors to focus on the passage of time rather than movement or animation. The room’s core experience is a two-minute countdown leading to midnight, during which a clock subtly transitions from 23:58 to 00:00, revealing names and a final inscription. This deliberate restraint transforms digital space into a quiet moment of remembrance, with the visitor’s scrolling serving as the only movement—mimicking a solemn, shared pause in public ritual.

Design Components and Interactions

The experience centers around a carefully curated palette inspired by nocturnal stonework and subdued materials, with a sharp poppy red accent that signifies remembrance. The typography employs a self-hosted, classical typeface pairing—Forum for titles and EB Garamond for body—creating a stately, timeless feel. The key visual asset is a high-quality, floodlit architectural still stored locally, which is intentionally static, avoiding any looping video or animation to preserve the room’s meditative tone. The scene uses CSS techniques like cover cropping, monochrome grading, and precise sizing to maintain visual consistency across devices.

Interaction is minimal but meaningful: a scroll-driven clock updates, changing from 23:58 to midnight, with a class toggle that dims the clock, pauses grain and petals, and reveals names and inscriptions. The names are dynamically generated but appear as a semantic list, accessible to screen readers. An optional sound switch produces low tones and wind effects at midnight, fading out to reinforce the solemnity. Static states are enforced for users with reduced motion preferences, ensuring the space remains contemplative and undistracted. The overall signature lies in this disciplined restraint—focusing on materiality and timed silence rather than motion or performance.

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 122 of 175, “cenotaph”):
THE CENOTAPH AT NIGHT — a war memorial, 23:58 (memorial, quietest room in the loudest wing). Aesthetic: floodlit stone against black; poppies and brass. Palette: stone white on void black, poppy red (the only color), brass plaque, candle amber. Fonts: forum (lapidary), eb-garamond (body). SIGNATURE: TWO MINUTES — at the page’s heart a clock reads 23:58; scrolling brings 00:00 and the page enforces stillness: motion stops, sound (if on) fades to wind, and for a held moment only names scroll — a wall of names (procedurally composed, ranks and ages 19, 20, 21…) rising slowly like smoke; then the bugle line renders as pure typography (no audio needed). A single poppy field (canvas petals drifting), the tradition explained across nations, “known unto God” section on the unnamed. This site has NO hero film — one still (memorial at night) and stillness; the guide explains that choice. Unforgettable: the enforced silence inside the loudest wing.

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

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.

Built through a straightforward three-stage pipeline, the site was first crafted with a focus on simplicity and clarity, using HTML, CSS, and vanilla JavaScript. A rigorous critique followed, emphasizing the importance of restraint, accessibility, and device consistency, guided by the project’s core theme of silence and reflection. Finally, the design received approval from the art director to ensure it conveyed the intended meditative tone, before deployment as an AI-generated, exhibition-level memorial.

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

undefined

Visit the live room → · Browse all 175 rooms

Previously in Wing V

• Room 119: Bomber Group 119 — The Long Night
• Room 116: Broadside — The Gun Deck, 1805
• Room 109: La Citadelle — An Anatomy of Siege, 1693

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