Behind the scene — the whole experiment

The brief, verbatim: “Build 10 websites as a way to demonstrate extreme capabilities in web design, taste, and artistic flavor… each fundamentally different… go nuts.” The builder: Claude (Fable 5), Anthropic's frontier model, working autonomously inside Claude Code. The director: Studio Inbetwn. What follows is the honest production log, so you can run the same play.

01 — The constraint that became the style

The original plan allowed for sourcing reference imagery and generating assets with image models. The session ran fully autonomously instead, so a harder rule was adopted: every pixel must be computed. No photos, no PNGs, no AI-generated images — if a site needed an aurora, it would be a fragment shader; if it needed a perfume bottle, it would be lathe-revolved geometry; if it needed art, it would be algorithms. The constraint turned out to be the strongest possible demonstration: nothing here can be bought from a template marketplace, and every effect ships in kilobytes.

02 — Ten deliberate universes

Ten sites only demonstrate range if they can't be confused for each other. Each was assigned a fictional brand, a distinct emotional register, its own typography (18 font families across the set, never reused in the same role), its own palette, and one signature technique pushed hard:

Each site's own /behind-the-scene route documents its techniques at implementation depth — shader structure, spring constants, geometry profiles — written so a motivated developer can reproduce them.

03 — The workflow

1. System first. For every site: palette as CSS custom properties, two or three typefaces with assigned roles, one easing family, one border/radius law. Taste is mostly consistency.
2. Signature technique next. The hero effect (shader, particle system, 3D scene) was built and tuned before any page content, since it sets the site's physics.
3. Content as design material. Every brand got real copywriting — a pirate radio schedule, tea menus, museum wall labels. Lorem ipsum kills a design demo faster than any CSS bug.
4. Three iteration passes per site. Pass one: rendered inspection in a real browser — console errors, layout breaks, contrast. Pass two: complexity and delight — is the signature effect pushed far enough? What's the second layer of detail? Pass three: responsiveness at 375px, reduced-motion support, performance (DPR caps, particle-count scaling, IntersectionObserver instead of scroll thrash), and copy polish.
5. Ship static. Every site is a single self-contained index.html — no build step, no framework, nothing to break. The whole lab deploys as a folder of files to Netlify.

04 — Techniques index (steal these)

• Full-screen GLSL shader from one triangle — the cheapest infinite background on the web (Halcyon).
• Damped spring — v += (target−x)·k; v *= d; x += v; — the four lines behind every organic motion here (Pop Dept., Nocturne, Ombre).
• font-variation-settings driven by input — type that physically responds (Graf, Verdant).
• stroke-dashoffset bound to scroll progress — self-drawing SVG (Verdant's vine, Nocturne's constellation cards).
• Sticky-rail horizontal scroll — native scrollbar, sideways gallery (Obsidian).
• LatheGeometry + transmission material — product-grade 3D with no modelling software (Ombre).
• SVG feTurbulence grain, CRT scanline stacks, hard-shadow sticker systems, exposed grids — texture without textures (everywhere).

05 — What this proves

A single AI model, given a direction and creative trust, designed and shipped ten award-style websites — concept, art direction, copywriting, engineering, QA, and deployment — in one sitting. That's the gap Studio Inbetwn helps traditional businesses cross: this capability pointed at your brand, your booking flow, your customer questions. The Lab is the proof; the practice is the product.