← 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 — type as 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.

Sites 11–25 are in the atelier; this table grows as they land.

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.