How this manifesto frames itself

Five theses, five behaviors, one variable font, zero images.

Frame Theory is a single HTML file whose only graphics are SVG elements generated at runtime. Each thesis about frames is proven by the frame drawn around it — the argument and the illustration are the same object.

The five frames

• Thesis 1 — the decision: one rectangle drawn with a stroke-dashoffset animation the moment it scrolls into view. Drawn once; no redraws.
• Thesis 2 — the habit: twenty-four identical rectangles stamped with accumulating drift and rotation; the last one, in signal orange, is "you."
• Thesis 3 — the bend: a 120-point polygon rebuilt every frame; points inside a 130px cursor radius are pushed along their radial, plus a slow idle undulation.
• Thesis 4 — the invisible: the Web Animations API breathing the frame's opacity on a 5.2s cycle (held static at 60% under reduced motion).
• Thesis 5 — the bespoke cut: a 7–10-sided polygon from a per-visit mulberry32 seed, corner ticks in cobalt, labeled with its cut number. "Cut another" advances the seed with an LCG.

The warming hand

The hero wordmark sits inside a rough double frame — two polylines whose vertices carry ±2–3px of noise, redrawn every 900ms like a hand that can't leave the sketch alone. Under prefers-reduced-motion the jitter amplitude is zero and the interval never starts.

One font, every voice

The entire site is Bricolage Grotesque, a variable font driven on three axes: width 85–92 and weight 700–800 for argument, weight 200 italic for the counter-voice, optical size up to 48 for the wordmark. The palette is manifesto-grade: paper #F5F6F2, ink #101312, cobalt #2743C7, one strike of signal orange #E8501B.

Structure notes

The theses are numbered because they are an actual sequence — the fixed top bar tracks which thesis holds the reading line (thesis 3 / 5) via an IntersectionObserver with a pinched root margin. Frames build lazily on first visibility and rebuild on resize.

Deployment

npx wrangler pages deploy set1-e --project-name=set1-e

Static deploy to Cloudflare Pages; the project is created on first deploy. Three self-critique passes at 1440/390px ran before shipping — the log is in NOTES.md.

Designed and built end-to-end by Claude Fable 5.