← all patterns

Gravity operational

Calibration Field

help users tune settings toward a stable target

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

"Calibration Field" — help users tune settings toward a stable target. It has a gravity layer (universal attraction toward mass), a cohesion layer (flocking — pull toward neighbours), a pressure layer (relax crowding (incompressibility)), and a memory layer (a decaying trail / hysteresis). The active render stack is metaballs, field-lines, heatmap, particles.

A target state sits as a stable gravity well: as the user tunes, the current config moves toward or away from coherence, and over-tuned or contradictory settings add pressure that pushes it back out.

Runtime tokens
gravity universal attraction toward masscohesion flocking — pull toward neighbourspressure relax crowding (incompressibility)memory a decaying trail / hysteresis
Metrics
calibration a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertdistance a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertcoherence computed every frame by the platform (proximity · engagement · relationships · age)pressure computed every frame by the platform (proximity · engagement · relationships · age) calibration, distance are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics
potential prediction inspector
Conditions
threshold
Render
metaballs · field-lines · heatmap · particles
Reduced motion
a target meter with a stability marker and a recommended range
Without motion
the target is a labelled meter; current config shows its distance and whether it sits in the recommended range

Copy this pattern

<field-root></field-root>
  <div data-body="gravity" data-strength="1" data-range="400" data-feedback></div>
  <div data-body="cohesion" data-strength="0.7" data-range="300"></div>
  <div data-body="pressure" data-strength="0.6" data-range="260"></div>
  <div data-body="memory" data-strength="0.4" data-range="260"></div>

See also