The Guide
A concept build for Trinity by Traditions — every step of the workflow, written down so you can reproduce it: research a real business, distill it into a dossier, generate the assets, let an agent build, iterate three times, ship.
01
Everything starts with what is true. We read trinitybytraditions.com end to end, plus rehab.com, soberhousedirectory.com, sunbiz.org, and the public Facebook page. Out of it came the facts — since 2006, two houses, five meetings weekly — the founder's story, the voice, and the palette, lifted from their own golden-hour hero photography.
02
One markdown file — BRAND.md — became the single source of truth: business facts, existing visual identity, voice rules, a copy bank, hard ethical rules (disclosure on every page, no real member names, demo-only forms, respectful recovery-appropriate imagery, reduced-motion honored, noindex), and a per-site creative brief. Every downstream agent reads only this file.
03
Photography was generated with Higgsfield image models against the dossier's art direction — dawn ocean, the two houses, palms at dusk, men on the shoreline seen from behind (faces avoided by design, so no generated person stands in for a real resident). Kling animated a still into the seamless ten-second shoreline boomerang loop. The soundtrack was mastered from the client's own Pompano Beach recording: denoise, EQ, loudness-normalize, loop fades.
04
Claude (Fable 5) ran inside Claude Code as a workflow agent with the dossier as its brief. The stack: Next.js 16 App Router, TypeScript strict, Tailwind 4, GSAP ScrollTrigger for scroll choreography, React Three Fiber with a hand-written GLSL ocean-dawn shader, a trefoil torus knot (p=2, q=3 — the triquetra in 3D), and bloom postprocessing. The dawn lighting rig is built from lightformers, so nothing is fetched from a CDN.
05
Pass one: typography and rhythm — fluid clamp() scale, Fraunces optical axes, spacing discipline. Pass two: motion and access — every animation behind prefers-reduced-motion, AA contrast, keyboard paths, semantic landmarks. Pass three: performance — transform/opacity-only animation, capped device pixel ratio, the shader canvas sleeps when scrolled away.
06
Shipped to Vercel as its own project — one concept, one URL. Marked noindex because this is a portfolio demonstration, not the official site. The disclosure footer travels on every page.
Under the hood
Layered value-noise waves with perspective compression, a molten sun disc whose overbright core feeds the bloom pass, and a sky that breathes on a 50-second cycle. Falls back to a still dawn photograph under reduced motion or without WebGL.
THREE.TorusKnotGeometry with p=2, q=3 is mathematically a trefoil — the brand's trinity knot — rendered in brushed gold with mouse parallax and a slow drift.
The page background lerps from near-black ink to deep dawn amber as you descend — the whole document slowly reaches morning.
The mission warms line by line; the founder's credo assembles word by word. Both are scroll-linked (scrubbed), not merely scroll-triggered.
The mastered theme fades in at first interaction if autoplay is blocked, remembers an explicit mute for the session, and never re-forces sound.
The vesica lenses of the triquetra draw themselves on entrance via stroke-dashoffset, then ignite one lens per pillar as you read.
The hard rules
This subject is real people in recovery. The dossier fixed these rules before a pixel was drawn, and every one of the five concept sites obeys them:
now see it move