MONTE

Method & making

A solid's volume, weighed by random dust.

Monte is a live Monte-Carlo integration. A rounded solid turns inside a unit box; forty-eight thousand random points are tested against it, and the fraction that land inside — times the box volume — is the estimate, printed with a confidence band that narrows as the count grows. Built for anyone who has ever wondered how you measure a shape too awkward to integrate by hand.

01The concept

Some volumes have no tidy formula. The old answer, from Los Alamos to modern option pricing, is to stop integrating and start guessing well: scatter random points through a known volume, count how many fall inside your shape, and the ratio is your answer. Pile up enough guesses and the noise averages into a number you can trust — its error shrinking like one over the square root of the count.

Monte renders that idea in space. The shape is deliberately awkward — a rounded box smoothly fused with a sphere, a form with no clean closed volume — and it exists on screen only as the density of hot dust that happened to fall inside it. The instrument beside it never stops re-measuring.

02Palette

Argued from the subject: a near-black laboratory void so a single teal reads as signal against noise. The teal is reserved for marks — inside-dust and strokes — never for body text; the copy runs on a separate light ink that clears 4.5:1 comfortably.

Void
#0A0C12
The dark chamber. Everything is signal against it.
Inside-dust
#5AD1C0
Points that land inside. Mark & line only.
Core glow
#8CF0DE
Deep-inside dust and the live estimate.
Outside-dust
#3A4656
The rejected points, and the wireframe box.
Readout-ink
#DCE6E6
Body copy. ~13:1 on the void.
Ink-dim
#8A97A4
Secondary copy & labels. ~5.6:1.

03Type

Sora for display — a geometric sans with a clean, technical calm that suits an instrument. Space Mono for every number, so the estimate, band and counts sit on tabular figures and never twitch as they update.

Sora Light
Display & headings — 300 / 600
2.94 ±0.03
Space Mono — every readout, tabular numerals

04Techniques

three.js, one InstancedMesh. Up to 48,000 dust dots are a single instanced draw call. Each dot's position is a seeded random point in the box; a signed-distance test — smax of a rounded box and a sphere — classifies it inside or out, once, at build. Inside dots are scaled up and coloured on a depth ramp so the core of the solid glows brighter than its skin.

The estimator. A cumulative inside-count array makes the running estimate O(1): at any sample count N, the volume is (inside/N)·8 and the 95% band is 1.96·8·√(p(1−p)/N). The true volume is measured once at load by a dense 260k-point reference and drawn as the dashed line the estimate chases in the convergence sparkline.

The signature. The solid is never drawn as geometry — it emerges purely from the hot dust that fell inside it. The whole cloud rotates as one rigid body inside the wireframe box; on a slow loop the dust clears and re-pours, so you watch the estimate re-converge and the confidence band draw tight from scratch. Depth fog and a vignette give the chamber its dimensionality.

Robustness. Device-pixel-ratio capped at 2, sized to the viewport with a resize handler, the render loop paused on document.hidden, a WebGL context-loss listener, and a CSS fallback scene if the GPU never arrives. Reduced-motion renders one settled, fully-converged frame.

05Iteration log

Pass 1Craft

  • Tuned the SDF so the solid fills the box handsomely with margin — a rounded box (half 0.50, radius 0.17) intersected with a 0.80 sphere via smax — landing a believable non-round true volume of 1.72 in a box of 8.
  • Set a deliberate type scale and reserved the teal strictly for marks; moved all body copy onto the light readout-ink after checking contrast on the void.
  • Caught the headline failure of the wave: on mobile the lede sat directly over the bright dust and turned unreadable. Added a soft blurred scrim behind the hero copy plus a text-shadow halo — legible now, still cinematic.
  • Balanced the instrument panel: tabular-numeral readout, a divider rhythm, and a convergence sparkline instead of a lonely number.

Pass 2Depth

  • Enriched the signature: inside-dust is coloured on a depth ramp (deeper points glow toward the core-glow teal), so the solid reads as a lit body rather than a flat cloud.
  • Second-read detail — a slow clear-and-re-pour cycle where the estimate re-converges and the band tightens from ±0.32 back to ±0.03 from scratch. Rebased the cycle clock on wall-clock time so it stays correct at any frame rate, and driving it headless confirmed the band actually narrows like one over root-N.
  • Micro-interaction: a gentle pointer-parallax tilt on the whole cloud, and a soft glow pulse on the estimate the moment a measurement settles.
  • Refined motion: a smoothstep pour curve, gentle axis wobble on the rotation, and fog-driven depth so far dust recedes into the void.

Pass 3Hardening

  • 375px pass: wordmark tagline hides, nav tightens, the readout wraps cleanly and the sparkline scales to viewport — nav, wordmark and panel verified fully within the viewport box, scrollWidth clean.
  • Reduced-motion path renders a single settled, fully-converged frame with no loop and no pulse; focus-visible states on every link; DPR capped at 2, resize handled, render loop paused on document.hidden, and a WebGL context-loss listener drops to the CSS fallback.
  • Removed one ornament — a full-screen film-grain overlay — for restraint; final copy read for specific, active language.