← all recipes

"Attention Weather" — show system urgency, density, and activity across a dashboard. It has a gravity layer (universal attraction toward mass), a thermal layer (agitate matter at a temperature), a pressure layer (relax crowding (incompressibility)), a diffuse layer (spread a quantity over the medium), and a memory layer (a decaying trail / hysteresis). The active render stack is heatmap, metaballs, particles.

Mass falls toward what matters and heat rises where the system runs hot — gravitational priority and thermal weather translated to a dashboard.

Runtime tokens

gravity thermal pressure diffuse memory

Concepts

weather

Metrics

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

Diagnostics

heatmap energy contours inspector

Render

heatmap · metaballs · particles

Reduced motion

a status rail with a pressure badge per section and a priority-ordered list

Without motion

section tone, a numeric pressure badge, and priority ordering carry urgency without animation

<field-root></field-root>
  <div data-body="gravity" data-strength="1" data-range="380" data-feedback></div>
  <div data-body="thermal" data-strength="0.8" data-range="320"></div>
  <div data-body="pressure" data-strength="0.7" data-range="300"></div>
  <div data-body="diffuse memory" data-strength="0.5" data-range="260"></div>