Everything in this showcase — 25 sites, this hub, and the page you're reading — was designed, coded, reviewed and deployed autonomously by Claude Fable 5 running in Claude Code, from a single prompt. One human wrote the brief and came back later. This page documents the exact workflow so you can reproduce it.
The prompt didn't specify pages, sections or color schemes. It set a quality bar ("extreme capabilities in web design, taste, and artistic flavor"), demanded fundamental variety (every site must differ in technique, not just palette), and mandated a review discipline: at least three fine-toothed iteration passes per site before calling it done. Constraints breed style; vagueness breeds templates.
Reusable prompt skeleton: "Build N sites that are fundamentally different from each other. For each: a distinct signature technique, palette, and typographic voice. After building each one, make three review passes — composition, complexity, polish — before moving on. Deploy everything and document the process at /guide."
Before writing any HTML, the full roster was planned in a table: number, name, concept,
signature technique, palette, and type pairing for all 25. That plan lived in a
PLAN.md file the model kept updating — along with a PROGRESS.md
status tracker, which is what let the build survive context limits and session restarts
without losing its place.
prefers-reduced-motion
respect, meta/OG tags, an inline SVG favicon in each site's palette.The core workflow, per site. This is where the quality actually comes from:
1. Write the complete v1 (all sections, motion, responsive, ~600–900 lines).
2. Serve locally: npx serve site -l 5757
3. Screenshot it headlessly: Playwright → full-page sweep,
desktop (1280×800) + mobile (375×812)
4. READ the screenshots and critique like a reviewer:
composition, overlap, contrast, spacing rhythm, dead zones
5. Fix. Re-shoot. Repeat — minimum three passes.
6. Test interactions in the same headless browser:
click buttons, type in terminals, press synth keys, drag windows.
Assert on real outcomes (a note plays, a window spawns).The screenshot step is non-negotiable. Nearly every real bug was caught by looking at pixels, not by re-reading code.
| Bug | Lesson |
|---|---|
| canvas 704px wide | An absolutely-positioned <canvas> with only
left:0;right:0 keeps its intrinsic size. Always set explicit
width:100%;height:100%. This bit twice (a grid floor and a full-screen 3D stage). |
| fonts 400 | Google Fonts variable-axis URLs fail silently as "400: Invalid selector" if a range is wrong (Anybody's width axis is 50..150, not 10..400) — and then every font in the URL falls back. Curl-verify the CSS URL before trusting it. |
| frozen compositor | A full-viewport mix-blend-mode overlay froze
screenshot capture entirely. Use pre-tinted low-opacity textures instead of blend modes
over the whole page. |
| portrait shaders | A shader composition that's perfect at 16:9 puts the hero blob behind your headline at 9:19. Pass the aspect ratio in and art-direct portrait separately. |
| inline spans | Width and height silently do nothing on inline elements —
color swatch dots need display:block. |
| Site | Signature technique |
|---|---|
| 01 Obsidian | Raymarched SDF metaballs (raw GLSL), smooth-min blending, fresnel gold shading |
| 02 Botanica | Seeded SVG vine, stroke-dashoffset driven by scroll; leaves spring in at thresholds |
| 03 Monolith | Variable font axes (wdth/wght) bound to cursor; scramble-text hover |
| 04 Aurora | FBM value-noise curtains in a fragment shader; procedural stars; SVG gauge |
| 05 Neon District | Canvas perspective grid + starfield; CRT scanlines; box-shadow pixel sprites |
| 06 Kaze | Enso stroke animation; canvas karesansui with lines deflecting around stones |
| 07 Meridian | Exposed 12-column grid; duotone SVG illustration; collapsing masthead |
| 08 Stellar | 1,900-particle system with spring-to-target morphing between text and shapes |
| 09 Prism | Glassmorphism (backdrop-filter), animated gradient mesh, live-drifting SVG chart |
| 10 Nullsector | Working terminal emulator: command registry, history, staged async output |
| 11 Rosewood | Generative Art Deco sunburst; elevator-dial scroll indicator |
| 12 Helix | Three.js: parametric helix tube, PBR + RoomEnvironment, scroll camera, live material configurator |
| 13 Doughbox | Canvas metaball goo; spring-physics hovers; live oven schedule from the clock |
| 14 Riot Fest | Per-letter kinetic type with overshoot entrances; opposing marquees |
| 15 Atelier Noir | Parametric architecture drawings that draw themselves via getTotalLength() |
| 16 Abyssal | Scroll-as-descent: depth meter, background gradient shift, animated SVG fauna |
| 17 Papercut | Generated jagged clip-path polygons for every torn edge; riso 2-color art |
| 18 Flux | Hand-rolled climate graphics: warming stripes, polar spiral, Keeling curve |
| 19 Mirage | Pure-CSS 3D: slat-masked sun, perspective-transformed animated grid floor |
| 20 Tempo | Web Audio: polyphonic osc→filter→delay graph with a live AnalyserNode oscilloscope |
| 21 Formwerk | Seeded PRNG composing posters from 4 archetypes; SVG download |
| 22 Nimbus | FBM cloud shader with lerped mood palettes; lightning uniform; canvas rain |
| 23 Codex | Generative illuminated borders; animated gold-leaf gradient text |
| 24 Errata | Draggable window manager in ~40 lines; spawning easter egg; cursor trail |
| 25 Verité | Live film grain + scratches on canvas; letterbox chrome; CSS credit roll |
The whole collection is one static folder — hub at the root, each site in a numbered
subdirectory, this guide at /guide/. Netlify serves it with zero configuration
beyond a publish directory:
netlify sites:create --name your-showcase
netlify deploy --prod --dir siteDeploy early with a placeholder to de-risk the pipeline, then keep shipping batches — by the time the last site was finished, the first seventeen had already been live for hours.
Twenty-five sites, three passes each, zero images, one very patient model.
Browse the showcase →