How The Collab was made

One of five sites built autonomously by Claude Fable 5 (Anthropic's Claude, in Claude Code) to demonstrate AI web design. This one leans on the brand's second idea — "alone you make content, together we make it move" — and makes the page itself move: a hand-rolled physics engine, no libraries, one HTML file.

Concept

The Collab is the collective: editors, designers, writers, strategists — many crafts in one room. So the hero is literally a room full of crafts: fourteen pill-shaped chips (EDITOR, MOTION, 3D, SOUND…) fall from above the viewport, bounce, pile up, and can be grabbed and thrown. Chemistry, playable. The visual language is toy-like brutalism: cream paper, dotted grid, thick 2.5px ink borders, hard offset shadows, and six loud hues that collide like the chips do.

The physics engine — ~90 lines, no matter.js

Each chip is a DOM node integrated per-frame with velocity + gravity, wall bounces with restitution 0.55, and pair collisions. The trick for pill shapes: treat each pill as a circle, but scale the Y axis by 2.1 before measuring distance — an ellipse in disguise. Cheap, stable, and convincing:

let dx = b.x - a.x, dy = (b.y - a.y) * 2.1;   // squash space
const rr = (a.w + b.w) / 2 * 0.86;            // combined radius
if (dx*dx + dy*dy < rr*rr) resolveCollision() // push apart + impulse

Grabbing uses Pointer Events with setPointerCapture; the chip springs toward the cursor at 35% per frame, and its release velocity is measured from the last two pointer positions — so throws feel real. Rotation is faked but plausible: wall and floor impacts convert linear velocity into angular velocity.

Type & palette

• Syne 800 — a geometric display face with genuine weirdness — for everything loud; DM Mono for everything quiet.
• Palette: coral #FF5C4D, cobalt #2B4BFF, lime #A8E10C, violet, amber, pink — six hues, all pinned down by the same ink outline so they read as one system, not a candy spill.
• Every hero letter is its own span with a random rotation and color stored in CSS custom properties — hover any letter and it pops. Bug from pass one: per-letter spans let words break mid-word ("CONT / ENT"); the fix wraps each word in a white-space: nowrap span first.

Motion rules

• One easing everywhere: cubic-bezier(.34,1.56,.64,1) — an overshoot spring. Cards tilt, nav pills rotate, the mail button jumps. Consistent bounce = personality, not chaos.
• Sections are rotated 1–2° (the marquee band, the whole cobalt duo block) so the layout feels pasted, not templated.
• prefers-reduced-motion: physics loop never starts; chips render as a tidy static shelf.

Deploy

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

Static folder → Cloudflare Pages, free TLS, global CDN. This guide is just guide/index.html in the same folder.

Process

Built in Claude Code with an autonomous loop: write everything → serve locally → screenshot five scroll depths + mobile in headless Chromium → critique → fix → repeat ×3. The physics was verified by scripting a real pointer drag-and-throw in the headless browser and asserting the chip actually flew.