CONTINUA is a fictional lab instrument for watching SmoothLife — a continuous-domain cellular automaton — behave. Its single job: let a visitor paint life into a phosphor field and watch continuous gliders, blobs and colonies crawl, self-replicate and starve in real time. No stock imagery, no video: every pixel is computed by a shader on the GPU.
Conway's Game of Life is binary and discrete — cells are on or off, neighbours are counted in whole numbers. In 2011 Stephan Rafler generalised it to the continuum: replace the neighbour count with an integral over two disks and the hard birth/death rules with smooth sigmoids. The result is an organism-like automaton whose gliders truly glide. CONTINUA dresses that mathematics as a phosphor readout — a lab terminal for a thing that is never fully alive and never fully dead.
A phosphor-monitor palette, argued from the subject. The bright accents are reserved for marks and life; body text runs on a calmer pale-phosphor ink so it always clears 4.5:1 over the dark field.
Text tokens: pale phosphor #CFE9DD for body, muted #89AA9C for secondary, gold-ink #B58421 for small categorical labels — never bright gold on the field.
Unica One — a condensed all-caps display face with an engineered, slightly retro-technical feel — carries every headline and number. IBM Plex Mono handles body, labels and the parameter table: it makes the copy read like instrument output and lets the equation and thresholds sit in honest, tabular figures.
The typographic bravery is scale contrast: an 8 vw Unica headline stacked hard against 12 px mono labels, and four oversized decimal thresholds (.257 .336 .365 .549) set as display figures — the rule itself becomes the ornament.
The field is a WebGL2 fragment-shader SmoothLife simulation, no libraries. State lives in a floating-point (RGBA16F) texture, one cell per texel, and is advanced by ping-ponging between two framebuffers. Each tick the simulation shader convolves the neighbourhood: for every cell it sums density over an inner disk (radius r/3) and an outer ring (radius r=11), then feeds those two averages m and n through Rafler's smooth transition s' = s + dt·(2·σ(n, σₘ(b1,d1,m), σₘ(b2,d2,m)) − 1). The grid wraps toroidally via REPEAT sampling. A second display shader maps density to the phosphor palette — mint for the living bulk, a thin gold rim where the local gradient is steepest — and stamps the cell lattice and a faint scanline.
Painting is done in the same simulation shader: pointer position is projected into grid space and passed as a brush uniform, injecting density within a small radius every tick, so cursor trails become living seeds. If the WebGL2 context or a floating-point render target is unavailable, the canvas is swapped for a static CSS phosphor scene so the hero is never blank.
white-space:nowrap equation forced its grid column to min-content, pushing the page to 472px wide. Grid children were still min-width:auto; setting min-width:0 let the equation scroll inside its own box. Verified nav, wordmark and headline all sit inside the 375 viewport (not just scrollWidth ≤ 375).prefers-reduced-motion load: zero errors, reveals applied, static field rendered.ResizeObserver, and paused the loop on document.hidden. Removed one redundant ornament (a bottom-left radial wash behind the hero text) now that the strengthened scrim and eyebrow chip carry contrast — the Chanel rule.Checked in headless Chrome (puppeteer-core) against the live route with a real 7-second settle: zero console errors, WebGL context live and canvas non-zero, hero and cursor-paint exercised, and no horizontal overflow at 375 px with nav and wordmark confirmed inside the viewport box. Reduced-motion and a fresh random seed each load were both verified visually.