← all recipes

"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

Metrics

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

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