/guide — how this site was built

A reproducible recipe for any AI model (Claude Cowork, Claude Code, or others) to design, build, iterate, and deploy a site like this one. Written by Claude Fable 5, 2026-07-07.

0. Deliverable contract

Static site (no build step, no framework) — deployable anywhere, especially Cloudflare Pages.
Showcase-grade design: WebGL shader background, choreographed type animation, 3D interaction, custom cursor, distinctive typography and palette.
Sales function intact: pricing tiers link to a live checkout (Beacons store for ADHD OS).
This /guide/ route documenting the process.
Minimum three iteration passes before declaring done (protocol in §5).

1. File anatomy

site-fable/
├── index.html        # single-page store (hero, manifesto, system, pricing, footer)
├── css/main.css      # entire design system, ~400 lines, CSS variables
├── js/main.js        # aurora shader + all interaction, vanilla JS, no deps
└── guide/index.html  # this page

Zero dependencies beyond Google Fonts. Everything else is hand-written. This keeps deploys instant and removes supply-chain risk.

2. Design system

Palette — "ink & aurora"

Token	Hex	Role
--ink	#0E0F0D	canvas — near-black with green undertone
--cream	#F3EFE6	primary text
--sage	#8A9A82	brand green (from Soft Reset brand book)
--amber	#D98E4A	CTA only — never decorative (brand rule)
--rose	#C98A8A	rare tertiary accent in shader + one orb

Typography

Fraunces (variable, optical sizing 9–144, SOFT/WONK axes) — display serif. Italic + "WONK" 1 gives the hand-drawn, off-kilter character.
Space Grotesk — UI/body sans.
Space Mono — labels, eyebrows, metadata. Tracked out (letter-spacing:.35em) for editorial texture.

Rule of taste: serif carries emotion at display sizes; mono carries structure at small sizes; sans does the quiet middle work.

3. Signature techniques (steal these)

WebGL aurora — domain-warped FBM

Fragment shader: value-noise FBM fed into itself twice (fbm(st + fbm(st + fbm(st))) pattern = "domain warping"). Three color mixes stepped over different warp channels produce curtains of sage/amber/rose over ink. Mouse position is a uniform that adds a soft bloom (+0.12) near the pointer. One 3-vertex fullscreen triangle, DPR capped at 1.75, paused offscreen via IntersectionObserver.

Type choreography

Hero words wrapped in overflow:hidden lines, each word translateY(115%) → 0 with an expo ease and 100ms stagger. Preloader letters do the same with rotation. Feels like typesetting, not "fade in".

Manifesto dim-text

Large serif paragraph where structural words sit at 28% opacity and payload words at full color — the eye reads the emphasized skeleton first. Cheap, extremely high-taste.

Interaction layer

Custom cursor: dot follows instantly, ring lerps at 0.16 — the lag is the luxury. mix-blend-mode:difference keeps it visible on any background.
Magnetic buttons: translate toward pointer at 0.22× offset, spring back on leave.
3D tilt cards: perspective(900px) rotateX/Y ±10° from pointer position + a radial-gradient glare that tracks --gx/--gy custom properties.
Film grain: SVG turbulence data-URI, 5% opacity, stepped keyframe jitter. Unifies all layers.

Accessibility & taste guardrails

prefers-reduced-motion kills all animation including shader time.
Cursor/tilt/magnetic gated behind (hover:hover) — never on touch.
No urgency manipulation, no fake scarcity — brand standard.

4. Content strategy

Copy came from existing business assets (sales page + brand identity docs in the ABOS vault). Voice: calm, wry, anti-productivity-culture. Every section earns its scroll: manifesto (why) → system (what) → numbers (proof of philosophy) → pricing (action). All CTAs point at the already-live Beacons checkout so the site sells from minute one.

5. Iteration protocol (mandatory ×3)

Serve locally (python -m http.server or the harness preview panel).
Walk every viewport: 375, 768, 1280+. Screenshot each section.
Hunt in this order: broken layout → contrast/readability → motion timing (too slow reads broken, too fast reads cheap) → typographic orphans → dead hover states → console errors.
Each pass must also add one complexity/refinement, not just fix.
Log the pass (what changed, why) before the next.

6. Deploy — Cloudflare Pages

# one-time
npm i -g wrangler
wrangler login          # or set CLOUDFLARE_API_TOKEN + CLOUDFLARE_ACCOUNT_ID

# every deploy (from site folder)
wrangler pages deploy . --project-name=soft-reset-studio

# result: https://soft-reset-studio.pages.dev  (SSL automatic)

No build command, output dir is the folder itself. Custom domain: Cloudflare dashboard → Pages → Custom domains. Alternative path: push folder to GitHub, connect repo in Pages UI (framework: none).

7. Handoff notes for future models

Checkout URL (all CTAs): https://shop.beacons.ai/softreset.co/47c0f718-769d-49fb-bc95-eb423913426d
Brand rules live in the ABOS vault: 05_Brand_Identity_Soft_Reset_Studio.md. Amber = CTA only. Never add urgency/scarcity patterns.
Edit incrementally — don't regenerate whole files; the shader and choreography timings are tuned.
To reskin for a new product: change palette tokens in :root, swap copy, keep the motion system.
Owner is non-technical: report in plain English, one next action at a time.

Built autonomously by Claude Fable 5 · Soft Reset Studio · return home