Weak core

Phase Shift

show a state transition: draft → published, pending → complete, hidden → active

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

"Phase Shift" — show a state transition: draft → published, pending → complete, hidden → active. It has a morph layer (assemble matter into a mark/shape (never words, §11)), and a cohesion layer (flocking — pull toward neighbours). The active render stack is particles, metaballs.

A body transitions between named states (weak-force transformation via morph); the interface shows continuity rather than replacement.

Runtime tokens: morph assemble matter into a mark/shape (never words, §11)cohesion flocking — pull toward neighbours
Concepts: phase shift
Metrics: phase a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertcoherence computed every frame by the platform (proximity · engagement · relationships · age)progress a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert phase, progress are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: inspector causality prediction
Render: particles · metaballs
Reduced motion: a state label and progress marker replace the transition; non-motion styling shows the change
Without motion: the from/to state is named and announced on change

Copy this pattern

<field-root></field-root>
  <div data-body="morph" data-strength="0.7" data-range="260" data-feedback></div>
  <div data-body="cohesion" data-strength="0.5" data-range="240"></div>

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

<field-root></field-root>
  <div data-body="morph" data-strength="0.7" data-range="260" data-feedback></div>
  <div data-body="cohesion" data-strength="0.5" data-range="240"></div>

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

export default function PhaseShift() {
  return (
    <FieldField>
      <div data-body="morph" data-strength="0.7" data-range="260" data-feedback />
      <div data-body="cohesion" data-strength="0.5" data-range="240" />
    </FieldField>
  );
}

{
  "id": "phase-shift",
  "name": "Phase Shift",
  "intent": "show a state transition: draft → published, pending → complete, hidden → active",
  "naturalField": "weak",
  "primitives": [
    "morph",
    "cohesion"
  ],
  "bodies": [
    {
      "body": "morph",
      "strength": 0.7,
      "range": 260,
      "feedback": true
    },
    {
      "body": "cohesion",
      "strength": 0.5,
      "range": 240
    }
  ],
  "render": [
    "particles",
    "metaballs"
  ],
  "metrics": [
    "phase",
    "coherence",
    "progress"
  ],
  "diagnostics": [
    "inspector",
    "causality",
    "prediction"
  ],
  "accessibility": {
    "reducedMotion": "a state label and progress marker replace the transition; non-motion styling shows the change",
    "meaningWithoutMotion": "the from/to state is named and announced on change"
  },
  "notes": "A body transitions between named states (weak-force transformation via morph); the interface shows continuity rather than replacement.",
  "tier": "core",
  "status": "shipped",
  "concepts": [
    "phase shift"
  ]
}

Copy this pattern

See also