01 / CONCEPT
A screen that listens back
JAMSCREEN imagines a museum-grade interface from Listening Post Kestrel on a cold near-future frontier. Radio frequency becomes physical landscape: signals form ridgelines, interference arrives like weather, and the tuning cursor becomes a flashlight in hostile terrain. The fiction focuses on interpretation, deception, and the cost of hearing through deliberate noise.
The shift moves from arrival and intercept through doctrine, incident reconstruction, deception specimens, threat register, and a final watch log.
02 / SIGNATURE SYSTEM
Building the live waterfall
The spectrogram is a real <canvas> animated by draw() in main.js. drawRow(time) builds thermal scan lines from deterministic noise, four emitter bands, and a moving trace. Rows wrap without a large history buffer; resolution is capped at twice device pixel ratio.
updateTune(clientX) maps drag position from 88–168 MHz, finds the nearest emitter, calculates strength, and reveals its library card inside the bandwidth. Arrow keys and contact presets provide equivalent tuning. One emitter array supplies every card field.
Sound, only by consent
playSignature(type) uses Web Audio oscillators and generated noise for a warble, rising radar chirp, or jammer wall. No audio file is fetched. The context is created only after the explicit AUDIO switch is armed, defaults off, and is suspended again when disabled.
03 / INTERFERENCE
Making the page get jammed
“Inject test event” adds .jamming, floods the waterfall white-hot, and reveals .jam-page-overlay. stutter shifts the console, ghost splits cyan/red afterimages, and .burnthrough restores the system. The brief event never blocks navigation.
The terrain’s bearing aperture is a second operator moment. Pointer, touch, or arrow keys update --scan-x and --scan-y; toggleScan() expands a CSS-clipped layer to expose a concealed carrier.
Local film workflow
The hero began as a GPT Image 2 still, then entered Higgsfield’s Kling 3.0 image-to-video workflow for a matching ambient loop. Both outputs are designed for local storage under /assets/gen/jamscreen/. When loop.mp4 is unavailable, the shipped hero.jpg becomes the film: push, pointer parallax, dusk grading, letterbox bars, scrims, scanlines, bearing optics, and a flare create controlled camera motion. The waterfall, terrain, glyphs, and interference remain code-generated.
scopeObserver, startDraw(), and stopDraw() pause canvas work offscreen or when hidden. Reduced motion receives a stable poster and shortened interference.
04 / VISUAL TOKENS
Palette and typography
Orbitron supplies machine-cut display type; JetBrains Mono carries signals, labels, copy, and telemetry. Tight display tracking creates mass while the mono face keeps generous line height.
05 / REPRODUCE THIS
Prompt the system, not the surface
Ask an AI agent for a fictional monitoring interface with one interaction that transforms the entire page. Specify a dominant dark field, a narrow thermal ramp, self-hosted technical type, a canvas data system with structured signal metadata, consent-gated synthesized sound, cinematic poster treatment, and a reduced-motion fallback. Require invented doctrine and archive records so every visual has narrative purpose.
“Build a responsive fictional signal-intelligence archive in pure HTML, CSS, and JavaScript. Make a live thermal waterfall the primary instrument; let users tune it by drag or keyboard to resolve invented emitters. Add one brief band-saturation event that distorts the whole interface before burn-through. Use self-hosted geometric display and mono fonts, synthesized opt-in audio, filmic grain, real narrative content, and accessibility-first motion controls.”