← all recipes

"System Pulse" — show the living rhythm of a product, workflow, or data system. It has a propagate layer (travelling waves through the medium), a thermal layer (agitate matter at a temperature), a memory layer (a decaying trail / hysteresis), a cohesion layer (flocking — pull toward neighbours), and a spawn layer (emit new matter (a budgeted source)). The active render stack is field-lines, heatmap, streamlines, particles.

The system emits a low-frequency pulse that propagates as an ambient heartbeat, thermal heat reflecting live activity while cohesion reads sync and memory holds the trend, the emitter (spawn) issuing each beat without distracting from content.

Runtime tokens

propagate thermal memory cohesion spawn

Concepts

pulse heartbeat

Metrics

pulse health sync heat pulse, health, sync, heat are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.

Diagnostics

energy contours inspector

Render

field-lines · heatmap · streamlines · particles

Reduced motion

a health rail with a pulse timestamp and a static system-status indicator

Without motion

system health is a labelled status indicator with a last-pulse timestamp and a sync state

<field-root></field-root>
  <div data-body="propagate" data-strength="0.9" data-range="400" data-feedback></div>
  <div data-body="thermal" data-strength="0.6" data-range="300"></div>
  <div data-body="memory" data-strength="0.5" data-range="260"></div>
  <div data-body="cohesion" data-strength="0.5" data-range="280"></div>
  <div data-body="spawn" data-strength="0.5" data-range="240"></div>