open playbook
How this Site was Built.
This entire website — design, copy, code, imagery, motion, and the 3D — was built by Claude (Fable 5) in Claude Code, directed by one brand document. Here's the exact system, free, because that's how we do things around here.
01
Write the Brand Bible first
Before one line of code, everything lived in a single markdown file: purpose, audience, offer ladder, design system, palette hex codes, banned patterns, copy seeds. The AI builds only what the document says. No document, no taste.
02
Stack the skills
Claude Code was loaded with design skills before building: an official frontend-design skill, eight GSAP skills so the motion API is never hallucinated, and component libraries used strictly as structural bases, restyled to the brand tokens.
03
Tokenize everything
One brand.config.ts holds every name, price, tier, and course. The palette lives as CSS variables. Renaming a product or changing the accent color is a one-line edit that flows through every page.
04
Generate the assets, don't stock them
Every image on this site was generated in Higgsfield (Soul 2.0) to an exact art direction: warm sunrise grade, editorial framing, the brand palette in every frame. The hero was then animated with Kling 3.0 Turbo from the chosen still into a slow cinematic push-in loop.
05
Motion is choreography, not decoration
Lenis smooth scroll, GSAP ScrollTrigger reveals, a character-split headline that rises out of the sunrise, one scroll-scrubbed hero, one 3D moment built in React Three Fiber. Everything else stays calm. Full prefers-reduced-motion support.
06
Iterate like an editor
After the build: three full passes over every page looking for design debt — spacing rhythm, type hierarchy, banned patterns, mobile thumb reach. The test on every screen: could this belong to a generic AI-built site? If yes, redesign.
ship it
Deploying to Netlify.
The repo is deploy-ready. From zero to live domain in about five minutes:
- 1Push the site folder to a GitHub repository.
- 2In Netlify: Add new site → Import an existing project → pick the repo.
- 3Netlify auto-detects Next.js — build command `next build`, and its Next runtime handles the rest. The included netlify.toml already sets this.
- 4Add your custom domain under Domain settings and point DNS (we run ours through Cloudflare: CNAME the apex/www to your Netlify site).
- 5Every git push now deploys automatically.
version three
V3: the Revenue Machine dressed like an Art Piece.
Research before pixels
We studied $50M-brand sites and best-in-class data capture before touching code, and wrote the findings into a brief every section must answer to. One-idea hero, restrained motion, proof over promises.
The logo suite, placed with intention
One mark, many colorways: lockup in the nav, monograms as marquee separators, the EST. 2024 crest in the footer, and one show moment where thousands of particles assemble the ST on scroll. Code-rendered, so it is crisp at any size.
The site learns every day
A one-tap Lane picker segments every visitor (Athlete / Creator / Brand / Fan) and adapts their next step. First-party analytics log page views, scroll depth, section views, and every CTA click. Every visitor leaves a trace; every trace teaches.
Zero-credit motion policy
The intro animation, the particle mark, and the social share card are all code: canvas particles, GSAP choreography, and a Playwright-composited OG image. Generations are the last resort, not the first move.