GUIDE / MS·26 / OPEN METHOD
How to grow
an alphabet.
Morpho Signal is built as an instrument, not a background effect. This guide explains the concept, the field algorithm, the variable type system and every fallback needed to keep the experiment humane.
Enter the chamberCONCEPT / ONE OPERABLE METAPHOR
The organism is the interface.
The project begins with one literal proposition: letters are grown under conditions. That makes the hero a culture chamber with verbs a visitor can understand. Field releases the colony. Divide separates it. Assemble calls the cells into a glyph.
Every later section explains one consequence of that proposition. The variable font shows phenotype. The register shows stable specimens. The fictional licence reframes distribution as culture stewardship. No decorative feature grid is needed.
GPT-5.6 Ultra shaped the concept, art direction and copy, implemented the Canvas 2D and variable-type systems, then ran the three design-review passes. No image-generation model, stock image or external visual asset was used; the shipped artwork is code-native.
CANVAS 2D / REACTION-DIFFUSION INSPIRED
A field, not a physics claim.
The engine borrows the visual language of reaction-diffusion systems, but it does not simulate the Gray-Scott equations. Field motion combines three spatial waves into a curl-like vector. Divide adds thresholded outward pulses and sulfur flashes. Assemble renders a glyph into a private half-resolution canvas, thins its opaque sample points and maps one target to each cell.
The renderer batches a translucent neighbour topology before flat membrane and nucleus passes. Device pixel ratio is capped at 1.6; the adaptive colony is capped at 600 cells on larger chambers and 280 on mobile. A debounced resize resamples the glyph. Intersection and page-visibility observers stop the loop when nobody can see it.
FIELD velocity += curl(x, y, time)
DIVIDE velocity += spring(two_lobes[index % 2])
ASSEMBLE velocity += spring(glyph_targets[index])
EVERYWHERE velocity += pointer_repulsion
FRAME integrate · contain · draw membrane · draw nucleusRECURSIVE VARIABLE / ONE GENOME
The interface mutates with the culture.
FIELDsoft · casual · oblique
DIVIDEhybrid · tense · weighted
ASSEMBLEmono · rational · upright
Recursive is the only font family in the site. Its MONO, CASL, slnt, wght and CRSV axes provide several phenotypes from one source. That is both a performance decision and the typographic expression of morphogenesis.
The engine writes its current state to the document. CSS responds with a locked axis recipe, so the hero thesis tightens at the same moment the cells assemble. Body copy remains a calm low-casual sans. Instrument data turns fully monospaced.
The shipped 216KB WOFF2 is a project-specific subset generated with fontTools pyftsubset from Fontsource’s recursive-latin-full-normal.woff2. It preserves every variable axis and the site’s ASCII, punctuation, arrow and symbol glyphs. font-display: optional lets a slow connection paint the composition-safe system fallback immediately; normal connections retain the intended variable phenotypes.
FALLBACKS / EQUAL DIGNITY
Stillness is a designed state.
No animation loop starts. The chamber shows a stable assembled M, controls change state without interpolation, and all text remains present.
The canvas stays transparent and reveals an authored HTML/CSS specimen with material cells behind it. Navigation, copy and every route remain native.
Canvas 2D is the primary route. There is no video, shader, external image, model or third-party request to fail.
Every control is at least 44px. Buttons duplicate keyboard actions. Live regions announce state, glyph and pause changes without relying on colour.
QUALITY / THREE PASSES
Rendered evidence decides.
Pass 1Defects, interactions and a separate mobile composition.
Pass 2A real depth or tactility hypothesis, implemented and compared.
Pass 3Cohesion, rhythm and the removal of anything merely busy.
Playwright checks 320, 390, 768 and 1440 pixels. The evidence manifest records the target, viewport, state, bounding box and content hash for each screenshot. Axe must report zero violations. Production Lighthouse runs three times per mobile and desktop profile.
The design gate remains separate from technical QA. Each primary beat is scored for composition, colour-energy, typography, illustration and motion. Signature ambition is also scored for memorability, sector specificity, materiality, compositional richness and curated interaction.
DELIVERY / CLOUDFLARE PAGES
Ship the verified build, not the workspace.
The site is built locally into Astro’s static dist/ directory, then uploaded to one dedicated Cloudflare Pages project. The project-name check happens before creation so no existing property is mutated. The production branch is explicit, and the git commit is attached to the deployment for traceability.
After the alias resolves, the same read-only Playwright contract runs against production. Lighthouse then audits the home, guide and prompt register three times in both mobile and desktop profiles. A deployment is accepted only when the worst run remains above the locked thresholds.
npm run build
npx wrangler pages project create morpho-signal-ultra --production-branch main
npx wrangler pages deploy dist --project-name morpho-signal-ultra --branch main
QA_BASE_URL=https://morpho-signal-ultra.pages.dev npm run qa:live
QA_BASE_URL=https://morpho-signal-ultra.pages.dev npm run qa:lighthouseLICENSING / FICTIONAL BY DESIGN
A protocol, not a checkout.
The culture licence on the homepage is narrative content. No font is sold, no agreement is formed and no form asks for personal data. Its purpose is to show how a future institution-facing release might frame exhibition, modification and contribution.
The reusable method is real: choose one operable metaphor, make runtime claims observable, build equivalent fallbacks before polish, and publish the prompts that shaped the work.
Read every public prompt