← all recipes

"Semantic Snap" — align objects, cards, or text fragments by meaning instead of only geometry. It has a link layer (ropes / cloth between neighbours), a tether layer (bind matter to an anchor), a cohesion layer (flocking — pull toward neighbours), and a crystallize layer (snap matter onto a lattice). The active render stack is links, field-lines, particles, dots.

Strong relational binding lets objects snap by meaning: link and tether (spring) draw matching tags or dependent blocks together while crystallize locks them into a clean semantic alignment.

Runtime tokens

link tether cohesion crystallize

Concepts

spring

Metrics

snap relation-strength alignment snap, relation-strength, alignment are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.

Diagnostics

topology force-vectors inspector

Conditions

related

Render

links · field-lines · particles · dots

Reduced motion

snap guides with semantic alignment labels and relation hints

Without motion

snapping becomes labeled alignment guides naming the relationship that pulled two items together

<field-root></field-root>
  <div data-body="link" data-strength="1" data-range="360" data-feedback></div>
  <div data-body="tether" data-strength="0.8" data-range="300"></div>
  <div data-body="cohesion" data-strength="0.6" data-range="280"></div>
  <div data-body="crystallize" data-strength="0.6" data-range="260"></div>