Fundamental

← all recipes

Gravity applied

Context Halo

reveal nearby relevant context around a focused element

frame — bodies 0 relationships 0

Running the actual recipe live via applyRecipe() — not a mock.

"Context Halo" — reveal nearby relevant context around a focused element. It has a gravity layer (universal attraction toward mass), a memory layer (a decaying trail / hysteresis), a link layer (ropes / cloth between neighbours), and a cohesion layer (flocking — pull toward neighbours). The active render stack is metaballs, links, particles.

A focused element becomes a gravity well that draws nearby definitions, examples, and prior interactions inward — relevance ranked by relation strength, not fixed placement.

Runtime tokens
gravity memory link cohesion
Metrics
context attention memory relation-strength context, relation-strength are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics
topology potential inspector
Conditions
focused
Render
metaballs · links · particles
Reduced motion
a context panel with a related-links list and local callouts
Without motion
related context reads as a panel of ordered related links and callouts ranked by relation strength

Copy this recipe

<field-root></field-root>
  <div data-body="gravity" data-strength="1" data-range="360" data-feedback></div>
  <div data-body="memory" data-strength="0.6" data-range="300"></div>
  <div data-body="link" data-strength="0.6" data-range="320"></div>
  <div data-body="cohesion" data-strength="0.6" data-range="280"></div>

See also