← all patterns

Gravity applied

Command Intent Field

let command palettes settle around likely intent

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

"Command Intent Field" — let command palettes settle around likely intent. It has a gravity layer (universal attraction toward mass), a charge layer (attract/repel charged matter), a memory layer (a decaying trail / hysteresis), a cohesion layer (flocking — pull toward neighbours), and a repel layer (carve a void / keep-clear region). The active render stack is dots, metaballs, particles.

Likely commands sink into a gravity well while dangerous ones repel — electromagnetic charge clusters the related, gravity decides what rises to the top.

Runtime tokens
gravity universal attraction toward masscharge attract/repel charged mattermemory a decaying trail / hysteresiscohesion flocking — pull toward neighboursrepel carve a void / keep-clear region
Metrics
intent a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertconfidence written only when the host supplies it — the engine never invents confidence/riskmemory computed every frame by the platform (proximity · engagement · relationships · age)risk written only when the host supplies it — the engine never invents confidence/risk intent is a host-supplied lane — drive it with data-field-<metric> (or a domain model); without that, its --field-* stays inert.
Diagnostics
potential causality topology
Conditions
focused
Render
dots · metaballs · particles
Reduced motion
ranked command groups with risk labels and recency indicators
Without motion
commands appear as a ranked list with risk labels and recency badges, no settling animation required

Copy this pattern

<field-root></field-root>
  <div data-body="gravity" data-strength="1" data-range="360" data-feedback></div>
  <div data-body="charge" data-strength="0.6" data-range="300" data-spin="1"></div>
  <div data-body="memory cohesion" data-strength="0.6" data-range="280"></div>
  <div data-body="repel" data-strength="0.7" data-range="260"></div>

See also