Gravity core

Focus Orbit

keep related options moving around the active item

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

"Focus Orbit" — keep related options moving around the active item. It has a attract layer (draw matter into a focus / well), a magnetism layer (curve moving charges (cyclotron)), and a tether layer (bind matter to an anchor). The active render stack is particles, field-lines.

The active item is a gravity well; magnetism curves the surrounding motion around it (gravity + electromagnetic), and tether keeps related options nearby.

Runtime tokens: attract draw matter into a focus / wellmagnetism curve moving charges (cyclotron)tether bind matter to an anchor
Concepts: orbit
Metrics: attention computed every frame by the platform (proximity · engagement · relationships · age)relation-strength a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert relation-strength is a host-supplied lane — drive it with data-field-<metric> (or a domain model); without that, its --field-* stays inert.
Diagnostics: prediction topology field-lines
Conditions: focused related
Render: particles · field-lines
Reduced motion: a static relationship ring marks the active item; related items keep their weighted emphasis
Without motion: the active item is marked current; related items are listed beside it

Copy this pattern

<field-root></field-root>
  <div data-body="attract" data-strength="1" data-range="260" data-feedback></div>
  <div data-body="magnetism" data-strength="0.8" data-range="300" data-spin="1"></div>
  <div data-body="tether" data-strength="0.5" data-range="220"></div>

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

<field-root></field-root>
  <div data-body="attract" data-strength="1" data-range="260" data-feedback></div>
  <div data-body="magnetism" data-strength="0.8" data-range="300" data-spin="1"></div>
  <div data-body="tether" data-strength="0.5" data-range="220"></div>

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

export default function FocusOrbit() {
  return (
    <FieldField>
      <div data-body="attract" data-strength="1" data-range="260" data-feedback />
      <div data-body="magnetism" data-strength="0.8" data-range="300" data-spin="1" />
      <div data-body="tether" data-strength="0.5" data-range="220" />
    </FieldField>
  );
}

{
  "id": "focus-orbit",
  "name": "Focus Orbit",
  "intent": "keep related options moving around the active item",
  "naturalField": "gravity",
  "primitives": [
    "attract",
    "magnetism",
    "tether"
  ],
  "bodies": [
    {
      "body": "attract",
      "strength": 1,
      "range": 260,
      "feedback": true
    },
    {
      "body": "magnetism",
      "strength": 0.8,
      "range": 300,
      "spin": 1
    },
    {
      "body": "tether",
      "strength": 0.5,
      "range": 220
    }
  ],
  "render": [
    "particles",
    "field-lines"
  ],
  "metrics": [
    "attention",
    "relation-strength"
  ],
  "diagnostics": [
    "prediction",
    "topology",
    "field-lines"
  ],
  "accessibility": {
    "reducedMotion": "a static relationship ring marks the active item; related items keep their weighted emphasis",
    "meaningWithoutMotion": "the active item is marked current; related items are listed beside it"
  },
  "notes": "The active item is a gravity well; magnetism curves the surrounding motion around it (gravity + electromagnetic), and tether keeps related options nearby.",
  "tier": "core",
  "status": "shipped",
  "concepts": [
    "orbit"
  ],
  "conditions": [
    "focused",
    "related"
  ]
}

Copy this pattern

See also