How ten universes were built from one brief
This page documents the process behind the whole project, not just one site. Each individual site also has its own /guide route with direction-specific detail (typography, palette, motion technique, exact image prompts) — this page is the birds-eye view.
1. One real, canonical set of content
Every site shares the exact same facts, pulled from the real nomadicowls.com: the brand line ("Obsessively Curious. We send beautiful things to the Internet."), the three service pillars (full-stack development, digital marketing, technical SEO), the six underlying disciplines, real client work, the real contact copy, and a real blog excerpt. No team-member content was used. Design direction, headline framing, and section sequencing were free to change per site — the underlying facts were not.
2. Ten distinct art directions, one for each site
Rather than iterating on a single visual language, ten fundamentally different ones were picked up front — each with its own palette, type pairing, and a specific "signature technique" to build around, so no two sites could be mistaken for variations of the same design:
| Direction | Signature technique |
|---|---|
| Aviary — The Night Flight | 3D · WebGL · GSAP ScrollTrigger |
| Marrow — Structural Brutalism | CSS / SVG draw-on · exposed grid |
| Halcyon — Dark Editorial Luxury | Duotone photography · staggered reveals |
| Tesserae — Glass & Light | Glassmorphism · cursor-tilt parallax |
| Bazaar — Maximalist Zine | Collage · paper-texture compositing |
| Mirage — Y2K Desert Chrome | Animated gradient mesh · holographic foil |
| Ledger — Swiss Minimalism | Müller-Brockmann grid · single accent |
| Bloom — Organic Generative | Morphing SVG blobs · branch diagram |
| Reel — The Title Sequence | GSAP pinned ScrollTrigger scenes |
| Grain — Risograph & Plotter | Riso misregistration · stroke-draw SVG |
3. Original imagery, generated and curated
Where a direction called for bespoke imagery (an illustrated owl, a duotone photograph, a liquid-chrome sculpture, a pen-plotter line drawing), it was generated with Higgsfield'sgpt_image_2 model, reviewed for quality, and — where useful — passed through a background-removal step for clean compositing. Directions built on typographic or code-native techniques (WebGL particle fields, kinetic scroll sequences, strict grid systems) deliberately used little or no generated imagery, since the technique itself was the point.
4. Build: Astro, static output, real components
Each site is an independent Astro project (output: 'static') with its ownpackage.json, fonts self-hosted via @fontsource, and no server required at runtime — the performance pillar the agency itself sells is one this project had to actually practice. Motion was implemented with whatever the direction called for: Three.js and GSAP ScrollTrigger for 3D and pinned scroll sequences, plain CSS and IntersectionObserver for restrained reveal animations, SVG stroke animation for hand-drawn or plotter effects.
5. Three iteration passes, for real
Every site went through: (1) an initial build-and-bug-fix pass — layout overflow, broken reveals, cross-browser CSS issues; (2) a design refinement pass looking specifically for weak sections, missing hover states, and ways to push each site's signature technique further; and (3) a final release pass covering performance, accessibility (contrast, focus states, semantic structure,prefers-reduced-motion), and cross-viewport testing from 375px up to 1920px. Several real, non-obvious bugs were only caught in these later passes — a signature visual effect silently failing in one browser engine, a core background layer hidden by a CSS stacking bug, WCAG contrast failures on the exact CTA buttons meant to convert.
6. Deployment
Every site deploys independently to Cloudflare Pages as its own project, so each one has its own stable URL, deploy history, and can be iterated on without touching the others. This directory page is deployed the same way.
Questions about a specific direction's implementation belong on that site's own/guide page — this one is intentionally the only place that talks about the project as a whole.