Weak core

Decay Notice

let stale, temporary, or completed state fade gracefully

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

"Decay Notice" — let stale, temporary, or completed state fade gracefully. It has a morph layer (assemble matter into a mark/shape (never words, §11)), a memory layer (a decaying trail / hysteresis), and a diffuse layer (spread a quantity over the medium). The active render stack is particles, heatmap.

A state begins strong then naturally releases (weak force: expiration); the element stays semantically clear while visual emphasis decays.

Runtime tokens: morph assemble matter into a mark/shape (never words, §11)memory a decaying trail / hysteresisdiffuse spread a quantity over the medium
Concepts: decay
Metrics: decay a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertage a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertheat a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert decay, age, heat are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: inspector heatmap causality
Conditions: stale
Render: particles · heatmap
Reduced motion: a timestamp and a faded state marker replace the decay animation
Without motion: the state stays announced as text while emphasis fades

Copy this pattern

<field-root></field-root>
  <div data-body="morph" data-strength="0.6" data-range="240" data-feedback></div>
  <div data-body="memory" data-strength="0.5" data-range="280"></div>
  <div data-body="diffuse" data-strength="0.4" data-range="240"></div>

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

<field-root></field-root>
  <div data-body="morph" data-strength="0.6" data-range="240" data-feedback></div>
  <div data-body="memory" data-strength="0.5" data-range="280"></div>
  <div data-body="diffuse" data-strength="0.4" data-range="240"></div>

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

export default function DecayNotice() {
  return (
    <FieldField>
      <div data-body="morph" data-strength="0.6" data-range="240" data-feedback />
      <div data-body="memory" data-strength="0.5" data-range="280" />
      <div data-body="diffuse" data-strength="0.4" data-range="240" />
    </FieldField>
  );
}

{
  "id": "decay-notice",
  "name": "Decay Notice",
  "intent": "let stale, temporary, or completed state fade gracefully",
  "naturalField": "weak",
  "primitives": [
    "morph",
    "memory",
    "diffuse"
  ],
  "bodies": [
    {
      "body": "morph",
      "strength": 0.6,
      "range": 240,
      "feedback": true
    },
    {
      "body": "memory",
      "strength": 0.5,
      "range": 280
    },
    {
      "body": "diffuse",
      "strength": 0.4,
      "range": 240
    }
  ],
  "render": [
    "particles",
    "heatmap"
  ],
  "metrics": [
    "decay",
    "age",
    "heat"
  ],
  "diagnostics": [
    "inspector",
    "heatmap",
    "causality"
  ],
  "accessibility": {
    "reducedMotion": "a timestamp and a faded state marker replace the decay animation",
    "meaningWithoutMotion": "the state stays announced as text while emphasis fades"
  },
  "notes": "A state begins strong then naturally releases (weak force: expiration); the element stays semantically clear while visual emphasis decays.",
  "tier": "core",
  "status": "shipped",
  "concepts": [
    "decay"
  ],
  "conditions": [
    "stale"
  ]
}

Copy this pattern

See also