Heatmap Background

Flowing thermal colors move from cool blue through green and yellow to hot red.

Flowing thermal colors move from cool blue through green and yellow to hot red. Hover to add heat around the pointer. The temperatures are decorative and do not represent measured data.

Heatmap Background is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the heatmap-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/heatmap-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { HeatmapBackground } from "@/components/hangry-ui/shader/heatmap-background";

<HeatmapBackground scale={1.5} speed={0.2} intensity={0.9}
  className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">Turn up the heat.</h2>
</HeatmapBackground>

Props

Prop	Type	Default	Description
`scale`	`number`	`1.5`	Field frequency, clamped to 0.25–6.
`speed`	`number`	`0.2`	Nonnegative ambient animation speed. Set 0 to freeze the ambient field.
`intensity`	`number`	`0.9`	Background brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Enable the pointer effect.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu