UHF 51 · Engineering Department · Page P500
Broadcast
Guide
How this transmission was built — the CRT fiction, the shader that carries it, and the pipeline that pressed six records that never existed. Written by the engineer on duty. There is no engineer on duty.
Concept
CREATIVE DIRECTIONMidnight Circuit is a synthwave record label broadcasting from an abandoned TV station — 1986-that-never-ended. The design rule that governs every decision: the site is not about a broadcast, the site is the broadcast. You don't scroll a page; you're tuned to UHF 51. Sections are channels. Navigation is a channel change, complete with a static burst that covers the cut. The page powers on like a tube warming up, and the sign-off at the bottom admits what the whole site has been implying: nobody has been running the station for forty years, and the tapes keep arriving anyway.
Everything ships in one fiction: releases carry catalog numbers (MC-001 → MC-013), the schedule has an unexplained 03:33 carrier-only slot, and the third artist on the roster — Test Pattern — has never been seen, only catalogued. The haunted-broadcast premise is played completely straight; no winks, no "retro vibes" hedging. That commitment is the aesthetic.
The counterweight is discipline: CRT damage is atmosphere, never interference. Text is real DOM,
never distorted. Luminance flicker stays under 3%. Every glitch is gated behind
prefers-reduced-motion. A haunted TV you can actually read.
Palette & Type
SPECIMENMidnight
Monoton — a single-weight neon-tube display face. Used exactly three times on the main broadcast (wordmark, channel numerals, sign-off) so each appearance stays an event. Its parallel strokes already look like scanlines; the CRT layer just agrees with it.
Chakra Petch Light 300 — schedule notes and lore
Chakra Petch Medium 500 — body, tracklists, teletext
Chakra Petch Bold 700 — channel titles
Chakra Petch carries everything else: a squared, technical Thai-Latin face that reads like a broadcast character generator without collapsing into pixel-font cliché.
The CRT Layer
SIGNATURE TECHNIQUEThe obvious way to fake a CRT is to render the whole page into a texture and push it through a barrel-distortion shader. It's also the wrong way: your text gets resampled to mush, accessibility dies, and selection/focus break. Midnight Circuit instead keeps the DOM pristine and renders a WebGL artifact pass over it — a fixed, pointer-transparent canvas whose fragment shader composites everything a dying tube would add to a clean signal:
- Scanlines — one dark line every 3 device pixels, computed from
gl_FragCoordso they can never alias against CSS pixels. That device-pixel alignment is the whole moiré-avoidance story: the pattern is generated at the exact resolution it's displayed at, so there is no resampling step for interference to live in. - Curvature — artifacts are sampled through barrel-space coordinates, so scanlines bow and corners shade like glass, while the DOM behind stays flat and crisp.
- Phosphor grain & roll — hash noise at ±2.5% luminance (under the 3% flicker budget) and a faint bright band that rolls down every nine seconds.
- The glitch uniform — one float, 0 → 1, that floods the screen with tearing static.
The core of the fragment shader:
// artifacts follow the tube's curvature — DOM stays flat
vec2 c = uv * 2.0 - 1.0;
float r2 = dot(c, c);
vec2 bc = c * (1.0 + 0.055 * r2); // barrel space
vec2 buv = bc * 0.5 + 0.5;
// scanlines: 1 dark line per 3 DEVICE px → moiré-free
float sy = buv.y * uRes.y;
float scan = step(mod(sy, 3.0), 1.0);
float scanA = scan * 0.10;
// channel-change static: banded tearing + chroma noise
float rowBand = hash(vec2(floor(buv.y * 22.0), floor(t * 28.0)));
float tear = step(0.7, rowBand);
vec2 sp = frag;
sp.x += tear * (rowBand - 0.5) * 90.0 * uGlitch;
float n = hash(sp * 0.71 + vec2(fract(t*1.3)*137.0, fract(t*0.9)*91.0));
float staticA = uGlitch * clamp(0.5 + 0.5 * tear, 0.0, 1.0);
A channel change is a five-step GSAP timeline on that one uniform: glitch to 1 in 110 ms —
and in the two frames where static covers the screen, the page performs an instant
scrollTo(). No smooth scrolling anywhere: the cut happens under the noise, exactly like
a real tuner. Then the uniform steps back down through two quantized after-spikes
(steps() easing — glitches are allowed to be cheap, they're broadcast damage) while the
OSD stamps "CH 04 ARTISTS" in the corner.
Under prefers-reduced-motion the shader renders exactly one motionless frame — scanlines
and vignette, no grain, no roll, no glitches — and channel changes become plain jumps. The fiction
survives; the motion doesn't.
Asset Pipeline
TAPE ARCHIVE
Nine images, all generated through the Higgsfield MCP (≈20 credits), optimized to WebP with the
repo's optimg tool. The six sleeves are Nano Banana Pro (it holds written
titles); the three portraits are Soul 2 (it holds 35mm skin). Series consistency came from
reference-chaining: the flagship sleeve (Terminal Romance) was generated first, then
passed as a reference image to every other sleeve with the instruction "same series style,
completely different composition." One visual language, six different records.