← all recipes

"Change Shockwave" — show the downstream impact of a change across a system. It has a propagate layer (travelling waves through the medium), a link layer (ropes / cloth between neighbours), a pressure layer (relax crowding (incompressibility)), a morph layer (assemble matter into a mark/shape (never words, §11)), and a memory layer (a decaying trail / hysteresis). The active render stack is streamlines, field-lines, links, particles.

A change emits a wave that propagates along links: immediate dependencies light first, distant ones respond damped and late, and critical downstream effects raise pressure (propagation carries the wavefront; the weak interaction lets items morph).

Runtime tokens

propagate link pressure morph memory

Concepts

shockwave blast radius

Metrics

impact latency risk distance impact, latency, distance are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.

Diagnostics

contours topology causality prediction

Render

streamlines · field-lines · links · particles

Reduced motion

an impact tree with an affected-item list and downstream badges

Without motion

each affected item is listed by dependency distance with a risk badge, ordered by impact

<field-root></field-root>
  <div data-body="propagate" data-strength="1" data-range="400" data-feedback></div>
  <div data-body="link" data-strength="0.7" data-range="320"></div>
  <div data-body="pressure" data-strength="0.6" data-range="280"></div>
  <div data-body="morph" data-strength="0.4" data-range="220"></div>
  <div data-body="memory" data-strength="0.4" data-range="260"></div>