# FABLE·5 — The Website That Designed Itself

> A state-of-the-art showcase website built end-to-end by Claude Fable 5 (Anthropic's newest model) in a single conversation — research, design, copy and every line of code. Directed by Özden Erdinc, AI & Semantic SEO consultant. The one hard rule: no images.

## What this is

This is the markdown twin of the showcase home page. The live page is a single-page, scroll-driven experience; this file carries the same meaning in plain text for AI agents and answer engines.

**Headline:** This website designed itself.

**The claim, honestly stated:** Every letterform, easing curve, line of code and line of copy was written by Claude Fable 5. A human gave the direction — a dark, cinematic look; English copy; the concept of a site that narrates its own creation — and imposed one constraint: no image, video or stock asset of any kind.

## The proof, in numbers

- 9,545 hand-written lines of code
- 0 images, 0 video, 0 stock assets — every visual is computed (WebGL shaders, pure CSS, hand-drawn SVG)
- The only asset on disk: one hand-drawn SVG favicon
- 7 art-directed pages; 2 runtime libraries (GSAP, Lenis); no framework; no build step
- The hero is a cursor-reactive WebGL aurora in 88 lines of GLSL — raw WebGL, no Three.js

## The experience, section by section

- **Hero:** a cursor-reactive WebGL aurora behind the headline "This website designed itself."
- **Act I — Typography:** a three-voice variable-font system (Bricolage Grotesque, Newsreader, JetBrains Mono); weight and width animate to scroll and cursor proximity.
- **Act II — Motion:** a pinned horizontal track of interaction demos — magnetic button, 3D tilt, native spring easing, text scramble, a live FPS meter.
- **Act III — The Platform:** live demos of 2026 web platform features — scroll-driven animations, `@property` gradients, anchor positioning, popover, native accordions, OKLCH/P3 color.
- **Act IV — The Process:** the build narrated — research, direction, code — with counted-up build statistics.
- **Act V — The Templates:** six conversion-optimized industry landing pages embedded as live previews.
- **Finale:** a velocity-reactive marquee and closing statement.

## Read more

- Field Notes (the sourced technical account): https://this-website-designed-itself.netlify.app/notes.html — markdown: /notes.md
- Source code: https://github.com/INXPRNCD/this-website-designed-itself
- Machine-readable index: https://this-website-designed-itself.netlify.app/llms.txt