field-ui · a reciprocal DOM-physics field
This isn’t a layout on top of an effect. The words, links, and cards are physical bodies inside a single field — they carry weight, exert force, and the field pushes back. Here’s exactly how it works, with the real engine running behind every example.
Every part exerts force on the others — and the whole only works when you can feel them.
What the field is made of — and how it locks to the page.
A registry samples every body’s getBoundingClientRect() each animation frame and maps it onto the canvas — scaled by device pixel ratio.
Because it re-reads every frame, the invisible force fields stay locked to the visible boxes through scroll, resize, and reflow.
Each particle carries a velocity and a mass proportional to its size. Every frame its velocity is multiplied by a friction factor — momentum bleeds off instead of accumulating.
Damping is why the field settles into calm swarms rather than scattering.
Near a wave line, particles pick up a drag vector along the slope of the curve — the derivative of the sine — so they drift like debris carried down a river.
It’s why the resting field feels alive without any input.
What a single body can do to the matter around it.
An attractor defines a gravity well. The pull grows as distance falls, and a tangential component bends incoming particles into stable spirals.
Drag the attractor — the force is bound to the element, not the cursor.
A repeller is an inverted well — the force points outward, carving a clean void the rest of the field flows around.
Drag the repeller and watch a clearing open around it.
A wall is an axis-aligned box. A crossing particle has its perpendicular velocity reversed and scaled by elasticity, then is projected back out — a hard hit throws a spark.
Drag the wall into the drifting particles to deflect them.
A swirl applies a dominantly tangential force — a swirl, not
a drain. The inward pull is light (the swirl dominates it roughly eightfold), so matter wheels
around the body instead of falling in. A tight inward spiral is a preset (whirlpool),
never the canonical verb.
Drag the swirl into the swarm — particles orbit rather than fall in.
A stream emits a constant force along a heading — a fan, a jet, a prevailing wind. The swarm combs into parallel flow.
Drag the jet and watch matter streak into lanes downwind.
A tether has a rest length. Matter that crowds in is pushed out; matter that strays is reeled in — the swarm settles into an orbiting shell.
Drag the tether — matter springs back to its radius.
A viscosity body neither pulls nor pushes — it bleeds momentum, as if the field turned to honey. Paired with an attractor it turns a slingshot into a settled orbit.
Agitate, then watch the rush die inside the zone.
An sink captures particles at its core. They aren’t deleted — they’re held inside, and the element inflates as it fills. When it saturates it goes supernova: the exact particles are released radially.
Nothing is conjured from thin air, and nothing vanishes. Matter changes hands.
An jet draws surrounding matter into its nozzle and relaunches it as a hot jet — the field is recycled into a stream, nothing conjured.
Agitate to feed it, then watch the jet stream off along its heading.
Real field laws — true 1/d², Lorentz, Langevin, diffusion, waves.
True softened inverse-square — a real 1/d² law.
The signed sibling of gravity — like repels, opposite attracts.
The Lorentz force — curves a moving charge, doing no work.
Langevin/Brownian agitation — a real temperature in the medium.
Elastic pairwise collision — the hard-sphere billiard force.
A pheromone field — deposit a mark and follow the diffused gradient.
A travelling wave — particles ride the expanding front.
The field remembers — occupancy wears in paths that pull harder.
Further designed forces, and the modifiers that wrap a sibling.
Rotates velocity, preserving speed — bends paths without adding energy.
A one-way membrane — passes along its heading, reflects the reverse.
A constant lift/sink by density — light matter rises, dense settles.
A laminar velocity gradient — flow grows with perpendicular offset.
Snaps cool matter onto a lattice; melts and frees it when hot.
Steers toward a heading, preserving speed — flock alignment.
Divergence-free curl-noise turbulence.
Short-range pressure + mid-range pull — surface tension.
SPH density relaxation — incompressible even-fill via mutual repulsion.
Two-species pursuit — predators seek prey, prey flee predators.
A source [S] — creates matter along the heading, budgeted by a lifespan + pool ceiling.
A Verlet distance constraint — ropes, chains, cloth, soft structures.
Matter assembles into a mark / chart / logo — never words (§11).
Pulses its sibling forces with a time-varying strength.
A directional gate — confines sibling forces to a beam.
Conserved colour transport — matter takes on and carries a tint.
Follow the field lines — steer onto and stream down the net field a body radiates.
Cosmology as composition — named arrangements of the primitives.
A well, an accretion disk, an event horizon, and lensing.
An emission horizon that throws matter out.
Hydrostatic equilibrium — gravity balanced by thermal pressure.
An accreting black hole with polar jets.
A spiral disk that settles into a plane.
A warm, slow cloud with rising wisps.
A funnel with an updraft, calmed at the edges.
A class-[S] source jetting matter up, arcing home under gravity.
When a force decides to act, and on which matter.
Any body can carry a condition — gated on being engaged, or on a particle’s speed or heat. A selective force reads every free agent and acts only on those that match.
The catcher below only grips hot particles. Heat the field and the excited matter is pulled in while the calm passes through.
What emerges when the parts interact.
The element bends the field — and the field’s local density bends the element in return. As particles gather on a word, it gains weight, brightness, and lift.
Hover the word — it pulls the field, the field piles up, and the pile makes the word heavier. A closed loop.
There is one finite budget of force for the whole page. Engage a word and it pulls force off every other — so as one gathers matter and grows heavier, the rest give theirs up. Focus isn’t styled; it’s conserved.
Hover one word — watch the others surrender their weight to it.
Engage an element in a group and the field draws living threads between it and its siblings. A list stops being a list and shows itself as a connected system.
Hover any line.
When a body saturates, the excess spills to its neighbours — weighted by nearness, and conserved. Engage one tile and the ones beside it light up on their own. The wiring between elements appears because matter actually flows between them.
Hover the middle tile — watch its neighbours catch, the far ones faintly.
Forces act locally. A formation acts on every particle at once — a single global bias. As you scrolled, each chapter quietly switched it.
Ambient — calm brownian drift, the resting state.
The word is a body. It pulls the field, matter pools beneath it, and its
whole appearance — weight, optical size, tracking, bloom, colour — is a live readout of how
much has gathered. One value, --d, drives every axis at once.
Disturb it — the burst scatters the pile, the type goes light and pale, then it thickens back as the field resettles under its own pull. Type as a material, not a style.
These nodes aren’t pinned by CSS. Each one pushes off the others and drifts away from crowded field, settling into an equilibrium — and re-settling when the field is disturbed or the window resizes. Layout as a physical process, not fixed coordinates.
Drag the attractor through them, or resize the window — the constellation scatters and re-settles like a physical object.