FINAL REEL / TECHNICAL DEBRIEF
How the
light moved.
The concept
After Action is the closing theater for Wing V. Rather than summarize twenty-four sites as a gallery of cards, it recasts them as films reaching the end of their run. The visual language comes from a nearly empty screening room: crushed cinema black, a wavering beam, registration marks, letterbox bars, and credits that keep moving after the audience has gone quiet. The sand table beneath that cinema turns imposing machinery into inspectable toys. That reduction in scale is important: the work celebrates interaction craft without celebrating harm.
The credits mechanism
The central sequence is a real continuous roll, not a CSS marquee. In main.js, refreshMetrics() maps the five reel stops, while animate() advances elapsed time and writes one GPU-friendly translate3d to #creditTrack. updateReelChrome() synchronizes the timecode, gold locator line, chapter name, and jump buttons. ensureLoop() starts frames only while the theater is visible and playing; hidden tabs stop both motion and audio. Moving links are removed from keyboard order because the complete linked register follows the theater.
WINDOW
Sand-table intercuts
Three dioramas break the credit rhythm after every eight productions. Each .terrain panel in index.html is tilted with CSS perspective, rotateX, and preserve-3d. Repeating radial gradients draw topographic contours. Small bordered elements stand up as markers through translateZ. The testudo closes ranks, the catapult traces a dashed parabolic suggestion, and the paired keys move toward a shared lock line. A second IntersectionObserver adds .active only when a miniature is inside the roll window, keeping offscreen animation inexpensive.
Projector atmosphere
The hero uses the local Wing V poster with slow scale drift, pointer parallax, sepia grading, asymmetric scrims, and an anamorphic flare. .reel-leader compresses to a gate line during the load moment; layered radial fields in .projector-dust cross the beam at different scales. The optional audio switch remains off by default. Once enabled, startProjector() builds filtered noise and a 47 Hz triangle oscillator; stopProjector() closes the context completely.
The master frame
The key visual began as a 16:9 GPT Image 2 still, then entered the Higgsfield workflow as the source frame for a matching five-second Kling 3.0 ambient loop. Both deliverables are designed to live locally under /assets/gen/aftermath/, keeping the theater free of external requests. In this pass the supplied loop.mp4 was absent, so the hero deliberately stages hero.jpg with heroDrift, pointer parallax, projector dust, flare, grading, and contrast scrims. If the loop is present, the same still serves as its poster; reduced-motion mode always returns to the unmoving poster. Every sand table, registration line, curtain, and grain layer elsewhere remains code-generated.
MASTER FRAME / 16:9 / LOCALPalette and type tokens
Anton carries titles and production names because its compressed silhouettes read like credit typography at distance. Space Mono handles reports, controls, captions, and body copy. Both are self-hosted through the project font library. Display sizes use clamp(); tracking opens on small technical labels and tightens on monumental titles.
Reproduce this
Prompt an AI coding agent to build a no-dependency cinematic credits theater in semantic HTML, CSS, and JavaScript. Ask for a time-based, pauseable transform loop with chapter navigation; a reduced-motion manual-scroll fallback; a crushed-black projector palette; compressed display type with monospace reporting; and CSS 3D dioramas intercut at deliberate intervals. Require local assets only, audio off by default, lifecycle-aware observers, visible focus states, responsive proofs at 390, 834, and 1440 pixels, and a plain-text index matching every animated credit.