← all recipes

"Group Magnet" — let related cards, assets, or controls cluster intelligently. It has a cohesion layer (flocking — pull toward neighbours), a gravity layer (universal attraction toward mass), a crystallize layer (snap matter onto a lattice), a link layer (ropes / cloth between neighbours), and a memory layer (a decaying trail / hysteresis). The active render stack is metaballs, links, particles.

The strong force binds related items into one cluster around a representative center while gravity sets the local hub — crystallize snaps stragglers onto the lattice.

Runtime tokens

cohesion gravity crystallize link memory

Metrics

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

Diagnostics

topology potential heatmap

Render

metaballs · links · particles

Reduced motion

grouped sections with relation badges and cluster headings

Without motion

clusters read as labeled grouped sections with relation badges, no magnetic motion required

<field-root></field-root>
  <div data-body="cohesion" data-strength="1" data-range="340" data-feedback></div>
  <div data-body="gravity" data-strength="0.8" data-range="360"></div>
  <div data-body="crystallize link" data-strength="0.6" data-range="300"></div>
  <div data-body="memory" data-strength="0.5" data-range="260"></div>