✦ Generative Assets · The Method

How this collection is built, one site at a time.

Everything on this domain — concepts, copy, palettes, shaders, simulations, the deployment itself — is designed and built in-house by Sapience Analytics. The collection grows in themed waves. This page is the method, laid out so you can hold us to it.

The constraint that shaped everything

No image files inside any site. Every visual on every site is procedural: GLSL fragment shaders, WebGL scenes, canvas generative systems, animated SVG, and CSS gradients/3D transforms. Code-drawn visuals are sharper at every resolution, weigh almost nothing, animate natively — and prove the design is doing the work, not a stock photo.

If a website's beauty survives with zero photographs, the design is doing the work.

The pipeline

  1. Master brief. One BRIEF.md encoding the quality bar: typographic discipline, choreographed (not scattered) motion, a single "signature element" per site, accessibility and performance floors, and explicit anti-generic rules — the colour/typeface defaults most sites drift toward were named and banned.
  2. 25 concept specs. Each site got a fictional brand, an aesthetic direction, an exact palette, typeface pairings, a core technique, and its signature element — chosen so no two sites share a medium, mood, or layout system. Techniques were deliberately spread: raw GLSL, three.js physical materials, flow fields, branching-growth algorithms, CSS-only 3D, variable-font axes, WebAudio synthesis, matter-js physics.
  3. Parallel production. Sites are built concurrently, a whole wave at a time. Each starts from the brief plus its one spec and becomes a fully self-contained page (all CSS/JS inline; only Google Fonts and pinned CDN libraries external).
  4. Three iteration passes per site — mandatory, logged in each site's own guide:
    • Pass 1 · Craft — spacing rhythm, type scale, alignment, contrast, copy quality.
    • Pass 2 · Depth — enrich the signature element, add a second-read detail, refine easing and timing.
    • Pass 3 · Hardening — 375 px layouts, prefers-reduced-motion paths, focus states, DPR caps, resize handling, and removing one excess ornament.
  5. Independent QA sweep. Once a wave is built, every site is opened in a real browser, screenshotted, checked for console errors and mobile breakage, and defects are sent back for a targeted fix pass. A fourth pass, effectively.
  6. Deploy. The whole collection is one static Vercel project — no build step, no framework, just folders. vercel.json sets cleanUrls so /lumen/guide serves lumen/guide.html. One command: vercel deploy --prod.

Rules that made it good

One signature element

Each site spends its boldness in exactly one place — the thing you'd describe to a friend — and stays disciplined everywhere else.

Typography is the personality

Faces chosen per concept and pushed: variable-font axes as material, deliberate scales, weight and case doing the expressive work.

Motion is choreographed

One orchestrated load or scroll sequence beats ten hover effects. No default easing anywhere.

Copy is design material

Every fictional brand has real, specific writing. No lorem ipsum, no marketing filler — the words were designed too.

Named-and-banned defaults

The palettes and layouts most sites drift toward are listed explicitly in the brief as forbidden habits, forcing every choice to be argued from the subject.

Accessible by default

Reduced-motion paths, focus-visible states, 4.5:1 body contrast, and 375 px layouts were the floor, not the stretch goal.

Do it yourself

The whole method fits in five moves:

1. Write ONE brief that encodes taste — bans, floors, and
   "one signature element" — not just requirements.
2. Write a one-paragraph concept spec per site: brand,
   palette (hex), type pairing, core tech, signature.
3. Build sites in parallel — each a single, self-contained
   index.html + guide.html, no shared framework.
4. Force three named iteration passes (craft → depth →
   hardening) and log every one.
5. QA in a real browser, fix, then: vercel deploy --prod

Every site documents its own concept, palette, techniques, and iteration log at /<site>/guide — for example /lumen/guide.

How it compounds

The collection grows in themed waves (Wave 1 Worlds, Wave 2 Instruments — sites you can operate: a modular synth, a railway signal box, a working planimeter; Wave 4 Second Person — sites the visitor drives). After every wave, concrete lessons — design, engineering, QA, SEO — are appended to a LEARNINGS.md playbook that every new wave starts from, so each one builds on everything the previous ones taught us. The hub's preview thumbnails are honest screenshots of the live pages, regenerated by the same headless-browser pipeline that QAs them.

Commission one

This gallery is also a working portfolio. Sapience Analytics builds websites at this level for real businesses — landing pages, product sites, interactive tools — with the same craft pointed at your customers. Write to danny@sapienceanalytics.com.au or start at sapienceanalytics.com.au.