field-ui · explained like you're 5
Not literally — but it sure starts to feel that way. field-ui sprinkles invisible magnets onto a webpage: a word can say “come here!” and the little floating dots all swim toward it. Pile enough of them on the word and the word notices — it grows heavier, bolder, glowier.
That’s the whole trick, and it goes both ways. Things bend the invisible field; the field bends them back. Start there, give it a few simple rules, and it begins to behave like something alive.
What the field is made of — before any magnet shows up.
field-ui measures every element’s box and drops it into the field, so the invisible part and the visible part describe the same coordinates. They aren’t two layers stacked up — they’re one.
And it re-measures as you scroll and resize, so the invisible forces stay glued to the boxes you can see. Move the page, move the field — for free.
Each dot is a tiny ball with a bit of mass, and every moment a little friction bleeds its speed away. So the field doesn’t fly apart — it eases into slow, calm swarms.
That gentle brake is on purpose. It’s why a field-ui page feels calm, not like a screensaver having a meltdown.
Underneath everything are slow waves, and dots near a wave get nudged along its slope — drifting like leaves carried down a lazy river. No cursor, no clicks, no input at all.
It’s the reason a field-ui page feels alive the instant it loads, before you’ve touched a thing.
The universe runs on four big forces. field-ui borrows all four — not the physics, the feelings.
Pick one, and watch the same page resolve through a different field.
Gravity translates priority into convergence.
They are not four effects — they are four ways a semantic surface can behave.
Forces push and pull. But a body can also take matter in — it captures the dots near it, holds them as it fills, and releases them all at once when it’s full. Capture, hold, release: nothing conjured, nothing deleted. Matter just changes hands.
The shipped case is a sink. data-absorb sets how close it
grabs from; data-max sets how much it can hold; the engine writes the fill
back as --load, so the body can show how full it is. Drag it through the
swarm and watch the meter climb — then pop.
The genuine laws — gravity, charge,
magnetism, heat, waves, bouncing.
The everyday attract, repel,
swirl — softened so a page stays calm and readable.
Real pieces stacked into make-believe — blackhole,
galaxy, tornado.
The one rule it never breaks: attract is not
gravity. One is the universe’s law; the other just borrows its costume —
and the docs say so out loud.
The dots were never the point. The field reaches back and changes the things on the page.
This is the “mass” from the title, made real. The word pulls the dots in, they pool beneath it, and that pile drives its whole look at once — weight, size, spacing, glow, color. One number does all of it. Type as a material, not a style.
Hit the button — scatter the pile, watch the letters thin out and pale, then fatten back up as the field re-gathers under its own pull.
Touch one thing in a group and the field draws living threads to its siblings. A list stops being a list and shows itself as a connected set — the relationships were always there; now you can see them.
Hover any word to light up its set.
There’s one bucket of focus for the whole page. Engage one word and it pulls force off every other — so as it grows heavier, the rest give theirs up. Emphasis isn’t painted on; it’s shared, and it always adds up to the same total.
Hover one word — watch the others surrender their glow to it.
The big idea
It’s not “a webpage with floating dots.” It’s a webpage where meaning has weight — where being important, related, trusted, or already-read are things you can see and feel, not just words someone typed.
Give the same simple field a few more rules and behaviour shows up that nobody coded. This is the part that feels like magic.
Give every dot three tiny rules — face the same way as your neighbours, stay close, don’t bump — and they swarm like a flock of starlings. Nobody wrote “flock.” It just happens. Leave a fading trail behind them and they’ll even find the shortest path home, the way ants do.
Intelligence you didn’t write — it emerges from a few pieces playing together.
Play with swarms in the Lab →A single magnet tugs the dots near it. A formation is a mood for the entire field at once — calm drifting, or pulled into wells, or marched into lanes, or scattered apart. Tap a button and the whole background re-thinks itself.
Calm — gentle drifting, the resting state.
Footsteps leave a warm trail that slowly fades. So the spots people keep visiting light up on their own, and the worn paths start to pull. The page grows a memory of attention — not just a log of clicks.
A long article that quietly knows “you are here, you’ve read this.”
See it on a real article →Click anything and ask why. It shows its work: “I moved 60% because of this pull, 24% because of that swirl. I’m glowing because of these three neighbours.” Most clever interfaces are a mystery box. This one hands you the receipts.
Nothing on the page moves without a reason you can read.
Open the Inspector →It can quietly run the next few moments — without touching the live page — and draw a ghost trail of where the dots are about to go. The present and the predicted future, side by side, so you can watch it think.
A field that can show you the future it expects.
See prediction in Diagnostics →Point it at an AI’s answer: a claim with real sources sits solid and calm; a made-up one wobbles and drifts; two facts that argue push apart. You feel which parts to trust before you finish reading — and it never invents confidence it doesn’t have.
It shows you the evidence; it doesn’t pretend to know the truth.
See the Evidence study →You don’t wire raw magnets. You write little cards — and everything you add swims in the same water.
Magnets, a look, and a meaning, on one card — like a recipe for cookies. Idea words describe; magnet names do the work. You can be poetic in the idea box, but the magnet box has to name a real magnet, and a checker bounces any card that fibs. There are already 64.
A new idea is usually just a new card — no new physics.
charge link repel memoryThere’s only one pond. Every magnet tugs the same dots, so the pulls just add up — like two kids pulling one wagon. A page isn’t a list of separate effects; it’s a soup, where everything ripples through everything else.
Drag both — watch them fight over the same dots.
blackhole and watch a universe form.
The same little pieces swirl into whole tiny universes — try
blackhole, galaxy, tornado,
fountain. A preset is just a bundle of magnets given a name.
Drag it around and let it pull the field into shape.
Being honest is the whole point — so here’s the part most “magic” websites skip.
For a plain landing page or a login, normal web tools are perfect and this would be overkill. What field-ui does that nothing else does is treat “this is important,” “these relate,” “you already read this,” and “this answer is shaky” as real forces in one shared field — instead of things you hand-paint, differently, in a dozen places.
So it earns its place when your stuff already has hidden relationships: long articles, AI answers and evidence, dashboards, maps of how things connect. That’s where “meaning you can feel” beats a flat page.
Want the grown-up version? The field guide and the research papers pick up right where this leaves off.
A story, a dashboard, a game — they’re all the same field underneath. Give it a few rules and see what it does.