The Twelve — /guide

How this was made

The workflow behind this site, written down so you can run it yourself: one real business, one brand dossier, five concept builds — this one is pure type and particles.

1. 01

   Research the real business

   Trinity by Traditions is a real men's recovery residence community in South Florida, operating since 2006. We studied its website, public Facebook page, rehab.com reviews, sober-living directories, and Florida corporate records — capturing facts, the founder's story, house structure, voice, and values.

2. 02

   Write the brand dossier

   Everything distilled into one BRAND.md: verified facts, two colorways (sunset and indigo), the voice register, a copy bank, hard rules — disclosure on every page, no real member names, demo-only forms, reduced-motion support, AA contrast, noindex — and a one-paragraph brief per concept site. This build is brief 6B: “The Twelve.”

3. 03

   Generate the assets

   The sister concepts use Higgsfield for still imagery and Kling image-to-video for seamless ten-second boomerang loops. The Twelve is the outlier: no photography at all. Its only drawn asset is a 403-byte triquetra SVG — everything else is type and a particle field rendered in code, scored by one imported sound: a live house recording from Pompano Beach, mastered into the looping theme behind the corner toggle.

4. 04

   Build with Claude

   Claude (Fable 5) running inside Claude Code as workflow agents — one agent per site, each handed the dossier, a folder, and a dev port. Stack: Next.js 16 App Router, TypeScript strict, Tailwind 4, GSAP ScrollTrigger, Canvas 2D. The centerpiece: ~2,600 deterministically seeded particles easing between chapter states — turbulence, orbit, constellation — driven by a single scroll-progress value, with a gentle pointer gravity well.

5. 05

   Iterate — three passes

   Pass one: motion — easing curves, stagger timing, scrub ranges. Pass two: accessibility — a static constellation for prefers-reduced-motion, AA contrast, keyboard and focus-visible states, semantic landmarks. Pass three: performance — transform/opacity-only animation, devicePixelRatio capped at 2, color bucketing so the canvas holds 60fps.

6. 06

   Deploy

   Vercel, one project per concept site, robots set to noindex. These are portfolio demonstrations — the real Trinity by Traditions lives at trinitybytraditions.com.