// core visual component / live

connection is the event.

the field behind this page is not a background. it is the component, running the whole way down, reacting to you as you read about it.

// thesis

every other particle field connects everything to everything, which quietly says that connection is free. this one says the opposite. contact is rare, so it counts.

>move your cursor through it. then scroll.

// what it is

a network that forms and breaks while you watch.

i / v

most animations on a business homepage are wallpaper. this one is a simulation with a rule, and the rule is the brand.

each node moves on its own. nothing is choreographed, nothing loops, and no two visits look the same. a line appears between two nodes only while they are genuinely close to each other. it strengthens as they close in and breaks the moment they drift apart.

so a visitor is not looking at a decoration of a network. they are looking at a network happening, and their own cursor is part of it.

35nodes in the field

595pair tests per frame

35,700proximity decisions per second

1draw call for every edge

0video, gif or image assets

0outside libraries or requests

// the loop

five things happen, sixty times a second.

ii / v

imove each node travels its own line

iirespond the cursor bends the field

iiimeasure 595 comparisons, every frame // the only step that carries the idea

ivassemble surviving edges into one batch

vdraw one pass, straight to the gpu

step three is the whole product

the other four are plumbing that any competent engineer writes. step three is a judgment call rendered as arithmetic. how close is close enough to count as contact, how quickly does a connection gain weight as the gap narrows, and how fast does it die when the gap opens. those three answers are the difference between a screensaver and a statement, and they took far longer to find than the code took to write.

// under the hood, for the people who want it the comparison runs in squared space, which removes 595 square roots per frame. edge geometry is written into a buffer allocated once at maximum capacity and refilled in place, so there is no per frame allocation and no collection stutter. only the used span of that buffer is submitted. contact strength is a single normalised scalar, and it drives line weight, line colour, node scale and node colour at once, which is why the field reads as one material rather than four effects stacked on each other.

// cost curve >35 nodes, 595 tests/ >100 nodes, 4,950/ >500 nodes, 124,750

the work grows with the square of the node count, which is exactly why the field is small. a denser field is not a better field. it is a slower one that says less.

// live demonstration

look up. the field just widened.

iii / v

same nodes. same motion. same code. one number changed, and it became everyone else's homepage.

for the length of this section the contact radius is opened up, and the result is the field every competitor ships. everything touching everything, permanently. it reads as texture, it says nothing, and after four seconds a visitor stops seeing it.

keep scrolling and it closes back down. that snap back is the entire product, and the page is showing it to you rather than claiming it.

// decision log

three versions worked. all three were killed.

iv / v

the spinning fieldkilled

the whole cluster rotated on an axis. quick to build and instantly readable as a rotating object, which was the problem. the nodes had no independent life. they were points on a spinning solid.

the breathing fieldkilled

every node got its own rhythm and drifted organically. it looked alive, but each one stayed tied to a home position, so nothing ever actually went anywhere. and at that density everything was connected to everything. a network where every link exists tells you nothing.

iii

the halo passkilled

glow was faked with a second shape behind every node. it doubled the work for a decorative result and, at small sizes, read as a double outline rather than light. cut entirely. glow became a property of contact instead of a thing drawn on top.

the proximity graphshipped

nodes given real travel, the field cut to a third of its density, the contact radius cut by roughly two thirds, and every visual property driven by contact alone. most of the time, most of the field is unconnected. that restraint is the entire effect.

the value was never in writing the animation. it was in rejecting the first three that ran fine.

// the controls

what gets tuned, and what each one buys.

v / v

density

how many nodes read as individuals with intent before the eye gives up and sees texture. the ceiling is lower than most people expect.

contact radius

the single decision the component rests on. you watched this one move two sections ago. set it wide and you get wallpaper. set it right and a connection becomes an event.

travel and damping

whether the field wanders or vibrates in place. it also guarantees the field never settles into stillness and never accelerates into noise.

contact curve

how quickly a connection gains weight as the gap closes, and how fast it dies. this is what makes contact feel earned rather than switched on.

depth compression

whether the field reads as a shallow plane sitting inside the layout or a starfield sitting behind it.

pointer response

how much the field acknowledges the visitor without turning into a toy that begs to be played with.

none of these are defaults. each one was set by looking at the result and rejecting it, repeatedly. that is the part that cannot be copied from a tutorial, and it is the part that is worth paying for.

// why it is the core component

the positioning is the mechanic, not the headline.

// close

a stock field asserts that connection is free. this one asserts the opposite and pays for the assertion every frame. a visitor absorbs the argument before reading a word of copy, and cannot get that impression anywhere else, because there is no template it came from.

it also survives a redesign. the copy above it can change and the sections below it can be rewritten, and the field still says the same thing, because the meaning lives in the rule rather than in the styling.

the visual and the argument are the same object.