Diagnostic / platform applied

Field Tutorial

teach Fundamental by revealing DOM, bodies, fields, metrics, feedback, and overlays

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

"Field Tutorial" — teach Fundamental by revealing DOM, bodies, fields, metrics, feedback, and overlays. It has a attract layer (draw matter into a focus / well). The active render stack is particles, field-lines, dots.

A narrative diagnostic recipe: a single attract body gives the inspector something real to read while the interface reveals itself stage by stage — DOM, bodies, fields, metrics, feedback, overlays, reduced-motion.

Runtime tokens: attract draw matter into a focus / well
Metrics: teaching a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertattention computed every frame by the platform (proximity · engagement · relationships · age) teaching is a host-supplied lane — drive it with data-field-<metric> (or a domain model); without that, its --field-* stays inert.
Diagnostics: inspector topology field-lines causality prediction
Render: particles · field-lines · dots
Reduced motion: a stepper with static diagrams and live code snippets at each stage
Without motion: each stage is a labeled step with a static diagram and the exact code, so the lesson reads fully without animation

Copy this pattern

<field-root></field-root>
  <div data-body="attract" data-strength="0.6" data-range="300" data-feedback></div>

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

<field-root></field-root>
  <div data-body="attract" data-strength="0.6" data-range="300" data-feedback></div>

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

export default function FieldTutorial() {
  return (
    <FieldField>
      <div data-body="attract" data-strength="0.6" data-range="300" data-feedback />
    </FieldField>
  );
}

{
  "id": "field-tutorial",
  "name": "Field Tutorial",
  "intent": "teach Fundamental by revealing DOM, bodies, fields, metrics, feedback, and overlays",
  "primitives": [
    "attract"
  ],
  "bodies": [
    {
      "body": "attract",
      "strength": 0.6,
      "range": 300,
      "feedback": true
    }
  ],
  "render": [
    "particles",
    "field-lines",
    "dots"
  ],
  "metrics": [
    "teaching",
    "attention"
  ],
  "diagnostics": [
    "inspector",
    "topology",
    "field-lines",
    "causality",
    "prediction"
  ],
  "accessibility": {
    "reducedMotion": "a stepper with static diagrams and live code snippets at each stage",
    "meaningWithoutMotion": "each stage is a labeled step with a static diagram and the exact code, so the lesson reads fully without animation"
  },
  "notes": "A narrative diagnostic recipe: a single attract body gives the inspector something real to read while the interface reveals itself stage by stage — DOM, bodies, fields, metrics, feedback, overlays, reduced-motion.",
  "tier": "applied",
  "status": "shipped"
}

Copy this pattern

See also