Fundamental

← all recipes

Strong core First release

Relationship Bond

keep related elements visually and behaviorally connected

frame — bodies 0 relationships 0

Running the actual recipe live via applyRecipe() — not a mock.

"Relationship Bond" — keep related elements visually and behaviorally connected. It has a link layer (ropes / cloth between neighbours), a tether layer (bind matter to an anchor), and a cohesion layer (flocking — pull toward neighbours). The active render stack is links, particles.

Related elements hold together through a bond with strength, tension, and memory — the strong force: binding and local structure.

Runtime tokens
link tether cohesion
Metrics
relation-strength tension relation-strength, tension are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics
topology links force-vectors
Conditions
related
Render
links · particles
Reduced motion
a static connector and a paired highlight stand in for the live bond
Without motion
related elements share a label/color and are listed as connected

Copy this recipe

<field-root></field-root>
  <div data-body="link" data-strength="0.8" data-range="320" data-feedback></div>
  <div data-body="tether" data-strength="0.6" data-range="240"></div>
  <div data-body="cohesion" data-strength="0.5" data-range="260"></div>

See also