Strong systems

Boundary Field

make safe zones, drop zones, scopes, and containers perceptible

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

"Boundary Field" — make safe zones, drop zones, scopes, and containers perceptible. It has a wall layer (bounce matter off a boundary), a sink layer (capture matter (accretion well)), a repel layer (carve a void / keep-clear region), and a cohesion layer (flocking — pull toward neighbours). The active render stack is field-lines, metaballs, particles, dots.

Strong containment gives containers an edge: wall reflects invalid objects, sink absorbs valid ones into the scope, and cohesion makes the boundary visible as you approach; electric repel screens what does not belong.

Runtime tokens: wall bounce matter off a boundarysink capture matter (accretion well)repel carve a void / keep-clear regioncohesion flocking — pull toward neighbours
Concepts: reflect absorb
Metrics: boundary a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertproximity a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertvalidity a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert boundary, proximity, validity are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: contours force-vectors inspector
Render: field-lines · metaballs · particles · dots
Reduced motion: a boundary outline with valid and invalid zone labels and a static drop affordance
Without motion: the container shows a drawn outline and each item is labeled valid or invalid for that zone

Copy this pattern

<field-root></field-root>
  <div data-body="wall" data-strength="1.1" data-range="320" data-feedback></div>
  <div data-body="sink" data-strength="0.7" data-range="280"></div>
  <div data-body="repel" data-strength="0.8" data-range="300"></div>
  <div data-body="cohesion" data-strength="0.6" data-range="260"></div>

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

<field-root></field-root>
  <div data-body="wall" data-strength="1.1" data-range="320" data-feedback></div>
  <div data-body="sink" data-strength="0.7" data-range="280"></div>
  <div data-body="repel" data-strength="0.8" data-range="300"></div>
  <div data-body="cohesion" data-strength="0.6" data-range="260"></div>

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

export default function BoundaryField() {
  return (
    <FieldField>
      <div data-body="wall" data-strength="1.1" data-range="320" data-feedback />
      <div data-body="sink" data-strength="0.7" data-range="280" />
      <div data-body="repel" data-strength="0.8" data-range="300" />
      <div data-body="cohesion" data-strength="0.6" data-range="260" />
    </FieldField>
  );
}

{
  "id": "boundary-field",
  "name": "Boundary Field",
  "intent": "make safe zones, drop zones, scopes, and containers perceptible",
  "naturalField": "strong",
  "primitives": [
    "wall",
    "sink",
    "repel",
    "cohesion"
  ],
  "bodies": [
    {
      "body": "wall",
      "strength": 1.1,
      "range": 320,
      "feedback": true
    },
    {
      "body": "sink",
      "strength": 0.7,
      "range": 280
    },
    {
      "body": "repel",
      "strength": 0.8,
      "range": 300
    },
    {
      "body": "cohesion",
      "strength": 0.6,
      "range": 260
    }
  ],
  "render": [
    "field-lines",
    "metaballs",
    "particles",
    "dots"
  ],
  "metrics": [
    "boundary",
    "proximity",
    "validity"
  ],
  "diagnostics": [
    "contours",
    "force-vectors",
    "inspector"
  ],
  "accessibility": {
    "reducedMotion": "a boundary outline with valid and invalid zone labels and a static drop affordance",
    "meaningWithoutMotion": "the container shows a drawn outline and each item is labeled valid or invalid for that zone"
  },
  "notes": "Strong containment gives containers an edge: wall reflects invalid objects, sink absorbs valid ones into the scope, and cohesion makes the boundary visible as you approach; electric repel screens what does not belong.",
  "tier": "systems",
  "status": "shipped",
  "concepts": [
    "reflect",
    "absorb"
  ]
}

Copy this pattern

See also