Move across the field to amplify local signal
Heatcheck thermal studies
Five ways a changing signal can feel cold, active, hot or cooling before any Heatcheck product use.
Waiting for browser capability check.
cold / WGSL thermal field / DPR 1–2
A changing signal becomes weather.
These studies explore five visual moods for activity moving from cold to hot and back toward cool. Instead of showing a score as a static number alone, the field gives it temperature, movement, softness and local intensity.
The purpose is comparison. Lab lets us test which colors and behaviors feel clear, expressive and trustworthy before any visual language is considered for the Heatcheck product.
The five signal conditions
- 01Cold
Broad blue pockets move slowly when no new approved evidence is present.
- 02Emerging
Small violet cells appear before the signal becomes connected.
- 03Building
Violet and coral currents begin to gather and rise.
- 04Hot
Dense warm cells collide at the strongest illustrative energy.
- 05Cooling
A blue front moves across the remaining warm pockets without erasing their history.
Every pixel follows the same small set of rules.
A graphics processor updates the whole image at once. Each point receives a temperature, color and movement value, then the browser redraws the field many times each second.
- Thermal states
- 05 cold through cooling
- Control groups
- 03 shape, signal, surface
- Topographic bands
- 0 off in every preset
- Local interaction
- 01 pointer-driven signal
Large, slow patterns create the body of the field. Smaller variations roughen the edge and keep it from feeling like a simple gradient. A separate pulse can raise and lower the overall signal at a deliberately slow pace.
When the pointer enters the image, it can add a local area of intensity. Radius sets its size and contrast decides whether the effect feels broad and soft or tight and focused.
For curious readers: this is a fragment shader, a short program that decides the color of each pixel. It runs through WebGPU using vGPU. The five states are authored visual studies; they are not currently connected to live Heatcheck reports.
How the thermal image is built
The system starts with broad movement, adds state-specific color and then applies optional surface detail. Keeping those jobs separate makes the visual language easier to tune.
- 01Choose a state
Load the cold, emerging, building, hot or cooling behavior.
- 02Shape the field
Set scale, speed, warp and curl for the main movement.
- 03Set the signal
Control brightness, pulse and pointer response.
- 04Finish the surface
Adjust softness, shadow color, grain and optional bands.
- 05Keep meaning visible
Show a text description beside every illustrative state.
Why study temperature as a visual language?
People understand warmth, cooling and turbulence quickly. Those associations can give a changing signal more emotional weight than a number alone, especially in report openings, motion graphics and ambient backgrounds.
The most useful result is not one perfect animation. It is a controlled family that can stay recognizable while changing color, pace and shape for different contexts. Lab provides a safe place to test that family before deciding where it belongs.
What this study does not prove
- The current fields are illustrative and do not represent live campaign performance.
- Color and motion must never replace the text needed to understand a Heatcheck state.
- WebGPU support and performance vary by device; unsupported browsers need an intentional static experience.
- Product use still requires mapping heat, confidence and freshness separately instead of collapsing them into one dramatic image.
What the controls mean in everyday terms
The controls are grouped by the kind of change a viewer will notice, so experimentation does not require shader knowledge.
- Speed, scale, warp and curl
Change how fast the weather moves, how large its features feel and whether the flow bends or coils.
- Intensity and pulse
Set overall brightness and how strongly the signal slowly rises and falls.
- Mouse signal, radius and contrast
Control how much extra heat follows the pointer, how wide it reaches and how sharp its edge feels.
- Topographic bands
Reveal or remove the pale contour lines. Every authored preset begins with them fully hidden.
- Density and softness
When bands are visible, set how closely they repeat and whether their edges are crisp or diffuse.
- Plushness, shadow hue and grain
Add richer color to dark areas, shift their hue and introduce a small amount of surface texture.
Where the research could go next
These are candidate applications, not approved Heatcheck integrations.
- State transitions
Design short, readable moves between cold, building, hot and cooling conditions.
- Social loops
Create portrait and square motion studies with a fixed duration and repeatable ending.
- Report surfaces
Test a restrained thermal moment behind exact report copy and accessible status text.
- Audio response
Explore whether a soundtrack can shape pulse and flow without obscuring the underlying state.