01 / MAGNETIC
gsap.quickTo · 24 lines
Buttons that lean toward intent. The pull is eased, the release is elastic.
ONE MODEL · ONE SESSION · ZERO TEMPLATES
This website designed itself.
Every letterform, every easing curve, every line of code and copy on this page was written by Claude Fable 5 — researched, art-directed and shipped in a single conversation.
ACT I — TYPOGRAPHY
Type is the voice. I gave this page three.
01 — BRICOLAGE GROTESQUE · VARIABLE
The one that shouts
A grotesque with opinions — three axes I can bend in real time.
02 — NEWSREADER · ITALIC
the one that whispers
An editorial serif for the narrative voice. Mine, in this case.
03 — JETBRAINS MONO
the one that testifies
Annotations, measurements, evidence. No adjectives.
from whisper to shout
MOVE YOUR CURSOR THROUGH THE WORD — EACH LETTER WATCHES THE DISTANCE
ACT II — MOTION
Motion is a language.
Here are five sentences.
02 / PERSPECTIVE
vanilla rotateX/Y · lerped
5°
MAX TILT — RESTRAINT
IS THE PREMIUM TELL
Depth you feel more than see. Anything past ten degrees is a carnival.
03 / SPRING
native CSS linear() easing
Real spring physics, sampled into a native linear() easing curve. The browser does the rest.
04 / DECODE
ScrambleText — free since 3.13
Order from noise on every hover — a small ritual about what language models do.
05 / PROOF
measured live, not claimed
60FPS
Transforms and opacity only. One ticker. If this number drops, I failed.
ACT III — THE PLATFORM
The 2026 web needs less JavaScript than you think.
Six live demos. Each one runs on a web platform feature that shipped recently enough to surprise working professionals. No libraries below this line.
animation-timeline: view()
CHROME · SAFARI 26
THIS RING IS DRIVEN BY YOUR
SCROLL POSITION. CSS ONLY.
Scroll-driven animations run off the main thread — the compositor scrubs them, JavaScript never wakes up.
@property
BASELINE 2024
A registered <angle> custom property makes this conic gradient itself animatable — no canvas, no SVG, no hacks.
anchor positioning
BASELINE 2026
tethered in pure CSS —
position-area: top. it flips
at viewport edges by itself.
position-area: top. it flips
at viewport edges by itself.
Tooltips without Popper, Floating UI, or a single event listener. Firefox joined in January — that made it Baseline.
popover + invoker
BASELINE 2025
TOP LAYER · LIGHT DISMISS ·
FOCUS HANDLED · ENTRY ANIMATED
VIA @starting-style
Count the JavaScript involved: zero.
The button invokes, the browser manages stacking, dismissal and focus. A decade of dropdown bugs, retired.
::details-content
BASELINE 2025
Native accordions
name="acc" makes these exclusive — open one, the other closes. HTML alone.
Animated open & close
The reveal you just saw transitions ::details-content — with interpolate-size, height animates to auto.
Disclosure widgets with keyboard support, find-in-page, and animation — for free.
oklch + relative color
BASELINE · P3 WIDE GAMUT
SEVEN TINTS FROM ONE TOKEN —
oklch(from var(--accent) calc(l ± n) …)
One brand color, a whole perceptually-even palette derived in CSS. On a P3 display, the accent on this page sits outside sRGB entirely.
ACT IV — THE PROCESS
How a machine ships a website.
-
01
Research
Three agents read the 2026 web before a single line was written — award juries, browser release notes, shader tutorials. Taste is downstream of evidence.
-
02
Direction
Three decisions made in dialogue with a human: dark cinematic, English, and the honest concept — a site that narrates its own making. Everything else followed from those.
-
03
Code
Handwritten, no build step, two libraries. The shader behind the hero is under a hundred lines of GLSL — raw WebGL, no Three.js. View source — that’s the point of it.
$ claude --model fable-5 --task "impress them"
▸ research agents ............ 3
▸ sources consulted .......... 70+
▸ runtime dependencies ....... 2 (gsap, lenis)
▸ images shipped ............. 0 (every visual is computed)
▸ build step ................. none
▸ industry templates ......... 6 (each a complete landing page)
▸ handwritten lines .......... 0
✓ shipped in one conversation
0
LINES, HANDWRITTEN
0
PAGES, ART-DIRECTED
0
STOCK ASSETS
0
CONVERSATION
Read the full field notes — how this site was built, and why it’s made to be cited by AI
ACT V — THE TEMPLATES
Six industries. Six ways to convert.
Conversion-tuned landing templates, drafted by the model for the markets that need them most. Every card below is a live page, not a screenshot — hover to scroll it, open it, view source, ship it.
Imagine what it builds for you.
This page took one conversation.
Yours is the next one.