MORPHÊ — Site Guide

Concept

Two chemicals, one rule, no blueprint

MORPHÊ is a fictional morphogenesis lab running a live Gray–Scott reaction–diffusion culture in real GLSL. The single job of the page is to let a visitor inoculate a petri plate with the cursor and watch a Turing pattern grow and lock in — spots, stripes, coral, mitosis — driven by nothing but two diffusing reactants. It is aimed at the design-and-science-curious: people who will believe an effect is real once they can nudge it and watch physics answer back.

Palette

Argued from the agar plate

A warm nutrient cream, one activator colour, one reaction-front colour, and a near-black ink with a green cast. Coral is bright (~3:1 on agar) so it is reserved for marks, pattern edges and the display letter — never body text. Text is carried by ink and deep teal, both clearing 4.5:1.

#F3F0E7

Agar — the nutrient plate; the neutral field pattern condenses out of.

#1E6E64

Culture teal — the activator; pattern fill, links and secondary text.

#E8593C

Coral bloom — the reaction front; edges, rules and the display Ê only.

#141A18

Ink — near-black, faintly green; all body copy on agar.

Type

A lab bench and a display face

MORPHÊ

Space Grotesk · display & body

Geometric with just enough quirk to feel like an instrument brand. It carries the giant wordmark, the section heads, and the running copy — and the circumflex on the Ê gives one distinct letterform to build the identity on.

f 0.0545 · k 0.0620

IBM Plex Mono · data & labels

Every number that is a real simulation parameter is set in mono — feed, kill, iteration, the equations — so the interface reads like a bench readout, not marketing. Eyebrows and nav share the same voice.

Techniques

How the plate is really computed

WebGL fragment shader, ping-pong FBO. Two floating-point textures hold the field; each frame reads one and writes the other, then swaps. No frame is ever stored — the plate is only the running total of every step since you seeded it.
Gray–Scott reaction–diffusion. A real activator/inhibitor system on a 512² grid (288² on small screens), 8 reaction steps per frame, integrated by explicit Euler with a nine-point Laplacian.
Float/half-float with graceful fallback. The renderer probes for a renderable FLOAT target, drops to HALF_FLOAT, and if neither is available reveals a CSS petri-dish fallback — no blank plate, ever.
Edge-lit display pass. A separate shader colours the field: teal where the activator wins, and a coral rim wherever the reaction gradient is steep, plus a soft vignette to seat it in the dish.
Interpolated seed strokes. Dragging paints a continuous line of seed, not dotted blobs, by stamping up to eight points along each pointer segment straight into the field texture.
GSAP intro + ScrollTrigger reveals; CSS-3D-free petri framing. One choreographed load, gated on document.fonts.ready, then quiet scroll reveals. The dish, rim and glass specular are pure CSS.

The signature elementThe plate is a genuine numerical simulation, not a texture or a loop. Concentrations of activator U and inhibitor V live in the red and green channels of a float texture. Each step, a fragment shader samples the eight neighbours of every cell to approximate the Laplacian, applies U − U·V² + f(1−U) and V + U·V² − (f+k)V, and writes the new concentrations to the second texture; the two then trade roles for the next step. Your cursor runs a third shader that raises V in a small disc — a seed — and diffusion carries the rest. Change f and k by a few thousandths and the same code grows a leopard, a fingerprint, a reef, or a colony that divides forever.

Iteration log

Working → finished, in three passes

Pass 1 Craft

Gave the U/V mentions in the prose a real style (deep-teal, medium weight) so they read as the same variables that appear in the equation block — the reference was previously undefined and rendering as plain ink.
Pinned the mono readout columns to a fixed ch width so the ever-growing iteration counter can no longer nudge the feed/kill values sideways as it gains digits.
Audited colour roles: confined coral to marks, pattern edges and the display Ê, and confirmed every run of text is ink or deep teal, clearing 4.5:1 on agar.

Pass 2 Depth

Rebuilt cursor seeding to interpolate along the drag path — up to eight stamps per pointer segment — so a fast stroke lays a continuous seed line instead of a dotted trail. This is the signature interaction, so it earned the enrichment.
Added a seeding state: the plate rim rings coral and the cursor changes while you paint, so the act of inoculating has weight.
Second-read detail: the culture spontaneously mutates a fresh spot roughly every 24 seconds, so it visibly keeps living between touches — and the live-tag briefly flashes the regime name each time you load one.

Pass 3 Hardening

Verified 375px: no horizontal overflow, and the wordmark, nav and controls all sit fully inside the viewport; the plate scales to 86vw and the chips wrap cleanly.
Reduced-motion now integrates 1,600 steps once to a fully-developed static pattern and never starts the animation loop; the hero content is never left hidden if scripts fail.
Removed one ornament (Chanel rule): the dish had two vignettes — the shader's and a CSS inner-shadow — so the CSS one went, leaving only the glass specular. DPR is capped at 2, the canvas resizes to the dish, and the loop pauses when the tab is hidden or the plate scrolls out of view.