Gravity experimental

Wayfinding Field

orient the visitor in a navigation bar by surfacing where they are and what is adjacent

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

"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 draw matter into a focus / welltether bind matter to an anchorcohesion flocking — pull toward neighbours
Concepts: wayfinding orientation
Metrics: attention computed every frame by the platform (proximity · engagement · relationships · age)coherence computed every frame by the platform (proximity · engagement · relationships · age)priority computed every frame by the platform (proximity · engagement · relationships · age)
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

Copy this pattern

<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>

<script type="module">
  import '@fundamental-engine/elements';
</script>

<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>

import { FieldField } from '@fundamental-engine/react';

export default function WayfindingField() {
  return (
    <FieldField>
      <div data-body="attract" data-strength="1.1" data-range="300" data-feedback />
      <div data-body="tether" data-strength="0.6" data-range="240" />
      <div data-body="cohesion" data-strength="0.5" data-range="260" data-feedback />
    </FieldField>
  );
}

{
  "id": "wayfinding-field",
  "name": "Wayfinding Field",
  "intent": "orient the visitor in a navigation bar by surfacing where they are and what is adjacent",
  "naturalField": "gravity",
  "status": "experimental",
  "primitives": [
    "attract",
    "tether",
    "cohesion"
  ],
  "concepts": [
    "wayfinding",
    "orientation"
  ],
  "conditions": [
    "in-view",
    "focused"
  ],
  "bodies": [
    {
      "body": "attract",
      "strength": 1.1,
      "range": 300,
      "feedback": true
    },
    {
      "body": "tether",
      "strength": 0.6,
      "range": 240
    },
    {
      "body": "cohesion",
      "strength": 0.5,
      "range": 260,
      "feedback": true
    }
  ],
  "render": [
    "field-lines",
    "heatmap"
  ],
  "metrics": [
    "attention",
    "coherence",
    "priority"
  ],
  "diagnostics": [
    "topology",
    "field-lines",
    "inspector"
  ],
  "accessibility": {
    "reducedMotion": "the current destination holds aria-current with a static underline; link weights stop travelling",
    "meaningWithoutMotion": "links keep reading order and a labelled current state; adjacency reads as a visible grouping"
  },
  "notes": "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."
}

Copy this pattern

See also