Design notes · Generative Assets · No. 182
A single fixed viewport, one canvas, and a theorem from 1643 doing all of the drawing. The page has one job: make you feel that the gasket never bottoms out — and prove it with whole numbers the entire way down.
Apollonian is a live Apollonian gasket. Three mutually tangent circles seed the packing inside a unit circle; Descartes’ circle theorem fills every gap with the one circle that kisses all three sides, and the camera falls forever into the frontier. The audience is anyone who has heard “fractal” and never watched one being computed honestly — every curvature typeset on screen is an exact integer, checked at the moment of its birth, and the reflection identity that produced it is printed in the corner like a running receipt.
The root quadruple is (−1, 2, 2, 3): a unit circle (curvature −1, bending the other way) holding two half-circles and two third-circles. Because the square-root term of the seed comes out whole, the entire infinite packing inherits integer curvatures — the numbers are the subject, not set dressing.
Cold precision argues every value. The circles are instrument line-work, not illustration, so colour is rationed: one glacial line tone, one warm event tone, and a frost ink for reading.
Newsreader (italic, optical size high) for the wordmark, the theorem formula, and the big readout numerals. The theorem is older than calculus; a bookish italic gives the mathematics its seventeenth-century voice without costuming the page.
Spline Sans Mono for everything that is data: curvature integers on the canvas, the birth receipt, stat keys. Tabular digits and a single mono width keep thousands of labels from shimmering as the zoom rescales them.
Everything is canvas 2D — no libraries. The packing is driven by the reflection form of Descartes’ theorem:
k4′ = 2(k1 + k2 + k3) − k4
Each gap between three mutually tangent circles stores its parents and materialises its child lazily — position from the curvature-weighted centre identity, radius from the new curvature. Geometry runs in floating point, but every circle also carries its curvature as a BigInt label propagated by the same reflection identity, so the integers on screen are exact at any depth — hundreds of digits deep, they are grouped or collapsed to scientific notation but never rounded. The receipt panel picks the largest fresh birth on screen and prints its identity.
The endless zoom is the part that fights the machine. The scale factor grows exponentially (a slow breathing rate around 0.4 octaves-of-e per second), and floats would degrade within a minute, so whenever the scale passes 220 the whole world is rebased: every coordinate is re-expressed relative to the camera and multiplied up, curvatures divided down, and the scale reset — the descent continues on fresh mantissa bits indefinitely. Circles and unexpanded gaps that leave the viewport are culled each frame; a per-frame budget (420 births) and a pixel floor (~0.5px) keep the frontier dense but bounded, so the visible population hovers in the low thousands while the born count runs away. The camera itself only ever eases toward the current focus circle; when the focus grows past a third of the viewport the descent hops into one of its three child gaps, weighted toward the largest, and clicking any circle re-aims the fall there.
Small text sat directly on live line-work and failed the readability rule — added soft radial scrims behind the masthead, note, receipt and readouts so copy never competes with a stroke. Split the accent into line (glacial) and ink (frost) tokens per the collection’s contrast learning. Grouped digits on long curvatures, gave the formula its own serif setting, and rewrote the promise line so it states the theorem’s bargain (“every gap admits exactly one more”) instead of describing a visual.
Made the integers touchable: hovering any circle rings it warm and prints its exact curvature at the cursor, and clicking steers the descent — the camera re-aims and falls into the circle you chose, its tangency triangle flashing on selection. The cursor switches to a pointer over a live circle so the affordance is discoverable, and a third legend line names it. The birth receipt became a second-read detail: it keeps rewriting itself with the newest visible birth, so a patient viewer watches the arithmetic climb into scientific notation.
375px: the theorem note and receipt yield, the readouts drop to the lower right, and the wordmark clamps — verified by screenshot, not just scroll-width. Reduced motion renders an 11-second pre-warmed frame of the gasket mid-descent, fully settled, with the loop never started (and a live matchMedia listener both ways). DPR capped at 2, rAF paused on hidden tabs, resize re-fits the canvas. Chanel rule: newborn point-flashes were firing alongside the tangency triangle on every hop — kept the triangle, capped and softened the points so the warm accent stays an event, not a texture.