← BACK TO VOLTAGE

BUILD GUIDE

How this site was concepted, art-directed and coded — end-to-end by Claude (Fable 5).

01CONCEPT

The brief: VOLTAGE, a fictional 3-night electronic music festival in the California desert (Aug 21–23, 2026). The target mood is controlled chaos — neon maximalism and rave energy, but art-directed like an OFFF or Resn festival site rather than a party flyer. Everything glows, everything moves, but the grid underneath is strict.

The design thesis: treat the site itself as a piece of festival production. The hero is a light rig (a live canvas visualizer), the lineup is signage (huge variable-width type), the schedule is a patch bay (neon-bordered stage columns), and the whole page carries film grain like haze in the air.

Palette — neon on near-black

ELECTRIC CYAN #00F0FF

HOT MAGENTA #FF2D95

LASER LIME #B6FF00

UV VIOLET #7B2BFF

NEAR-BLACK BASE #07070A

Each neon carries a role: cyan = primary action + Mainframe stage, magenta = heat + The Cathode, violet = night air + Dune Temple, laser lime = accents and timestamps only. Glows are done with layered text-shadow / box-shadow at low alpha so they read as light, not as blur soup.

Type

Archivo (variable, wght 100–900 × wdth 62–125) for display — chosen over Monoton/Rubik Glitch because a real variable font gives two live axes to animate instead of a baked-in gimmick. Headliner names literally pulse their weight to the beat grid. Space Grotesk carries body, buttons and data — techy but warm enough to read at 15px on black.

02ASSETS — GPT IMAGE 2

Three images, generated with the gpt-image-2 model (quality: high), art-directed with full prompts — subject, lighting, lens, palette, composition, and an explicit "no text, no watermark". Each was visually inspected before being accepted.

Mainstage at night with lasers

mainstage.webp

1536×1024 · HERO OF THE "SURGE" BAND + STATIC CITY CARD

"A cinematic 35mm film photograph shot from deep within a massive crowd at an outdoor desert electronic music festival mainstage at night. Thousands of raised hands and heads in pure black silhouette fill the bottom third of the frame, backlit by an enormous towering stage structure blasting fans of laser beams — electric cyan, hot magenta and acid green lasers cutting through thick atmospheric haze above the crowd. The stage is a wall of blinding light with deep UV violet wash, geometric LED truss towers on both sides, faint desert mesa ridgeline barely visible at the far edges under a near-black sky. Volumetric light shafts, lens flare, slight film grain, high contrast, colors glowing against near-black #07070A darkness. Wide-angle low perspective, epic scale, electric euphoric energy. No text, no watermark."

UV liquid abstract

uv-liquid.webp

1536×1024 · TESLA GARDEN CARD

"An abstract macro photograph of fluorescent liquid ink and smoke swirling in dark water under ultraviolet blacklight, shot on a black background. Ribbons of glowing electric cyan and hot magenta fluid collide and fold into each other, with thin filaments of acid lime green and deep violet curling off the edges, fine particles suspended like stars. High-speed studio capture, razor sharp detail in the fluid folds, deep blacks, intense neon luminance, wet glossy highlights, otherworldly and electric. Long flowing diagonal composition. No text, no watermark."

DJ silhouette against LED wall

dj-led.webp

1024×1536 · DAWN PATROL CARD

"A cinematic film photograph of a DJ in pure black silhouette behind a CDJ booth, arms raised triumphantly, seen from behind the crowd at a dark warehouse rave. Behind the DJ towers a colossal LED wall displaying glitching abstract patterns in electric cyan, hot magenta and deep UV violet, pixels visibly blooming with light. Thick haze catches magenta and cyan side lighting, a few crowd hands silhouetted at the very bottom edge of frame. Strong backlight rim glow around the DJ silhouette, film grain, high contrast, near-black shadows, vertical composition with the LED wall filling most of the frame. Electric, monumental, euphoric. No text, no watermark."

