Strong core First release

Relationship Bond

keep related elements visually and behaviorally connected

Running the actual pattern live via applyPattern() — switch the substrate, stack overlays, watch the signals, or reverse the dynamics. 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 ropes / cloth between neighbourstether bind matter to an anchorcohesion flocking — pull toward neighbours
Metrics: relation-strength a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inerttension a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert 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 pattern

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

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

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

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

export default function RelationshipBond() {
  return (
    <FieldField>
      <div data-body="link" data-strength="0.8" data-range="320" data-feedback />
      <div data-body="tether" data-strength="0.6" data-range="240" />
      <div data-body="cohesion" data-strength="0.5" data-range="260" />
    </FieldField>
  );
}

{
  "id": "relationship-bond",
  "name": "Relationship Bond",
  "intent": "keep related elements visually and behaviorally connected",
  "naturalField": "strong",
  "primitives": [
    "link",
    "tether",
    "cohesion"
  ],
  "bodies": [
    {
      "body": "link",
      "strength": 0.8,
      "range": 320,
      "feedback": true
    },
    {
      "body": "tether",
      "strength": 0.6,
      "range": 240
    },
    {
      "body": "cohesion",
      "strength": 0.5,
      "range": 260
    }
  ],
  "relationships": [
    {
      "from": "a",
      "to": "b",
      "type": "related",
      "strength": 0.6
    }
  ],
  "render": [
    "links",
    "particles"
  ],
  "metrics": [
    "relation-strength",
    "tension"
  ],
  "diagnostics": [
    "topology",
    "links",
    "force-vectors"
  ],
  "accessibility": {
    "reducedMotion": "a static connector and a paired highlight stand in for the live bond",
    "meaningWithoutMotion": "related elements share a label/color and are listed as connected"
  },
  "notes": "Related elements hold together through a bond with strength, tension, and memory — the strong force: binding and local structure.",
  "tier": "core",
  "status": "shipped",
  "conditions": [
    "related"
  ]
}

Copy this pattern

See also