RADIOLARIA is a fictional plankton cabinet whose specimens are drawn, named and catalogued live in the browser. Here is the making of it — the palette, the type, the geometry, and the three passes it went through.
Radiolaria are single-celled ocean animals that build glass skeletons — opaline silica lattices of near-perfect six- or eight-fold symmetry — then sink and leave them behind. The site's one job is to make that endless, one-of-a-kind glass feel alive: draw a fresh skeleton under a darkfield scope, synthesize a plausible Latin binomial for it, and let a visitor pull an infinite drawer of them, promoting any specimen back under the scope.
The signature element is that drawer: an infinite grid of unique skeletons, each catalogued on the fly. It is aimed at anyone who has ever leaned into a museum's specimen cases — and at clients who want generative systems that feel curated, not random.
A microscope slide under darkfield: a near-black field, glass that scatters cyan-green, one histological stain, and a cool paper-white for the labels.
Fraunces is loaded as a true variable font with its optical-size and weight axes live. The binomial's opsz is driven by how large the plate is shown — big under the scope, small in the drawer — so the letterforms literally respond to magnification.
The bravery is that single axis move: on redraw the name pops from opsz 56 up to 122 while its weight eases from 420 to 330, and on hover a drawer card's label widens from opsz 16 to 34 — animated through CSS registered custom properties (@property --opsz) so the font-variation-settings interpolate frame by frame.
No libraries, no raster images — every specimen is inline SVG, procedurally assembled. A seeded PRNG (mulberry32) drives one deterministic build so the same seed always redraws the same animal, which is how a drawer card can be promoted back under the scope identically.
The signature drawer. Each skeleton picks a symmetry order N (mostly 6 or 8, occasionally 12), then lays 3–4 concentric shells rendered as circles, N- or 2N-gons, or beaded rings. A single radial spine — spine, ring nodes, a spicule extending past the shell with a bead or forked tip — is drawn once at one angle, then repeated at every multiple of 360/N, guaranteeing exact rotational symmetry. Half-offset minor radials, fenestrae between the arms, and a rose-stained central capsule add variety. A live-synthesized binomial (genus from descriptive roots like actino-, hexa-, litho-, -sphaera, -phormis; a fitting epithet) and a catalogue record are attached, and the card is appended to an IntersectionObserver-fed grid that refills as you scroll.
The plate spins on a CSS transform (with transform-box: fill-box so a negative-min viewBox still rotates about its true centre), settles with a short scale-in on each redraw, and drifts gently in the drawer. A prefers-reduced-motion path stills all of it to a centred static frame; keyboard focus promotes any specimen.
Caught two real defects. First, the featured skeleton was rendering off-centre in the scope: transform-origin 50% 50% on a viewBox with a negative min orbited the drawing rather than spinning it — fixed with transform-box: fill-box; transform-origin: center. Second, every small uppercase label (catalogue numbers, card meta, readout keys, footer) sat at ~2.8:1 on the dark cards — the collection's most-repeated failure — so all secondary text was lifted from 40% to 60% label ink (~5.3:1). Bright glass and rose are now reserved for lines and marks only.
Found and fixed the fatal one: drawer cards were being created with the SVG-namespace helper, so each <article> was an unknown SVG element that never laid out — the grid collapsed to zero height despite the counter reading 18. Switched card containers to real HTML elements. Then enriched the signature moment: each redraw now settles the plate with a brief scale-and-fade as the opsz pops, and the rare rose holotype was added as a second-read detail — roughly one specimen in eighteen wears a stained capsule and a ◆ seal.
Verified 375px (nav collapses to Drawer / Index, no overflow, wordmark intact), the reduced-motion static frame, and focus-visible states across cards and buttons. Applied the Chanel rule: the slide frame carried both a static centre glow and an animated caustic that fought the specimen's own halo — the caustic was removed for a quieter, more premium darkfield. Exercised the real interactions end to end: draw, file, promote, and infinite scroll all run with zero console errors.