← all recipes

"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 sink repel cohesion

Concepts

reflect absorb

Metrics

boundary proximity validity 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

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