Gravity core First release

Reading Field

make long content pages reveal attention, memory, and concept links

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

"Reading Field" — make long content pages reveal attention, memory, and concept links. It has a attract layer (draw matter into a focus / well), a memory layer (a decaying trail / hysteresis), and a link layer (ropes / cloth between neighbours). The active render stack is trails, links, particles.

Sections near the viewport centre gain attention (gravity); dwelled sections accumulate memory; related concepts and citations light up through relationships. The flagship /docs/reading-field demo runs this on the production platform runtime.

Runtime tokens: attract draw matter into a focus / wellmemory a decaying trail / hysteresislink ropes / cloth between neighbours
Metrics: attention computed every frame by the platform (proximity · engagement · relationships · age)memory computed every frame by the platform (proximity · engagement · relationships · age)
Diagnostics: heatmap topology inspector
Conditions: in-view dwell
Render: trails · links · particles
Reduced motion: a memory-weighted table of contents and static section rails replace the live trail
Without motion: progress is a read-state marker; citations are listed inline

Copy this pattern

<field-root></field-root>
  <div data-body="attract" data-strength="0.8" data-range="300" data-feedback></div>
  <div data-body="memory" data-strength="0.7" data-range="360"></div>
  <div data-body="link" data-strength="0.5" data-range="320"></div>

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

<field-root></field-root>
  <div data-body="attract" data-strength="0.8" data-range="300" data-feedback></div>
  <div data-body="memory" data-strength="0.7" data-range="360"></div>
  <div data-body="link" data-strength="0.5" data-range="320"></div>

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

export default function ReadingField() {
  return (
    <FieldField>
      <div data-body="attract" data-strength="0.8" data-range="300" data-feedback />
      <div data-body="memory" data-strength="0.7" data-range="360" />
      <div data-body="link" data-strength="0.5" data-range="320" />
    </FieldField>
  );
}

{
  "id": "reading-field",
  "name": "Reading Field",
  "intent": "make long content pages reveal attention, memory, and concept links",
  "naturalField": "gravity",
  "primitives": [
    "attract",
    "memory",
    "link"
  ],
  "bodies": [
    {
      "body": "attract",
      "strength": 0.8,
      "range": 300,
      "feedback": true
    },
    {
      "body": "memory",
      "strength": 0.7,
      "range": 360
    },
    {
      "body": "link",
      "strength": 0.5,
      "range": 320
    }
  ],
  "relationships": [
    {
      "from": "section",
      "to": "citation",
      "type": "cites",
      "strength": 0.5
    }
  ],
  "render": [
    "trails",
    "links",
    "particles"
  ],
  "metrics": [
    "attention",
    "memory"
  ],
  "diagnostics": [
    "heatmap",
    "topology",
    "inspector"
  ],
  "accessibility": {
    "reducedMotion": "a memory-weighted table of contents and static section rails replace the live trail",
    "meaningWithoutMotion": "progress is a read-state marker; citations are listed inline"
  },
  "notes": "Sections near the viewport centre gain attention (gravity); dwelled sections accumulate memory; related concepts and citations light up through relationships. The flagship /docs/reading-field demo runs this on the production platform runtime.",
  "tier": "core",
  "status": "shipped",
  "conditions": [
    "in-view",
    "dwell"
  ]
}

Copy this pattern

See also