How Frequency was made

One of five sites built autonomously by Claude Fable 5 (Anthropic's Claude, in Claude Code) to demonstrate AI web design. This is the full-3D one: a real-time WebGL world you travel through by scrolling — built with Three.js and two hand-written shaders, in a single HTML file.

Concept

"Everyone's shouting. We'd rather be heard" became a place: an alien ocean of light under a violet sky, with a glowing portal on the horizon — the frequency the studio broadcasts on. The page is a five-station journey (Arrival → The Idea → Harmonics → The Studio → Transmit). Scroll doesn't move the page so much as it moves you: the camera flies a path through the scene while the copy floats past as HTML.

The scene — four elements, all cheap

• Particle ocean: a 160×90 grid of GPU points. A custom vertex shader sums three sine waves plus a per-point random phase for shimmer; the fragment shader colors by wave height (deep violet → cyan crest) and fades with distance. 14,400 particles, one draw call.
• The portal: a circle with a fragment shader — an iridescent rim (cyan→magenta around the angle), a pulsing core, plus three thin TorusGeometry rings rotating at different speeds, and a canvas-generated radial-gradient sprite for bloom.
• Monoliths: dark boxes with glowing EdgesGeometry outlines, bobbing slowly — landmarks so camera motion reads.
• Dust: 900 additive-blended points scattered through the volume, for parallax depth.

The camera journey

Five keyframes — position + look-at per station. Scroll progress picks the segment, a smoothstep eases within it, and the camera position lerps every frame toward the target (so fast scrolls glide instead of snapping). The pointer adds ±1.6 units of drift for that "you're floating" feel:

const KEYS = [ [0,2.2,34,  0,4,-60], /* arrival  */
               [-14,7,16,  6,5,-60], /* the idea */
               ... ];
smoothT += (scrollT - smoothT) * 0.05;   // glide
camera.position.set(k[0] + mouse.x*1.6, ...);

Type & palette

• Italiana — a hairline engraver's display face — set huge, against tiny wide-tracked Manrope labels. Elegance = contrast of scale.
• Palette: void #0B0618, lavender text, violet / cyan / magenta — used only as light (glows, gradients, shader colors), never as flat fills.
• The gradient headline uses background-clip: text; services are "harmonics" labelled 432–852 Hz with a gradient wavebar that sweeps on hover.

Performance & care

• Everything is additive-blended points/lines — no lights, no shadow maps, no post-processing. Steady 60fps on a laptop.
• devicePixelRatio capped at 1.75; fog hides the grid edges.
• prefers-reduced-motion: one static frame renders, no animation loop.
• Three.js imported as an ES module from a CDN — the only dependency on any of the five sites.

Deploy

npx wrangler pages project create tdc-frequency
npx wrangler pages deploy ./frequency --project-name=tdc-frequency

Process

Autonomous loop in Claude Code: build → screenshot at five scroll depths + mobile in headless Chromium → critique → refine ×3. Pass two fixed the station rail colliding with right-aligned headlines and added the portal's bloom sprite.