Electromagnetic systems

Latency Ripple

show delay, loading, sync, and distributed system response as waves

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

"Latency Ripple" — show delay, loading, sync, and distributed system response as waves. It has a propagate layer (travelling waves through the medium), a diffuse layer (spread a quantity over the medium), a fieldflow layer (solar prominences, aurora, plasma streams, guided matter), and a memory layer (a decaying trail / hysteresis). Matter follows the field geometry because of fieldflow, not the field-owning force itself. The active render stack is streamlines, field-lines, particles, trails.

A signal propagates outward and fieldflow carries it to affected regions; diffuse damps slow or blocked areas so delay reads as distance, not a spinner.

Runtime tokens: propagate travelling waves through the mediumdiffuse spread a quantity over the mediumfieldflow solar prominences, aurora, plasma streams, guided mattermemory a decaying trail / hysteresis
Concepts: ripple
Metrics: latency a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertsignal a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertdamping a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inertsync a semantic lane — drive it with data-field-<metric> (or a domain model); without that its --field-<metric> stays inert latency, signal, damping, sync are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.
Diagnostics: contours force-vectors prediction
Render: streamlines · field-lines · particles · trails
Reduced motion: a sync timeline with an affected-region list and latency badges
Without motion: delay becomes a per-region latency badge and a timeline rather than a traveling wave

Copy this pattern

<field-root></field-root>
  <div data-body="propagate" data-strength="1" data-range="400" data-feedback></div>
  <div data-body="diffuse" data-strength="0.7" data-range="320"></div>
  <div data-body="fieldflow" data-strength="0.6" data-range="0"></div>
  <div data-body="memory" data-strength="0.5" data-range="280"></div>

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

<field-root></field-root>
  <div data-body="propagate" data-strength="1" data-range="400" data-feedback></div>
  <div data-body="diffuse" data-strength="0.7" data-range="320"></div>
  <div data-body="fieldflow" data-strength="0.6" data-range="0"></div>
  <div data-body="memory" data-strength="0.5" data-range="280"></div>

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

export default function LatencyRipple() {
  return (
    <FieldField>
      <div data-body="propagate" data-strength="1" data-range="400" data-feedback />
      <div data-body="diffuse" data-strength="0.7" data-range="320" />
      <div data-body="fieldflow" data-strength="0.6" data-range="0" />
      <div data-body="memory" data-strength="0.5" data-range="280" />
    </FieldField>
  );
}

{
  "id": "latency-ripple",
  "name": "Latency Ripple",
  "intent": "show delay, loading, sync, and distributed system response as waves",
  "naturalField": "electromagnetic",
  "primitives": [
    "propagate",
    "diffuse",
    "fieldflow",
    "memory"
  ],
  "bodies": [
    {
      "body": "propagate",
      "strength": 1,
      "range": 400,
      "feedback": true
    },
    {
      "body": "diffuse",
      "strength": 0.7,
      "range": 320
    },
    {
      "body": "fieldflow",
      "strength": 0.6,
      "range": 0
    },
    {
      "body": "memory",
      "strength": 0.5,
      "range": 280
    }
  ],
  "render": [
    "streamlines",
    "field-lines",
    "particles",
    "trails"
  ],
  "metrics": [
    "latency",
    "signal",
    "damping",
    "sync"
  ],
  "diagnostics": [
    "contours",
    "force-vectors",
    "prediction"
  ],
  "accessibility": {
    "reducedMotion": "a sync timeline with an affected-region list and latency badges",
    "meaningWithoutMotion": "delay becomes a per-region latency badge and a timeline rather than a traveling wave"
  },
  "notes": "A signal propagates outward and fieldflow carries it to affected regions; diffuse damps slow or blocked areas so delay reads as distance, not a spinner.",
  "tier": "systems",
  "status": "shipped",
  "concepts": [
    "ripple"
  ]
}

Copy this pattern

See also