Geometry

Geometry is a gallery of sixteen generative pieces, each authored from scratch as a self-contained algorithmic system — flow fields, orbital phase systems, three-body chaos, moiré interference, the 10 PRINT maze grammar — rendered live at 60fps. It's built on Next.js and p5.js, with a clean React shell wired to a low-level creative-coding runtime.

The defining stance is client-first and zero-backend: every frame is computed in the browser, every export is encoded on-device, and the server ships nothing but static assets. A provider-agnostic wrapper bridges React's declarative lifecycle to p5's imperative instance mode — handling SSR, dynamic import, the canvas-readiness race, and teardown so navigation never leaks an animation frame.

Export runs off the main thread: a Web Worker encodes animated GIFs with frame-accurate capture while one-tap PNG snapshots come straight off the live canvas. The whole thing wears a bespoke instrument-panel design system — a self-hosted display face, single-ink-on-bone palette, indexed gallery readout, and progress-dot pagination.