React Heatmap Background
Thermal-imaging heatmap background for React and Next.js — a slowly shifting infrared noise field with drifting hot spots, mapped through a classic blue → cyan → green → yellow → red thermal palette.
React Heatmap Background preview
A background that looks like the output of a thermal camera — a cold blue field breathing with drifting heat signatures that bloom through cyan, green, and yellow into incandescent red. Rendered on a tiny 192×108 offscreen buffer with a pre-baked 256-entry thermal lookup table and bilinear upscaled for free by the GPU, so the effect holds 60fps regardless of viewport size. Zero dependencies, fully palette-driven, and tuned to sit behind hero copy on data-science, observability, infrared, or surveillance-tech marketing pages. Perfect for security dashboards, AIOps landing pages, climate / energy product launches, and anywhere you want the page to feel instrumented.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the heatmap background into my projectRelated Components
Gradient
Smooth two-color gradient sweep
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Topography
Animated contour-line topographic map
Aurora
Emerald northern-lights sheets
Plasma
Vibrant psychedelic plasma wash
Fog
Drifting volumetric fog layers
FAQ
Was this page helpful?
Sign in to leave feedback.