The Guide · How the run was done
One brand, eight techniques, one sitting.
This bakeoff was built end-to-end by an autonomous agent run: eight websites for a real radio station, each committed to a different primary technique, deployed to one Cloudflare Pages project. This page records how — so someone else could learn from it, or beat it.
The ground rules
- Three locks only. The mark (remixable, but recognizable), the four-hue palette (burnt orange #C6491D, plum ink #3A2549, bottle green #2E5343, the creams), and the type pair (DM Serif Display + Archivo). Everything else — layout, motion, technique, tone — open.
- Real facts only. Copy is rewritten per variation, but every fact traces to the live site: Vic's story, the stream, the licensing line. No invented schedules, hosts, or history.
- Divergence by technique, not styling. Each variation had to claim a different primary mechanism before any code was written (see MANIFEST note below) — instrument, data surface, print artifact, WebGL, scroll cinema, generative canvas, motion design, pure CSS.
- No sign-off unrendered. Every site went through three or more iteration passes, each verified with headless-browser screenshots at desktop and mobile widths.
The process
One orchestrator, eight parallel builder agents, one shared brief. The orchestrator pulled the real copy and station facts from the live sockhopradio.com source, wrote a divergence manifest declaring the eight directions, generated a shared asset pool (logo remixes, period stills, textures, two 5-second films) with the Genspark CLI, then dispatched one agent per site. Each agent iterated against screenshot evidence before reporting back; the orchestrator then did its own review pass over every site at both widths, sent fixes back, and deployed the lot.
Assets
Images were drafted cheap (Z-Image Turbo for textures) and finished expensive (Nano Banana 2 with the actual mark passed as a reference image, so remixes stay on-model). Motion clips came from Kling v3, seeded with generated stills as first frames. Everything was compressed to web weight before shipping — the originals live off-site.
Generation spend for the whole run landed near 4,600 of a 6,000-credit budget: roughly 25 images (11–100 credits each depending on model and resolution) and four 5-second films (~460 each). The two most-used artifacts — the chrome sculpture and the neon sign — were both single-take logo remixes with the real mark attached as reference.
The eight, one by one
v1 · Needle Drop
Playable instrumentThe whole site is a record player. Drop the needle.
A turntable drawn entirely in SVG and CSS — platter, strobe dots, felt slipmat, counterweighted tonearm — where dragging the arm onto the 45 starts the real Live365 stream, with a Web-Audio-synthesized vinyl-crackle bed fading in underneath and the room warming while it plays. A separate portrait deck (not a shrunk landscape one) serves phones; the arm geometry was re-tuned after a pass caught the stylus physically overshooting the label. A 20-assertion headless smoke test covers drag, drop, lift, tap, and keyboard paths.
- Assets
- walnut + felt textures (Z-Image Turbo); the record label is pure SVG
- Lesson
- transform scaling doesn't shrink layout space — the deck needed absolute positioning plus a ResizeObserver, and phones deserve their own instrument
v2 · Control Room
Live data surfaceThe station as an instrument panel, fed by the real signal.
A machined spec-sheet panel on cream and plum: two analog VU meters with fast-attack/slow-decay ballistics driven by a Web Audio analyser on the actual stream (CORS-verified untainted), a broadcast log polling real now-playing history every 30 seconds, and the true crate → studio → AzuraCast → Live365 → listener signal chain as annotated SVG. Every honest failure state exists: OFF-LOG when telemetry is unreachable, MONITOR MUTED if the analyser ever goes silent — needles never fake motion.
- Assets
- none generated — the panel is 100% code; Archivo tabular numerals do the aesthetic work
- Lesson
- live data is a design material: the page is different every visit, and honesty (real listener counts, verbatim messy track tags) reads as craft
v3 · The Broadsheet
Print-era artifactA 1957 newspaper radio page you can hear.
A full broadsheet — masthead, dateline, three justified columns with drop caps, jump lines, classifieds — set strictly in two colors of ink on newsprint texture. Vic's real story runs as the feature in his own first-person words; the halftone "staff photo" is a duotone dot-screen treatment done in CSS blend modes; and the quarter-page advertisement is the working player, its border doubling like fresh ink when the stream plays. Five typeset passes chased optical centering, hung quotes, and colophon baseline alignment.
- Assets
- halftone logo print + newsprint texture (generated); gym-dance still, press-screened in CSS
- Lesson
- type-only brutalism lives or dies on compositor's details — tracked centered lines need text-indent compensation, and the ad column earns its keep by growing like a real display ad
v4 · The Gymnasium
Real-time 3DStep into the gym the night of the hop.
A live Three.js scene: reflective maple court, catenary strings of warm bulb lights, drifting dust motes, floating 45s leaning into camera, and the generated neon-sign panel standing as a free-standing brick monolith with its reflection smeared at its feet. Camera drifts with mouse parallax; fog, capped DPR, and ~25 draw calls keep it smooth. The fallback ladder is first-class: reduced-motion gets a graded still, no-WebGL gets the 5-second Kling neon film as a muted video hero.
- Assets
- neon logo remix (Nano Banana 2) + Kling neon clip + maple texture; three@0.160 pinned via importmap
- Lesson
- emissive materials must opt out of fog, physical light falloff needs 3× the intensity you expect, and headless WebGL wants --enable-unsafe-swiftshader
v5 · Five Decades
Scroll cinemaFifty years behind the mic, in one scroll — it ends live.
Six pinned chapters scrub with the wheel: a macro 45 film cold open, letterbox reveals, a prairie transmitter pan, a dark type-only spread for the December 31, 2025 sign-off, then the answer — ending on a working player with live metadata. Mobile gets true 9:16 art direction via <picture> switches to portrait recompositions, not center crops. Reduced motion collapses the film into a clean stacked photo essay. Verified at 8–12 scroll depths per pass with a CDP harness after virtual-time screenshots proved useless for scroll states.
- Assets
- six period stills + three portrait variants (Nano Banana 2) + the compressed 45-loop film (Kling)
- Lesson
- scroll cinema is an art-direction problem before an engineering one — every chapter needed its own mobile crop, and one wrong baked-in nameplate had to be cropped out of an asset
v6 · Steps
Generative canvasThe dancefloor draws itself under your feet.
A generative dance-notation engine on warm paper: numbered footprint pairs, dashed travel arcs, and rotation arrows composed into box steps, twists, promenades, and spot turns. Your pointer lays down the partner's trail; idle moments make the house improvise (with collision avoidance so figures never overlap); and when the real stream plays, a Web Audio analyser pulses the newest prints to the actual music — with an honest visual-metronome fallback if CORS ever breaks. Instruction-card content floats over the floor like a dance-school leaflet.
- Assets
- embroidered patch remix (Nano Banana 2) + paper texture; every footprint is drawn vector geometry
- Lesson
- generative systems need a seeded first paint (an empty canvas reads as broken) and a retained-object cap; HTML height attributes silently distort images under CSS-width-only rules
v7 · The Ident
Motion showpieceA five-second station ident stretched into a whole site.
The chrome-logo film breathes full-bleed behind a Saul-Bass-flavored kinetic title sequence — "TWISTING / THROUGH THE / CLASSICS" arriving as staged cards on a deterministic timeline, skippable by any input, hard-failsafed, and resolving into a composed editorial with wipe reveals, an era-word marquee, and iris-open play controls. The 5s source was extended into a 10s palindrome loop so it breathes instead of jumping. Data-saver, reduced-motion, and no-JS clients never download the video — they get the lit poster frame.
- Assets
- chrome sculpture remix (Nano Banana 2) → Kling ident film → ffmpeg palindrome + poster
- Lesson
- animation promise chains stall under headless virtual time — deterministic schedules beat awaiting animation.finished; and a generated clip that starts dark needs a palindrome, not a loop
v8 · After Midnight
Pure CSS · zero JS2 a.m. radio, built without a line of JavaScript.
A plum-dark transistor radio at whisper volume: a CSS-only tuning dial (hidden radio inputs, a glowing traveling needle, arrow-key tunable) swaps five station cards of real facts; the speaker cabinet frames an honest native audio element as the play control; the grille, dial ticks, vignette, grain, and the slowly turning 45 in the corner are all gradients. Grep-verified: no script tags, no handlers. The constraint is worn invisibly — it just feels calm.
- Assets
- only the brand mark itself, softly backlit — everything else is CSS
- Lesson
- the no-JS constraint forces honesty (a native player, presented beautifully, beats a fake button) and radio-input state machines cover more UI than people think
What transfers
- Lock little, lock hard. Three non-negotiables were enough to make eight wildly different pages read as one family. More locks would have produced eight shades of the same page.
- Declare technique before taste. Forcing each variation to claim a mechanism first (instrument / data / print / 3D / scroll / generative / motion / no-JS) prevents the usual failure where "eight designs" are one design with eight color treatments.
- Screenshots or it didn't happen. Agents grade their own work generously until you make them look at a rendered pixel at 390px wide.
- Draft cheap, finish expensive. Texture and layout studies on the 11-credit model; the mark and the heroes on the top model with the reference image attached.