Strong applied

Group Magnet

let related cards, assets, or controls cluster intelligently

Running the actual pattern live via applyPattern() — switch the substrate, stack overlays, watch the signals, or reverse the dynamics. Not a mock.

"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 flocking — pull toward neighboursgravity universal attraction toward masscrystallize snap matter onto a latticelink ropes / cloth between neighboursmemory a decaying trail / hysteresis
Metrics: cluster a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertdensity a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertrelation-strength a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert 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

Copy this pattern

<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>

<script type="module">
  import '@fundamental-engine/elements';
</script>

<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>

import { FieldField } from '@fundamental-engine/react';

export default function GroupMagnet() {
  return (
    <FieldField>
      <div data-body="cohesion" data-strength="1" data-range="340" data-feedback />
      <div data-body="gravity" data-strength="0.8" data-range="360" />
      <div data-body="crystallize link" data-strength="0.6" data-range="300" />
      <div data-body="memory" data-strength="0.5" data-range="260" />
    </FieldField>
  );
}

{
  "id": "group-magnet",
  "name": "Group Magnet",
  "intent": "let related cards, assets, or controls cluster intelligently",
  "naturalField": "strong",
  "primitives": [
    "cohesion",
    "gravity",
    "crystallize",
    "link",
    "memory"
  ],
  "bodies": [
    {
      "body": "cohesion",
      "strength": 1,
      "range": 340,
      "feedback": true
    },
    {
      "body": "gravity",
      "strength": 0.8,
      "range": 360
    },
    {
      "body": "crystallize link",
      "strength": 0.6,
      "range": 300
    },
    {
      "body": "memory",
      "strength": 0.5,
      "range": 260
    }
  ],
  "render": [
    "metaballs",
    "links",
    "particles"
  ],
  "metrics": [
    "cluster",
    "density",
    "relation-strength"
  ],
  "diagnostics": [
    "topology",
    "potential",
    "heatmap"
  ],
  "accessibility": {
    "reducedMotion": "grouped sections with relation badges and cluster headings",
    "meaningWithoutMotion": "clusters read as labeled grouped sections with relation badges, no magnetic motion required"
  },
  "notes": "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.",
  "tier": "applied",
  "status": "shipped"
}

Copy this pattern

See also