ARANEA
Colophon · how it was made

Spinning the webin the browser, one thread at a time

ARANEA is a fictional orb-weaver vivarium — a single-screen exhibit whose one job is to make you sit still and watch a garden spider build a whole orb web, live, then feel prey strike the silk. The web is real geometry drawn in SVG; the tremor is a real mass-spring simulation with a canvas layer for silk shimmer and dew.

01 Palette

Hedge dark, dew, silk, spider — argued from the subject
#15191A
Hedge dark
The unlit gap in a hedge where the web hangs. A near-black with a green undertone, so silk reads as caught light.
#DCE6E2
Dew silver
Threads, radials, and body text. Light-on-dark clears 13:1 — the one accent that is safe as type here.
#F2F0E6
Silk white
The capture spiral and every headline — the brightest, wettest thread, reserved for the things that matter most.
#3A2E26
Spider brown
Her body only. A single warm mark in a cool field, so the eye finds her at the hub instantly.

The contrast rule this collection keeps re-learning

Bright accents belong on lines, not small text over busy fields. Here the field is dark, so dew silver doubles safely as ink; secondary copy gets its own muted token (#9FB0AA, ~7:1) and hairlines get a fainter one (#6E7C77) that never carries words.

02 Type

Fraunces + Karla
Aranea
Fraunces · display serif

A soft, high-contrast old-style with an optical-size axis and a wonky italic. Set large it feels handmade and organic — the right voice for a living thing. Used for the wordmark, every headline, numerals, and the italic captions that narrate the build.

14 radials · ~30s
Karla · grotesque sans

A humanist sans with tabular figures for the readout and stats. It stays quiet and legible at 10–15px so the serif and the silk do the talking. Tracked-out uppercase for labels and eyebrows.

03 Techniques

SVG geometry · canvas silk · rAF simulation · no JS libraries

The signature: watch her spin it, then feel the pluck

When a mote drifts into the capture band, the loop finds the nearest lattice node and kicks its Verlet velocity mostly perpendicular to the radial. The impulse ripples outward through the neighbour springs — the whole SVG web visibly bends and recovers while the canvas shimmer flares along the ringing threads. At the same instant the spider reads which node was struck and runs the exact radial to it, pauses over the catch, and returns to the hub head-down. Toss a mote — or click anywhere on the silk — and the entire read-and-run happens in under a heartbeat.

04 Three iteration passes

Craft · Depth · Hardening — logged as worked
Pass 1Craft
  • Caught and fixed a fatal capture bug: tossed motes spawned at radius 660 — outside the mote-cull bounds — so they were deleted on frame one and no pluck ever fired. Widened the cull box and added a life grace so a mote can fly in from off-frame.
  • The orb sat small in its panel with too much dead margin; enlarged the geometry (inner radius, ring gap, and frame radius) so the web fills ~85% of the stage and the spiral rings read clearly.
  • Tuned the type scale and the stat row; confirmed dew-silver body copy and the muted #9FB0AA label token both clear 4.5:1 on the hedge field.
Pass 2Depth
  • Enriched the signature with a reactive readout: the live ticker moves Strike → At the catch → Back to hub → At the hub as the spider works, and the italic caption narrates each beat.
  • Added a second-read detail — a single dew drop occasionally catches a brighter cross-glint, as if the light shifted, then goes quiet again.
  • New micro-interaction: click anywhere on the silk to flick a mote at that exact spot (clicks near the hub are nudged out into the catch band), on top of the two buttons.
Pass 3Hardening
  • Replaced the wall-clock build timer with a delta accumulator so pausing on tab-hide and resuming never skips the web ahead or makes the spider jump.
  • Verified the 375px layout end to end — no horizontal overflow, and wordmark, nav, and stage controls all sit fully inside the viewport (not just a passing scrollWidth).
  • Confirmed the reduced-motion path renders a complete settled web (never blank), and removed one excess ornament — the invisible abdomen marking on the spider (the Chanel rule).