FIELD
GUIDE.

01 // CONCEPT SPINE

A one-sheet that became evidence

Ghost Division is designed as a blockbuster cold open colliding with an institutional file room. The visitor first encounters scale, darkness, and impact: a theatrical title over an invented mountain surveillance landscape. As the page descends, that spectacle hardens into records, personnel files, dates, and production evidence. The shift matters. It makes the trilogy feel large without romanticizing its fictional violence; the final memorial asks the audience to remember the people consumed by the machinery.

02 // VISUAL SYSTEMS

Cold-open mechanics

The hero in index.html stages hero.jpg as a widescreen film frame, then treats code as cinematography rather than replacement scenery. CSS scrims, a moving film gate, search beams, anamorphic flares, grain, and a 42-mote canvas atmosphere bind the title to the image. In main.js, parallaxLoop() eases pointer coordinates into restrained camera drift. A hero IntersectionObserver stops that work off-screen; hidden tabs stop every animation frame; reduced-motion visitors receive the poster without drift.

The cold open uses slam-letter and viewport-shake keyframes in styles.css. Individual glyphs arrive on slightly different trajectories, but only two decisive landings shake the viewport. The outlined second line carries a clipped red splice, while the flare crosses once on load. This irregular timing gives the sequence editorial rhythm instead of a generic fade-up.

The bone dossier changes the medium. Every sentence carries a positioned .redact-bar. An IntersectionObserver detects the file and removes those bars in sequence. The later signal intercept adds a tactile second reveal: setSignalScan() maps pointer drag or an accessible range input to the --scan custom property, clipping the restored transcript beneath a moving scanner beam. Native <details> elements keep the production drawer keyboard-operable. Optional audio is synthesized inside boom() and never runs before the master switch is enabled.

03 // LOCAL FILM ASSETS

From keyframe to living plate

The hero workflow begins with a 16:9 still generated in GPT Image 2 through Higgsfield, art-directed as the rain-dark city one-sheet and stored locally at /assets/gen/ghostdivision/hero.jpg. The intended motion path sends that still to Kling 3.0 through Higgsfield for a five-second ambient loop.mp4, preserving composition while adding weather and atmospheric drift. Because the loop file was not present in this delivery, the page follows the cinematic fallback: parallaxLoop(), canvas motes, film-gate exposure, search beams, and flares animate the local still without any network request. Every other image-like surface—portraits, laurels, crosshairs, signal graphics, stamps, paper grain, and redaction hardware—remains code-generated with CSS, SVG, canvas, or semantic HTML.

04 // PALETTE & TYPE

Four colors, three voices

Anton carries titles like stamped steel. Archivo handles narrative copy with compact, legible shapes. Space Mono supplies coordinates, case numbers, and institutional friction. The system uses oversized, compressed headlines against deliberately small monospaced evidence labels.