Strong systems

Relation Lens

temporarily reveal hidden connections without changing layout

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

"Relation Lens" — temporarily reveal hidden connections without changing layout. It has a link layer (ropes / cloth between neighbours), a memory layer (a decaying trail / hysteresis), and a cohesion layer (flocking — pull toward neighbours). The active render stack is links, field-lines, particles, dots.

Strong relational binding lets the lens light up link bonds among visible elements; memory and cohesion hold the revealed map steady so definitions, citations, and dependencies show without moving anything.

Runtime tokens: link ropes / cloth between neighboursmemory a decaying trail / hysteresiscohesion 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 inertactive-relation 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 inert relation-strength, active-relation, density are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: topology inspector causality
Render: links · field-lines · particles · dots
Reduced motion: a relation list with numbered connectors and a static map
Without motion: connections become a numbered list pairing each element with what it relates to, layout unchanged

Copy this pattern

<field-root></field-root>
  <div data-body="link" data-strength="1.1" data-range="380" data-feedback></div>
  <div data-body="memory" data-strength="0.6" data-range="280"></div>
  <div data-body="cohesion" data-strength="0.6" data-range="300"></div>

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

<field-root></field-root>
  <div data-body="link" data-strength="1.1" data-range="380" data-feedback></div>
  <div data-body="memory" data-strength="0.6" data-range="280"></div>
  <div data-body="cohesion" data-strength="0.6" data-range="300"></div>

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

export default function RelationLens() {
  return (
    <FieldField>
      <div data-body="link" data-strength="1.1" data-range="380" data-feedback />
      <div data-body="memory" data-strength="0.6" data-range="280" />
      <div data-body="cohesion" data-strength="0.6" data-range="300" />
    </FieldField>
  );
}

{
  "id": "relation-lens",
  "name": "Relation Lens",
  "intent": "temporarily reveal hidden connections without changing layout",
  "naturalField": "strong",
  "primitives": [
    "link",
    "memory",
    "cohesion"
  ],
  "bodies": [
    {
      "body": "link",
      "strength": 1.1,
      "range": 380,
      "feedback": true
    },
    {
      "body": "memory",
      "strength": 0.6,
      "range": 280
    },
    {
      "body": "cohesion",
      "strength": 0.6,
      "range": 300
    }
  ],
  "render": [
    "links",
    "field-lines",
    "particles",
    "dots"
  ],
  "metrics": [
    "relation-strength",
    "active-relation",
    "density"
  ],
  "diagnostics": [
    "topology",
    "inspector",
    "causality"
  ],
  "accessibility": {
    "reducedMotion": "a relation list with numbered connectors and a static map",
    "meaningWithoutMotion": "connections become a numbered list pairing each element with what it relates to, layout unchanged"
  },
  "notes": "Strong relational binding lets the lens light up link bonds among visible elements; memory and cohesion hold the revealed map steady so definitions, citations, and dependencies show without moving anything.",
  "tier": "systems",
  "status": "shipped"
}

Copy this pattern

See also