← all recipes

Electromagnetic experimental

Wayfinding Current

trace the path a visitor has travelled and the current flowing from home to where they are

frame bodies 0 relationships 0

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

"Wayfinding Current" — trace the path a visitor has travelled and the current flowing from home to where they are. It has a propagate layer (travelling waves through the medium), a fieldflow layer (solar prominences, aurora, plasma streams, guided matter), a sink layer (capture matter (accretion well)), and a memory layer (a decaying trail / hysteresis). Matter follows the field geometry because of fieldflow, not the field-owning force itself. The active render stack is streamlines, heatmap, field-lines.

Applied signals-only over the nav. A current propagates from the wordmark (home/source) toward the current route along the nav structure (fieldflow carries, it does not push); visited destinations sink matter into a faint wake that memory holds across client-side navigation, riding on the persisted field-root. The declared render layers (streamlines, heatmap, field-lines) are the visual vocabulary when drawn.

Runtime tokens
propagate fieldflow sink memory
Concepts
wake trail provenance accretion
Metrics
signal recency memory signal is a host-supplied lane — drive it with data-field-<metric> (or a domain model); without that, its --field-* stays inert.
Diagnostics
causality field-lines inspector
Conditions
return related
Render
streamlines · heatmap · field-lines
Reduced motion
visited destinations get a static "seen" tick and the path reads as a breadcrumb — no travelling current
Without motion
the journey is a breadcrumb list home → current; visited links are labelled seen

Copy this recipe

<field-root></field-root>
  <div data-body="propagate" data-strength="0.9" data-range="360" data-feedback></div>
  <div data-body="fieldflow" data-strength="0.8" data-range="0"></div>
  <div data-body="sink" data-strength="0.5" data-range="240"></div>
  <div data-body="memory" data-strength="0.6" data-range="280"></div>

See also