Electromagnetic experimental

Completion Flare

mark an achievement on the body it happened to — a bright transient that decays, over a body that holds its own presence

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

"Completion Flare" — mark an achievement on the body it happened to — a bright transient that decays, over a body that holds its own presence. It has a attract layer (draw matter into a focus / well). The active render stack is particles.

Composition: the standing `attract` + `data-feedback` is declarative; the flare is `field.pulse(el)` from the handler that already knows the thing completed. That split is on purpose — the engine has no inbound event vocabulary (`data-on` runs the other way: a field trigger OUT to a DOM CustomEvent), so a declared trigger would have to name an app event the engine cannot see. Read `--field-pulse` alongside `--d` in your own CSS; they are separate channels and never overwrite each other. Energy is additive and saturates at 1, so a burst of completions reads as one brighter flare rather than a stutter. Do NOT reach for `burst(x, y)` here: that is a blast that shoves and heats matter at screen coordinates, and it is not attached to the body the event belongs to.

Runtime tokens: attract draw matter into a focus / well
Concepts: flare achievement transient decay acknowledgement
Metrics: density a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertpulse a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert density, pulse are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: inspector
Conditions: active
Render: particles
Reduced motion: the flare is a value, not a movement: --field-pulse still rises and falls on a frozen field (the decay runs on wall time, not the motion budget), so style it as a colour/weight step under prefers-reduced-motion instead of a scale or travel
Without motion: the completion is announced in the DOM by the host (a status message, a state change); the flare is an accent on that announcement, never the only report of it

Copy this pattern

<field-root></field-root>
  <div data-body="attract" data-strength="0.8" data-range="220" data-feedback data-when="active"></div>

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

<field-root></field-root>
  <div data-body="attract" data-strength="0.8" data-range="220" data-feedback data-when="active"></div>

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

export default function CompletionFlare() {
  return (
    <FieldField>
      <div data-body="attract" data-strength="0.8" data-range="220" data-feedback data-when="active" />
    </FieldField>
  );
}

{
  "id": "completion-flare",
  "name": "Completion Flare",
  "intent": "mark an achievement on the body it happened to — a bright transient that decays, over a body that holds its own presence",
  "naturalField": "electromagnetic",
  "status": "experimental",
  "primitives": [
    "attract"
  ],
  "concepts": [
    "flare",
    "achievement",
    "transient",
    "decay",
    "acknowledgement"
  ],
  "conditions": [
    "active"
  ],
  "bodies": [
    {
      "body": "attract",
      "strength": 0.8,
      "range": 220,
      "feedback": true,
      "when": "active"
    }
  ],
  "render": [
    "particles"
  ],
  "metrics": [
    "density",
    "pulse"
  ],
  "diagnostics": [
    "inspector"
  ],
  "accessibility": {
    "reducedMotion": "the flare is a value, not a movement: --field-pulse still rises and falls on a frozen field (the decay runs on wall time, not the motion budget), so style it as a colour/weight step under prefers-reduced-motion instead of a scale or travel",
    "meaningWithoutMotion": "the completion is announced in the DOM by the host (a status message, a state change); the flare is an accent on that announcement, never the only report of it"
  },
  "notes": "Composition: the standing `attract` + `data-feedback` is declarative; the flare is `field.pulse(el)` from the handler that already knows the thing completed. That split is on purpose — the engine has no inbound event vocabulary (`data-on` runs the other way: a field trigger OUT to a DOM CustomEvent), so a declared trigger would have to name an app event the engine cannot see. Read `--field-pulse` alongside `--d` in your own CSS; they are separate channels and never overwrite each other. Energy is additive and saturates at 1, so a burst of completions reads as one brighter flare rather than a stutter. Do NOT reach for `burst(x, y)` here: that is a blast that shoves and heats matter at screen coordinates, and it is not attached to the body the event belongs to."
}

Copy this pattern

See also