03TECHNIQUES

Canvas audio-visualizer hero (no audio required)

The hero canvas fakes a live spectrum analyzer. 96 frequency bands are driven by a 128 BPM beat grid: a kick envelope (sharp attack, exponential decay, weighted to low bands), an offbeat hi-hat envelope (weighted to high bands), a 16-beat phrase swell, and per-band sine noise. Bands are lerp-smoothed each frame so they move like a real FFT:

const kick = t => Math.exp(-5.2 * ((t % BEAT) / BEAT));
const hat  = t => Math.exp(-9 * (((t + BEAT/2) % BEAT) / BEAT)) * .7;
bands[i] += (target - bands[i]) * .28;  // FFT-style smoothing

Rendering: three rotating radial rings of bars (cyan / magenta / violet, drawn with globalCompositeOperation: "lighter" for additive chromatic mixing), a pulse ring that fires on each kick, and a mirrored bar spectrum along the bottom edge. The loop pauses via IntersectionObserver when the hero scrolls away, drops to a single static frame under prefers-reduced-motion, and removes itself entirely (leaving a CSS gradient fallback) if 2D context creation fails.

Chromatic-aberration glitch type

Every display headline is a .chroma element with its text duplicated into ::before / ::after via data-text. On hover (and on a random ambient timer) the copies split into cyan and magenta, offset in opposite directions, and are sliced by stepped clip-path: inset() keyframes — a classic RGB-split glitch with zero extra DOM.

.chroma::before { content: attr(data-text); color: var(--cyan); }
.chroma:hover::before { animation: glitch-a .72s steps(2) infinite; }
@keyframes glitch-a { 0% { clip-path: inset(0 0 62% 0); transform: translate(-3px,-2px); } … }

Variable-font axis animation

Headliner names run a continuous font-variation-settings keyframe from "wght" 750, "wdth" 112 to "wght" 900, "wdth" 120 — a 1.875s cycle, i.e. exactly 4 beats at 128 BPM, so the type breathes on the same grid as the hero visualizer. Every lineup name also distorts on hover: weight snaps to 900, width stretches to 125, and the whole word skews −6°.

The rest of the rig

04PROCESS — THREE PASSES

PASS 1 — LAYOUT INTEGRITY

Desktop + mobile (375×812) screenshot audit of every section, plus console check. Found "PULSE//WIDTH" (one unbreakable token) blowing out the viewport on both breakpoints, the hero VOLTAGE clipping at 375px, CTAs squeezed edge-to-edge, and the surge title hugging the left edge. Fixed with a fit-to-width routine that measures display type at its maximum variable-font expansion (wght 900 / wdth 125) and shrinks until it fits; stacked mobile CTAs. Elevated: neon scroll-progress bar, and recompressed all imagery 5.8 MB → 0.5 MB.

PASS 2 — MOTION & INTERACTION DEPTH

Exercised tabs, hovers, glitch timer and ticker on the improved build. Found the marquee looping into an empty seam (single sequence with a −50% loop) — now cloned at runtime for a seamless cycle. Elevated: night-coded hover colors on artist names (cyan/magenta/violet with matching glows), a pointer-tracked specular glare on the tilt cards, and a text-shadow so the hero subline stays legible over the visualizer ring.

PASS 3 — POLISH & PROOF

Final sweep: zero console errors, no horizontal scroll at 375/1280, reduced-motion paths verified (static visualizer frame, animations collapsed), focus-visible states on all interactive elements, page weight ≈0.6 MB + fonts. Elevated: a laser scanline that sweeps down the FEEL THE SURGE band, and the date chips now flash on the same 4-beat grid as the visualizer and headliner weight pulse.

05SHIP IT

The site is fully static — no build step. Deploy from the site directory:

npx wrangler pages deploy . --project-name voltage-festival

Everything (fonts aside) is self-contained: hand-written CSS/JS, three AI-generated images, one HTML file per route.