How to grow
a living interface.

Concept

The laboratory as an instrument

Culture No. 46 imagines a microscopy department where chemical patterns are treated as specimens with temperaments, histories, and names. The experience deliberately sits between a 1920s brass microscope and a contemporary computational laboratory. Cream paper, ruled ledger lines, clipped specimen labels, and small monospaced annotations give every interaction an evidentiary quality. The live dish is not decorative: it makes the central proposition—patterns are alive—something the visitor can test with their own hand.

The composition moves from wonder to evidence. A monumental editorial opening introduces the premise; the dark growth chamber concentrates attention; the journal, atlas, incubation record, and protocol progressively classify what was just experienced.

Visual + computational technique

Reaction, diffusion, and stain

In main.js, makeField() creates paired Float32Array grids for concentrations A and B. stepField() applies a nine-point Laplacian, then the Gray–Scott feed, kill, and reaction terms. Five simulation steps run per animation frame before paintField() maps concentration differences into a three-stop stain palette. Coral, labyrinth, and mitosis are real parameter changes, not prerecorded loops.

inoculate() converts pointer coordinates into grid coordinates and deposits reagent B in a circular area. A CSS-built pipette follows precise pointers and emits a spreading drop ring; touch visitors simply drag the glass. The focus dial sets --focus-blur and --focus-contrast, while plus/minus controls keep the instrument keyboard-friendly. The main loop checks document.hidden; reduced-motion visitors receive a settled, responsive culture.

The “Expose glass plate” control calls capturePlate(). It closes a CSS radial iris, copies the exact live canvas into a second canvas, and develops a labeled photomicrograph with culture, stain, magnification, and incubation time. The reveal is instantaneous under reduced motion, so the archival function never depends on animation.

buildAtlas() grows three additional fields off the live loop and prints them into specimen canvases, so the taxonomy is made from the same chemistry as the chamber. The brass optics use conic gradients, inset shadows, measurement ticks, and circular masks. The microscope itself is inline SVG, while a fixed SVG turbulence texture adds paper tooth without making a network request.

Palette + type tokens

A field of cream, cut by pigment

Newsreader carries display headlines, body prose, and italic annotations; its contrast feels editorial and botanical. Chivo Mono labels measurements, controls, timestamps, and archival metadata. Display sizes use tight negative tracking and light weights; lab labels use uppercase, generous tracking, and compact sizes.

Reproduce this

Prompt for a related specimen

Ask an AI frontend agent to “build a self-contained scientific archive around one genuinely interactive natural-system simulation. Choose a specific historical instrument, a limited paper-and-pigment palette, one literary serif and one technical mono. Make the simulation respond to touch and pointer input, expose meaningful parameters as tactile controls, and turn its output into the organizing metaphor for journal, taxonomy, timeline, and procedure sections. Use only HTML, CSS, canvas, SVG, and vanilla JavaScript; verify phone, tablet, desktop, keyboard, reduced motion, and hidden-tab behavior.”