Seven Demo Sites, Zero Shared Template

The Problem#

The /examples gallery on valkyrienexus.com holds seven live demo sites for fictional businesses: a plumber, a wood-fired restaurant, a boutique, a CNC machine shop, a suppressor brand, a dental practice, and a law firm. Their job is to show prospects what I can build for their vertical. The failure mode is obvious the moment you browse most agency portfolios -- one template, seven palettes, and every "different" site has the same hero, the same card grid, the same border radius. A prospect can smell that, and it undercuts the pitch.

So the rule for the showcase was: no shared template, no shared visual identity, and the differences have to run deeper than color.

Start From the Emotional Job, Not a Layout#

Each demo starts from what the visitor needs to feel, because that is different for every business. Someone with water on the floor needs trust and a phone number; Rivertown Plumbing is light, blue, phone-forward, and built to turn a panicked search into a booked call. A restaurant has to sell appetite; Stoke is dark and ember-lit, photography-forward, reservations-driven. A law firm sells gravitas; Holloway & Pierce is deep navy and brass, serif headings, authority-forward and consultation-driven. A machine shop wins B2B quotes with precision, so Meridian gets a blueprint grid and monospace specs. A dental practice has to calm nervous searchers, so Cedar & Main is soft and reassuring with a one-minute booking flow.

Once the feeling is named, the layout, type, and motion decisions mostly make themselves -- and they make themselves differently each time.

Demo	Vertical	Feeling	Identity in one line
Rivertown	Plumbing & heating	Trust, urgency	Light blues, 12px cards, phone-forward
Stoke	Restaurant	Appetite	Dark, ember palette, photography-forward
Marlowe & Co.	Boutique retail	Curated calm	Off-white + ink + olive, 2px radius, airy
Meridian	Machine shop	Precision	Blueprint grid, JetBrains Mono, safety orange
Nightjar	Suppressor brand	Engineered quiet	Monochrome dark, spec cards, decibel visual
Cedar & Main	Dental practice	Reassurance	Soft teal, 14px radius, pill buttons
Holloway & Pierce	Law firm	Gravitas	Deep navy + brass, serif, 4px radius

The Differences Are Tokenized, Not Cosmetic#

Every demo defines its own design tokens on its own root class, and the contrasts are deliberate:

• Radius is a personality dial. Marlowe, the editorial boutique, runs at 2px -- crisp, print-like. Holloway sits at a restrained 4px. Rivertown locks a shape system of 12px cards, 8px interactive elements, full pills. Cedar & Main goes 14px with fully pill buttons, because rounded reads as gentle and a dental site needs gentle.
• Type carries the vertical. Holloway's headings are serif via a system stack (Iowan Old Style, Palatino, Georgia) with thin brass rules; Meridian's specs are JetBrains Mono on paper-white and graphite with safety orange; the rest run Inter at weights from Marlowe's airy 400 headings to Cedar & Main's friendly 800.
• Palette per vertical, with the defaults refused. Marlowe's comment in the CSS says it outright: deliberately NOT the AI-default beige/brass/espresso artisan palette -- it is off-white, ink, and a single olive accent instead. Navy belongs to Holloway alone; Rivertown's blues are a different hue family; Stoke owns the ember range; Nightjar is monochrome dark.

The scoping is mechanical, not honor-system: every class is prefixed (rt-, hp-, mw-, ms-, cm-), all tokens live on the demo's root element, and each demo resets the global brand heading rule. Nothing leaks in from the Valkyrie identity and nothing leaks out between demos.

One Signature Moment Each#

Every demo gets exactly one interactive moment that belongs to its business and would make no sense on any of the others. Rivertown's hero is a water surface -- soft aqua ripples expand ambiently and follow the cursor. Stoke's hero is drifting embers rising and flickering with additive blending, and the cursor stirs up a few extra. Nightjar's is the one I am proudest of conceptually: an 84-bar soundwave that calms from loud to suppressed as it scrolls into view, visualizing the brand line "Engineered quiet." Holloway's results band counts its case numbers up on scroll; Cedar & Main's is the booking flow itself.

One moment, not five. A single memorable interaction reads as craft; three competing animations read as a theme demo.

The Same Engineering Rules Under Every Moment#

Distinctive on the surface, identical in discipline underneath. Each canvas moment follows the same contract, and you can diff the three hero components to verify it:

• All drawing happens on a <canvas> via requestAnimationFrame, so pointer movement never re-renders the Solid tree.
• devicePixelRatio is capped at 2 -- retina sharpness without quadrupling the pixel budget on high-density displays.
• prefers-reduced-motion paints a single static frame and never starts the loop. The page still looks designed; it just does not move.
• pointer-events: none on the canvas, so the animation can never block the CTAs sitting above it -- the thing the page actually exists for.
• onMount/onCleanup pairs tear down the loop and the resize listeners, because these demos mount and unmount inside one SPA.
• Everything is a bundled module with no inline script, so the heroes survive the strict nonce-based CSP the rest of the site ships.

What Stays Constant#

The variation is confined to the layer prospects can see. Underneath, all seven demos share one stack and one set of habits: SolidStart, scoped plain CSS with custom properties (no Tailwind), WebP thumbnails at 1280×815 in the gallery, the reduced-motion fallbacks above, and a common registry (demos.ts) plus a shared demo bar that openly discloses each site as a fictional demo and keeps them noindexed with 555 numbers throughout. New demo, same checklist: pick the emotional job, mint a prefix and a token block, design one signature moment, inherit the engineering rules for free.

That split is the whole trick. Distinctiveness lives in tokens and one canvas component per demo, so it costs almost nothing to maintain. The expensive parts -- performance, accessibility, CSP, deployment -- are written once.

What I Would Do Differently#

The discipline emerged over the seven builds rather than preceding them; the canvas contract (DPR cap, reduced-motion frame, cleanup, pointer-events) is currently a convention you can read in three files' comments, not a shared utility. An eighth demo copies a hero and edits it, which has worked, but a small useCanvasLoop helper would make the contract impossible to forget rather than merely easy to follow. I would also write the "name the emotional job first" step down as an actual brief template -- it lived in my head for the first few demos, and the later ones (Cedar & Main, Holloway) came out stronger partly because that question got asked explicitly before any CSS was written.