How “After Action — Wing V Debrief Theater” Turns Credits Into a Living Exhibition

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

A final reel, not a gallery

After Action is an AI-built exhibition piece: a fictional Wing V theater that imagines how a collection of 24 web experiences might take their final bow. It is not a real company or an account of real military activity. Its conceit is a nearly empty cinema where the closing credits become the exhibit.

The signature move is the continuous, navigable credit roll, interrupted at deliberate intervals by small, three-dimensional sand-table scenes. Instead of presenting the work as a grid of cards, the room makes browsing feel like watching a final reel unfold. Its machinery is reduced to miniature forms, emphasizing interaction design rather than harm.

Inside the theater

The visual system stays close to the cinema metaphor: deep black, warm beam-white, sand amber, and credit gold. Compressed display lettering gives titles and production names a film-credit quality; monospace type handles labels, controls, and explanatory copy. Letterbox bars, registration marks, grain, and a projected beam make the browser feel framed as a screening space.

A roll with a control room

The credits are not a scrolling text illusion or a CSS marquee. JavaScript tracks elapsed time and moves one continuous track with a GPU-friendly transform. Chapter stops synchronize the time display, locator line, chapter label, and jump controls, so visitors can pause or move between sections rather than chase links as they pass.

The moving names are taken out of keyboard focus; a complete linked register after the theater provides an accessible, stationary route through the same material. Motion also respects the room’s lifecycle: animation runs while the theater is visible and playing, and pauses when the page is hidden. Reduced-motion users get a manual-scroll alternative.

Miniatures between acts

After every eight productions, the credit rhythm gives way to a CSS-built diorama. Perspective, tilted terrain panels, layered contour gradients, and raised markers create the impression of a sand table without requiring an image for each scene. The miniatures suggest a shield formation, a catapult’s arc, and two keys moving toward a shared lock.

An intersection observer activates a scene only when it enters the viewing window, avoiding needless offscreen movement. The projector mood is layered in too: a poster image drifts subtly, pointer movement adds parallax, and dust, flare, grading, and scrims shape the beam. Optional synthetic projector audio starts off and is fully stopped when disabled. In the described build, the intended ambient video was unavailable, so the theater stages the local still image with those visual effects instead; reduced motion returns to the still poster.

That distinction matters: the dioramas, frames, and atmospheric layers are code-generated, while the hero uses a locally stored image. The exhibition is designed around local assets rather than external requests.

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 125 of 175, “aftermath”):
AFTER ACTION — the Wing V debrief theater and finale. Aesthetic: end-credits cinema over a sand-table; projector dust. Palette: cinema black, projector beam white, sand-table amber, credit gold. Fonts: anton (credits display), space-mono (AAR format). SIGNATURE: THE CREDITS ROLL — a true cinematic end-credits sequence (smooth-scrolling roll, projector flicker and gate weave) crediting all 24 Wing V rooms as productions (“GHOST DIVISION — a franchise in three parts”, each a link to /sites/<slug>/) with department headers (DIRECTED BY one intelligence · EXECUTED BY gpt-5.6-sol · AUDITED AT 390/834/1440); intercut every ~8 credits with a SAND-TABLE vignette: a miniature terrain (CSS 3D tilt) where tiny unit markers replay one signature moment (the testudo, the catapult shot, the two keys) as toy-scale dioramas. Ends on a title card: “War, staged. Craft, real. — WING V / FABLE 125” then lights up. Include all 24 slugs: ghostdivision flightdeck vipers silentrunning titanworks warroom sandstorm nightrotors citadelle stationx silo9 reconwing overwatch reddwire whiteout broadside legioix sekigahara bombergroup ironclad shutterline cenotaph jamscreen vampirehour. Plus a plain-text index for accessibility. Unforgettable: the credits treating websites as films.

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

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 idea to finished room

The three-pass pipeline is build, merciless critique, then art-director certification: first establish the semantic structure and motion system, then challenge the room’s usability and performance, and finally verify the visual direction and responsive behavior. The accompanying projection guide documents the implementation choices, including the credit mechanics, miniature intercuts, accessibility provisions, and asset handling.

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

Step into the final reel

Visit After Action — Wing V Debrief Theater to explore its credit roll and sand-table interludes. Then browse all 175 rooms at the exhibition hub and compare how different AI-built experiences turn a shared format into distinct worlds.

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 122: The Cenotaph at Night | A Two-Minute Vigil

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