Paperweight · build note
How it was made

A cursor with mass, and a desk that obeys it.

PAPERWEIGHT is a Wave 4 "second person" piece: the page has no life of its own. A top-down desk holds a dozen light things — paper scraps, brass pins, a stone marble, feathers — and your cursor is a real gravitational well. Everything drifts, falls, orbits, and piles toward you; take your hand off the desk and it stills. The single job of the page is the moment you realise the weight in the room is yours.

01 The signature — cursor gravity

One well, one rule: pull everything toward the pointer with a force that ignores mass — so weight decides who comes fastest.

The desk is a matter-js world with engine.gravity.scale = 0 — there is no "down." The only force in the simulation is added every tick in a beforeUpdate handler: for each body, a vector toward the live pointer with magnitude G / (d² + soft), clamped, applied through Body.applyForce.

The deliberate trick is that this force is not scaled by mass. Real gravity is (F ∝ m), which by the equivalence principle makes every object accelerate identically — a feather and a marble would move the same, and the desk would read as flat. Here the well exerts the same pull on everything, so acceleration becomes force / mass: the near-weightless feather (density 0.00035) streams straight to you, the paper tumbles in, and the dense agate marble (density 0.0055, ~12× the feather's mass) barely stirs before rolling in with slow certainty. Four objects, one pull, four temperaments — the second-read reward.

Presence is the power source. The pointer's mouseenter/mousemove arm the well; mouseleave — fired when you leave the window or scroll the desk away — disarms it, and air friction quietly brings everything to rest. Grabbing a body uses a Matter MouseConstraint, so a flick throws it; the well then curves the throw back into orbit. A visible brass "well" (a lagged core, three equipotential rings, a breathing shadow haze) rides the cursor and brightens as things cling to you.

02 Palette — a warm desk, brass for marks only

Argued from the subject: a paper desktop under raked light, walnut at the edges, brass reserved for lines.

Desk
#E7DFCE
Warm laid-paper desktop. The stage everything answers on.
Walnut
#4A3627
The desk's edge and the vignette that frames the light.
Brass
#B08A4A
Lines, rings, pin-heads only — never body text (LEARNINGS W2).
Ink
#232019
All type. ~11:1 on the desk — reads clean at any size.

Following the ink/line split baked into the brief: bright brass is for marks. Small labels use a dedicated darker brass-ink #7A5E2E (4.6:1 on desk) and the credit lines use an ink at 0.68 alpha (~5:1), so nothing important sits below the readable floor.

03 Type — Libre Caslon Text & DM Sans

A desk-drawer serif for the voice; a quiet grotesque for the instruments.

DisplayYou have gravity.
Voiceeverything here answers to you
LabelsFour things, one pull

Libre Caslon Text carries the second-person address — a bookish, slightly old-fashioned serif that suits ink on paper and reads like a note left on the desk. Its italic does the emotional lines ("it is you"). DM Sans handles eyebrows, the engraved nameplate, and the tiny mechanical legend — neutral enough to disappear so the serif and the physics carry the personality.

04 The three passes

Pass 1 — Craft spacing · contrast · copy
  • Contrast fix: the required colophon credit line was set in --ink-faint (~2.8:1) — below the readable floor for content the brief mandates. Promoted to --ink-soft (~5:1).
  • Confirmed the brass-ink eyebrow token clears 4.5:1 on the desk, and that all body copy is pure ink (~11:1) — no gold-on-vellum trap.
  • Tuned the force model so far and heavy bodies actually arrive: marble density 0.0075 → 0.0055, and G 2.6 → 5.5, keeping the near-field clamped so nothing snaps violently.
Pass 2 — Depth signature · second read
  • Gave the well a slow breathing haze so the cursor reads as a living mass even when held still, and a "dense" state — the core swells and the inner rings brighten once objects cling to you, making "the harder you are to escape, the closer they cling" visible.
  • Kept the "the desk has found its centre — it is you" beat that surfaces only after ~70% of the objects pile within 120px for a sustained moment — a reward for staying still.
  • Hid text on some paper scraps ("iron to the lodestone; paper to you") legible only when a scrap drifts close under your pull.
Pass 3 — Hardening 375px · reduced-motion · Chanel rule
  • Removed one ornament: the ghost hint carried both a poetic line and a "move your cursor" sub-instruction that duplicated the scroll cue — cut the instruction so the line stays pure.
  • Verified the reduced-motion path renders a settled static desk (no engine, no loop) with a note explaining that motion is off, and that it throws zero console errors.
  • Confirmed 375px has no overflow and the nameplate, index link and headline stay inside the viewport; resize rebuilds the walls and clamps every body back onto the desk; the loop pauses on document.hidden and off-screen.

05 Verified in headless Chrome

Every pass drove the real interaction and asserted on its output — never just loaded the page.