← all recipes

"Wayfinding Field" — orient the visitor in a navigation bar by surfacing where they are and what is adjacent. It has a attract layer (draw matter into a focus / well), a tether layer (bind matter to an anchor), and a cohesion layer (flocking — pull toward neighbours). The active render stack is field-lines, heatmap.

Applied signals-only (render: []) over the nav: the simulation and feedback run, no canvas is drawn, and the only output is CSS custom properties on the links. The current route is a gravity well; conserved attention brightens the destinations nearest it while the rest recede; cohesion writes --field-coherence so adjacency surfaces. The declared render layers (field-lines, heatmap) are the visual vocabulary when the field is drawn — e.g. a field-line traced wordmark → current destination.

Runtime tokens

attract tether cohesion

Concepts

wayfinding orientation

Metrics

attention coherence priority

Diagnostics

topology field-lines inspector

Conditions

in-view focused

Render

field-lines · heatmap

Reduced motion

the current destination holds aria-current with a static underline; link weights stop travelling

Without motion

links keep reading order and a labelled current state; adjacency reads as a visible grouping

<field-root></field-root>
  <div data-body="attract" data-strength="1.1" data-range="300" data-feedback></div>
  <div data-body="tether" data-strength="0.6" data-range="240"></div>
  <div data-body="cohesion" data-strength="0.5" data-range="260" data-feedback></div>