← FABLE·25 / GUIDE

How this was actually made

Twenty-five websites, one autonomous model, three review passes each. This page is the honest recipe: short enough to read, complete enough to reproduce.

01The brief

A human (Brendan) gave Claude Fable 5 one instruction: build 25 fundamentally different websites that demonstrate design range (advanced visuals, bold typography, real interactivity), then deploy them and document the process. No further art direction was given. Every concept, palette, typeface pairing, line of copy and line of code on this domain was produced by the model, working alone in a terminal (Claude Code) on a Windows machine.

02The constraints (self-imposed)

One HTML file per site. Inline CSS and JS. View source on anything; nothing is hidden behind a build step.
No stock assets, no photography, no component libraries. Every visual is procedural: WebGL/GLSL shaders, canvas simulations, generative SVG, or pure CSS. The only external dependencies are Google Fonts and a vendored copy of three.js.
A different aesthetic universe per site. Display typefaces never repeat. Light themes, dark themes, maximalism, minimalism. If two sites feel like siblings, one of them failed.
Real interactivity over decoration. A terminal you can type into, a synth you can play, ink you can paint, gravity you can bend.

03The loop, per site

Concept. Pick an aesthetic direction from a 25-slot plan (kept in a STATE.md so progress survives long sessions), chosen to maximise distance from every other site.
Build. Write the entire site in one pass: structure, copy, styles, and whatever engine it needs (fragment shader, particle sim, L-system, 3D scene).
Pass 1, look at it. The model drives a real browser (Playwright), screenshots the page at desktop size, and critiques its own work: composition, contrast, broken layouts, dead zones.
Pass 2, fix and complexify. Apply the critique: rebalance the hero, deepen the shader, fix the bug the screenshot exposed. Re-screenshot key sections and interactions.
Pass 3, the fine comb. Mobile viewport, console errors, favicons, reduced-motion fallbacks, scroll-restoration quirks, form-state restoration quirks. Ship only when clean.

The honest bit: the screenshots caught real bugs on almost every site: an invalid hex colour that silently killed a sunset, a seal stamp positioned against the wrong ancestor, words breaking mid-letter, a camera that clipped the product. Self-review isn't theatre; it's where half the quality comes from.

04The techniques, per site

Site	Core Tech	The Trick Worth Stealing
01 Solstice	Raw WebGL2 fragment shader	Aurora = domain-warped FBM noise masked into curtains; two octaves of vertical striation sell the “pleats”.
02 Grotesk™	Variable fonts + rAF loop	Per-letter `font-variation-settings` driven by cursor distance turns type into a force field.
03 Meridian	three.js, PMREM environment	The whole watch is primitives (torus bezel, box indices). Scroll lerps the camera between keyframe poses; hands read the system clock.
04 Verdant	Seeded recursive L-systems → SVG	Animate growth with `stroke-dashoffset` delays keyed to branch depth. Same seed, same plant, forever.
05 Cathode/OS	DOM terminal + CSS CRT stack	Scanlines, RGB aperture grille, vignette and flicker are four stacked overlay divs. The donut is the classic ASCII torus, 40ms ticks.
06 Folio Nº6	Pure CSS editorial layout	CSS columns with a column rule, a 5-em drop cap, and a sunset “photograph” that is one linear-gradient.
07 Singularity	Canvas 2D, 12k typed-array bodies	Central + cursor gravity with soft clamps; translucent fill instead of clear gives free motion trails.
08 Hotel Aurelia	Generated SVG ornament	Deco sunbursts are for-loops; line-drawing entrance via dasharray. The elevator needle is one CSS-transitioned rotation.
09 間 · Ma	Canvas ink physics	Brush width inversely tracks pointer speed while an “ink load” decays: slow strokes bleed, fast strokes dry out.
10 Chromadrip	SVG goo filter + gradient chrome	Liquid chrome text = hard-stop metal gradient in `background-clip:text`; goo = blur + contrast colour-matrix filter.
11 OSC–11	Web Audio API	Two detuned oscillators per voice → biquad lowpass → feedback delay; one AnalyserNode feeds both the scope and the spectrum.
12 Atlas	Hand-built SVG charts	Vintage-atlas styling does the heavy lifting: Old Standard TT, double-rule borders, and charts animated by dashoffset and transitioned radii.
13 Stanza	Variable font + scroll loop	Each word's `wght` and `opsz` track its distance from viewport centre; the page background interpolates seven night-to-dawn colours by scroll.
14 Werkstatt	Pointer-events drag system	Shapes are SVG-in-divs with pointer capture; the Shuffle button composes with opinions (one dominant form, one 45° bar, accents).
15 Ferrofluid	Metaball fragment shader	CPU moves nine attracted blobs; the GPU shades the iso-surface with a fake normal from the field gradient; chrome comes free from a procedural env map.
16 Paperback	Generated clip-paths	Torn edges are jittered polygons applied to a background layer (not the element), so tape and stamps overflow the tear.
17 Monolith	Pure CSS 3D	A box() helper builds six-faced cuboids with flat-shaded faces; eleven of them make a brutalist tower, spun by one keyframe.
18 Abyss	Scroll-linked canvas	Depth = scroll fraction × 4,000m; it drives the water gradient, sun rays, snow density, HUD physics and which creature you meet.
19 Kiosk	Canvas rain + neon CSS	Neon is layered text-shadow with a buzz keyframe that browns out; rain drops respawn as elliptical splash rings on the floor.
20 Pigment	Flow-field painting bot	240 strokes follow a sine flow field in a five-colour pigment ramp, then varnish vignette + craquelure. Seeded, so every canvas is citable.
21 Sirocco	Dune shader with time dial	Four dune ridgelines of shaped \|sin\| + FBM; the DAY uniform interpolates dawn→noon→dusk→night palettes, sun height, stars and heat-haze strength.
22 Voxelburg	three.js orthographic city	Grid layout with seeded roads, river (with bridges), parks and stacked-box buildings; cars are boxes commuting on road lanes.
23 Petrichor	Four particle systems	Rain, snow, fog and storm share one canvas loop; moods crossfade the body gradient and swap the poetic forecast.
24 Agitprop	SVG poster generator	A constrained randomiser: one diagonal band (18–32°), one witness circle, halftone cluster, slogan set on the band's angle. Constraints are the style.
25 Loom	Six classic algorithms	Flow field, truchet, phyllotaxis, interference, subdivision, circle packing, all seeded with printed seeds so favourite works are reproducible.

05Deploying (do this yourself)

Everything is static, so hosting is nearly free effort. This collection ships to Cloudflare Pages straight from a folder:

# one folder, one file per site:
dist/
  index.html            # the hub
  guide/index.html      # this page
  01-solstice/index.html … 25-loom/index.html
  vendor/three.module.min.js

# create the project once, then deploy on every change:
wrangler pages project create fable-25 --production-branch=main
wrangler pages deploy dist --project-name=fable-25

Netlify works identically (netlify deploy --dir=dist --prod). No build step, no framework, no lock-in.

06Run the same play

If you want to reproduce this experiment with your own agent, the prompt shape that works is:

“Build N websites, each fundamentally different. For each: commit to one bold aesthetic, write it as a single self-contained HTML file, then do three iteration passes: screenshot it in a real browser, critique it like a design director, and fix what you find, including on mobile. Never repeat a display typeface. No stock assets; generate every visual procedurally. Deploy the folder and write a guide explaining how.”

The three passes are the load-bearing sentence. The first draft is competent; the screenshots are where a competent site becomes a considered one.