Three Competing Design Directions for Multiphasic, Built in Parallel Against One Narrative Spine
New site scaffolded for Multiphasic Corporation — a materials-state-control deep tech company — from a single five-slide deck. Rather than picking a direction on a mood board, we wrote the eight narrative beats once into markdown and had three agents build three complete sites against them concurrently: Phase Diagram (instrument readout), Lattice (the material itself), and Before the Beam (a two-column argument). Because the argument is held constant in the content layer, the comparison is purely about form. All three ship light, dark, and vibrant modes and six flare components, and the whole thing typechecks clean at 12 routes.
Michael StatonMusic Editoraugmented with Claude Code on Claude Opus 5 (1M context)Changelog — 2026-08-26 (#1)
What shipped
A new Astro Knots site at sites/multiphasic-site, holding three complete design
directions for the same company, all live at once:
| Route | Direction | Hero it argued for |
/instrument | Phase Diagram — the site as a scientific instrument readout | "From materials processing to materials programming." |
/lattice | Lattice — the site as the material itself | "Program the state of matter." |
/diptych | Before the Beam — a sustained argument in two columns | "From materials processing to materials programming." (split across the seam) |
12 routes total, including /brand-kit, /design-system, and a demo page for each
of the six flare components. astro check: 0 errors, 0 warnings.
The method: hold the argument constant, vary only the form
The usual way to compare design directions is to compare mockups that also happen to say different things, which makes the comparison unfalsifiable — you cannot tell whether you prefer the layout or the copy.
Instead the eight narrative beats were written once, into src/content/beats/*.md,
with a deliberately permissive schema. All three directions read the same collection.
The differences are entirely in the semantic token layer and the section components.
The measurable result: Phase Diagram renders 81 KB of HTML, Lattice renders 47 KB — from identical source content. Lattice's agent reported 542 words across eight full-bleed screens. That is the "manifesto, not brochure" mandate showing up as a number instead of as an adjective.
Each direction was pointed at its own hardest problem
Rather than letting three agents each build a comfortable dark-mode landing page, each brief named the specific place that direction wanted to fail:
Lattice is built on glow — so it had to survive light mode. It solved it by inverting the metaphor rather than dimming the design: in dark, order reads as light (screen blend, annealed lattice brightens); in light, order reads as ink (multiply blend, bonds darken as they anneal, glow tokens set to zero).
Before the Beam is built on a paper-vs-navy opposition — so it had to survive dark mode, where both halves want to collapse into the same darkness. It re-founded the opposition on a rule that survives every mode: the past half is the page ground, the future half departs from it, carried by texture and temperature rather than luminance.
Phase Diagram had the opposite risk — being tasteful and forgettable. Its constraint was scarcity: coral appears exactly once per screen, and four of the eight beats have none at all.
Flare: the physics is real, not decorative
EnergyLandscape— both curves are sampled from one analytic potential at the same 140 points and emitted as beziers with identical command counts, so the browser interpolates the CSSdproperty directly. The metastable-well deformation is a CSS transition — no tween library, no WebGL, no GSAP.LatticeExcitation— canvas 2D. The defective side carries a real edge dislocation using the(b/2π)·atan2displacement field, a ~11° misoriented grain, and ~5% vacancies. Verified numerically: ordered-side bond-length sd 0.0 vs ≈17px on a 64px mean. Atoms hard-capped at 620; rAF gated on IntersectionObserver andvisibilitychange.OverdesignMass— the geometry is solved, not eyeballed: given a ratio it bisects for the thickness scale making the hedge area exactlyratio ×the core, and the readout is measured off the paths actually drawn.
Every flare component honors prefers-reduced-motion with a meaningful static fallback
rather than a frozen first frame.
Two real bugs caught by verifying instead of assuming
The site was not independently deployable. The initial
pnpm addcalls resolved against the parent workspace: no site-localpnpm-lock.yaml,node_moduleshoisted to the monorepo root, and the astro-knots lockfile modified as a side effect. It built fine from inside the monorepo and would have failed on Vercel, which clones the site repo alone. Fixed by reverting the parent lockfile and reinstalling with--ignore-workspace.exclude: [".astro"]silently untyped the whole site. Added while excluding the per-agentdist-*verification dirs fromastro check. Becauseincludepulls.astro/types.d.ts— the generatedastro:contentcollection types — excluding the directory won,getCollection()degraded toany, and 13 type errors surfaced across all three variant pages at once. The three pages looked broken; the tsconfig was.
Worth remembering: an error that appears simultaneously in three independently-authored files is almost never in those three files.
Notes
The source deck is CONFIDENTIAL and lives in
context-v/extra/private/(verified gitignored). The site shipsnoindex, nofollowuntil that is lifted./is an internal chooser, not the shipping homepage. When a direction is picked it is promoted to/and the other two are retired.Nothing has been committed — the repo is initialized but has no commits and no remote.