Inside the
quiet machine.

Concept spine

A drill tape, not a war game.

Vampire Hour imagines a fictional fleet air-defense exercise from inside a combat information center. The central contrast is deliberate: alarming red geometry moves toward the formation while every written call remains measured and exact.

The page moves from the deckhouse at dusk into the dark interior of the CIC, then outward again into reflection. Its story is about collective attention rather than machinery. “The calm is the weapon” becomes the emotional thesis: discipline is presented as a way to contain fear and reduce cost, never as spectacle for its own sake. All ship names, roles, timings, ranges, and outcomes are invented, and the final note makes that framing explicit.

Visual systems

How the picture moves.

Code-driven tactical display

main.js builds each hostile as an SVG group in makeTrack(). A requestAnimationFrame loop advances tracks toward the formation and tests their distance from the center. assign() transitions each raid through outer, medium, and close layers; interceptPath() draws curved, dashed responses; and resolveTrack() records the result in the voice log. Clicking the plot converts pointer coordinates with svgPoint(), allowing the injected track to enter on the selected bearing.

The last-line tracer wall

The close-defense beat switches media. tracerBurst() creates a capped set of short-lived particles on the overlaid canvas, while drawTracers() renders bright additive streaks. resizeCanvas() caches plot geometry so the frame loop never measures layout. The effect is brief by design: a violent visual interruption against calm text, then darkness. The loop stops when the page is hidden; reduced-motion visitors receive a static tactical state.

Higgsfield film pipeline

The hero begins with a GPT Image 2 deckhouse still, then the intended motion workflow carries that exact frame into Kling 3.0 through Higgsfield for a five-second ambient loop. Both deliveries stay local in /assets/gen/vampirehour/, avoiding remote requests. This package contains hero.jpg but no loop file, so styles.css uses the required fallback: a slow optical drift, pointer parallax, a breathing anamorphic flare, scanlines, grain, and layered scrims. The image is a real, dimensioned <img> inside the film gate, so it loads early and crops predictably at every viewport.

Code-generated atmosphere

Everything beyond the source film frame remains code-made. The CIC uses nested borders, faint plotting grids, radial console glows, SVG symbology, and small monospaced readouts. In the reflection chapter, updateDiscipline() maps the range control to six procedural calls: as the visitor moves toward calm, their offsets and rotations resolve into a common baseline, the signal color shifts from hostile red to friendly green, and the “PICTURE COHERENT” state locks in.

Palette + type

Cold field, sharp signals.

Sora carries the oversized editorial headlines and keeps the page human. Chivo Mono handles every track label, timestamp, legend, and procedural eyebrow. The hierarchy comes from scale and spacing, not a large family count. Body copy stays cool gray rather than pure white, while green is reserved for status, friendly symbology, and navigational cues.