How twenty-seven sites were built in parallel.

The shape of the experiment

The brief for the showcase was a single sentence: demonstrate range. Not ten variations on one design system — ten sites that could plausibly have come from ten different studios. A warm home-services brand, a textile boutique, a luminous church and a dark one, a glassmorphic app, a fine-dining restaurant, a neon music label, a brutalist architecture studio, a wellness retreat, an aerospace startup.

Every site was designed and built end-to-end by Robbie Bacolod, working in parallel — one build track per site, each owning its brief from first concept to final deploy, plus this hub as the front door. The pipeline each track followed was identical; only the answers differed.

Concept briefs

Each site started as a written concept brief before a single pixel existed: the fictional brand, its audience, its category conventions, and — most importantly — one aesthetic bet, stated plainly enough to be falsifiable. "Luminous, airy, welcoming." "Brutalist swiss grid with scroll-driven 3D." "Dark luxury, cinematic, editorial serif."

The brief also fixed the palette (three to five named colors), the type direction (display and body families), and the signature interaction the site would be remembered for. Fixing these up front is what kept ten parallel builds from converging on the same safe middle — every later decision could be tested against the bet.

Art direction & imagery

Hero photography and texture were generated to spec via Higgsfield, art-directed to the brief's palette and mood rather than to a generic "beautiful photo." A golden-hour craftsman porch for the home-services brand; candlelit brass and linen for the restaurant; a mission-control void for the aerospace startup.

• Prompt to the palette. Naming the brand colors and light quality in the prompt makes imagery that agrees with the CSS instead of fighting it.
• Generate wide, crop in code. Oversized renders leave room for art-directed cropping at each breakpoint.
• Compress before shipping. Every image resized and recompressed to its display size — no 4 MB heroes.

Hand-coded builds

Every site is plain HTML, CSS and JavaScript — no frameworks, no site builders, no build step (the two cinematic-scroll builds from the second round are the sole exception; see below). Motion runs on GSAP (with ScrollTrigger for scroll choreography), and the concepts that earned real-time graphics use Three.js or raw WebGL shaders: the orbit visualization on the aerospace site, the glitch shader on the music label, the scroll-driven 3D on the architecture studio.

The discipline that mattered most: the flourish serves the concept, never the reverse. The wellness retreat breathes slowly; the church glows; the brutalist site barely animates at all, because stillness is its statement. Every site respects prefers-reduced-motion and degrades gracefully without JavaScript.

Three iteration passes

First builds are never final builds. Each site received three fresh-eyes passes, each a full walk of the page with a checklist:

• Pass 1 — Structure: spacing rhythm, typographic scale, hierarchy, alignment to the grid.
• Pass 2 — Surface: color balance, contrast ratios, hover and focus states, animation timing and easing.
• Pass 3 — Reality: responsive behavior 375px→1440px+, horizontal-overflow hunting, and a hunt for "template tells" — the generic patterns that make a site look machine-made.

The test at the end of every pass: would a designer who has never seen the brief guess which studio made this — or would they say "a template did"?

Headless-browser QA

Before deploy, every site went through automated checks in a headless browser via Playwright:

• Screenshot sweeps at 375, 768, 1024 and 1440px — full-page captures reviewed like proofs.
• Console audit — zero errors and zero warnings tolerated on load or during scroll.
• Overflow audit — a script comparing document.documentElement.scrollWidth to the viewport at each breakpoint; any horizontal overflow is a failed build.

The screenshots on the showcase's front page are these QA captures — the sites as the robot saw them.

Deploy

Each site deploys independently to Netlify as a static bundle — every site its own URL, plus this hub linking them together. Because everything is dependency-free static HTML, deploys are drag-and-drop simple and the sites will render identically for as long as browsers render HTML.

The second round

The showcase later grew by eleven more sites — a second round — run through the exact same pipeline: one brief per site, one agent per brief, imagery to the palette, three fresh-eyes passes, headless QA, deploy. The methodology didn't change; the briefs got harder.

• Multi-page builds. Round two includes real multi-page sites — a three-page heritage church and a three-page plumbing-and-HVAC company — with shared navigation, per-page briefs, and cross-page consistency checks added to the QA sweep.
• Two cinematic-scroll builds. KINETIC (footwear) and BurgerLab (restaurant) are scroll-scrubbed video sites — a full-screen product deconstruction driven frame-by-frame by scroll position. These two are the showcase's only Vite builds (a build step earns its keep when you're shipping scrub-synced video); everything else remains plain static HTML.
• Everything else identical. Same concept-brief discipline, same one-aesthetic-bet rule, same three passes, same console-and-overflow gates before deploy.

Do it yourself

The workflow is deliberately reproducible. To run it on your own set of sites:

• Write one concept brief per site — brand, audience, palette, type, one falsifiable aesthetic bet.
• Assign one build track per brief and run them in parallel; give every track the same pipeline and checklists, never the same design system.
• Generate imagery to the palette, not to taste, and compress it to display size.
• Build in plain HTML/CSS/JS; add GSAP or Three.js only where the concept earns it.
• Run three fresh-eyes passes per site and log what each pass changed.
• Gate deploys on headless QA: breakpoint screenshots, clean console, zero horizontal overflow.

Thirty-five sites, thirty-five guides

Every site in the showcase — grouped on the front page by the industry it serves — links to its own /guide route — the same kind of document as this one, but site-specific: its brief, its palette decisions, its signature interaction, and what its three passes changed.

• 01Anchor & Oakhome services — warm organic-modern craftsmanship
• 02Wovencarpet & flooring — tactile textile-led boutique
• 03Summitplumbing + HVAC, 3 pages — industrial-modern schematics
• 04Isabell’ssenior home care, 2 pages — founder-led warmth
• 05Truelineauto repair, 4 pages — vintage-garage-meets-modern-shop
• 06ClearPasssmog check, 4 pages — fast, clean, DMV-adjacent trust
• 07CoolFlowradiator & cooling, 4 pages — technical, ice-blue precision
• 08Harbor Lightchurch — luminous, airy, welcoming
• 09Ember Collectivechurch — bold dark urban energy
• 10Cornerstonechurch, 3 pages — heritage-classical, arch-masked reveals
• 11Union Pointchurch, 4 pages — warm documentary-community
• 12Wellspringchurch, 4 pages — bold contemporary color-block
• 13Still Waterwellness retreat — breathing calm
• 14Southpawboxing gym — fight-poster percussive energy
• 15Brightpawveterinary clinic — a vet visit that doesn’t feel clinical — sage and coral, with paw prints that light up as you scroll
• 16Brightsidedental studio — the anti-clinical clinic
• 17Smile First Dentalfamily & cosmetic dentistry — steel-blue frame, floating white panels and a live ‘open now’ chip
• 18Sunridge Dentalfamily dentistry — cocoa, lime and lavender
• 19Northlight Dentaldental practice — gallery black-and-white
• 20Nocturnefine dining — dark luxury, cinematic
• 21Altocoffee — bag-label graphic design on the web
• 22BurgerLabrestaurant — the original scroll-scrubbed deconstruction
• 23Ashford & Valelaw firm — engraved-letterhead editorial authority
• 24Meridianfintech — paper-white animated SVG dataviz
• 25Marlow Houseboutique inn — a restored harbormaster’s house on the coast — sand, driftwood, and a slow cinematic crossfade
• 26Wavelengthmessaging app — glassmorphism & gradient mesh
• 27Aphelionaerospace — mission-control HUD
• 28KINETICfootwear — cinematic scroll-scrubbed deconstruction
• 29Threadlinecustomer support saas — a shared inbox that still feels like a conversation — warm cream, terracotta, and tickets arriving live
• 30Anvil Roboticsindustrial robotics — autonomous warehouse robots, told straight — steel charcoal, safety amber, a route that draws itself in
• 31PRISM Collectivemusic label — neon glitch WebGL
• 32Monolith Studioarchitecture — brutalist swiss grid
• 33Mara Vossphotography — gallery-bone minimalism
• 34Curiochildren's museum — spring-physics playground
• 35Blue Horizonocean conservation — reef restoration made credible — deep ocean ink and coral, with impact numbers that count themselves