Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

Heatmap applies a multi-color glowing gradient that flows through an input shape or logo. The effect produces inner and outer glows that animate along a configurable axis, with support for up to 10 gradient colors.
This shader requires an image preprocessing step before passing to the GPU. The toProcessedHeatmap helper must be called first to generate the required texture encoding. The React component handles this automatically. In vanilla JS, call toProcessedHeatmap yourself and pass the result as u_image.
toProcessedHeatmap uses the Canvas 2D API for image processing, which is not supported in Safari’s WebGL context without the preprocessing step. Always use toProcessedHeatmap rather than passing the raw image directly.

​
Usage

import { Heatmap } from '@paper-design/shaders-react';

export default function Example() {
  return (
    <Heatmap
      image="/my-logo.png"
      speed={1}
      contour={0.5}
      angle={0}
      noise={0}
      innerGlow={0.5}
      outerGlow={0.5}
      colorBack="#000000"
      colors={['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00']}
      style={{ width: 400, height: 400 }}
    />
  );
}
The React component calls toProcessedHeatmap internally and re-runs it whenever image changes. Use the suspendWhenProcessingImage prop to integrate with React Suspense:
<Suspense fallback={<div>Loading...</div>}>
  <Heatmap image="/my-logo.png" suspendWhenProcessingImage />
</Suspense>

​
Props

​
image
string (React) | HTMLImageElement (vanilla JS)
required
The source image (logo, icon, or shape) to apply the heatmap effect to. In React, pass a URL string. In vanilla JS, pass the pre-processed HTMLImageElement returned by toProcessedHeatmap.
​
speed
number
default:"1"
Animation playback speed multiplier.
​
colors
string[]
Array of up to 10 CSS color strings defining the heatmap gradient from coolest to hottest.
​
colorBack
string
default:"'#000000'"
Background color shown behind the effect.
​
contour
number
default:"0.5"
Heat intensity near the edges of the input shape. Range: 0 to 1.
​
innerGlow
number
default:"0.5"
Size of the heated area inside the input shape. Range: 0 to 1.
​
outerGlow
number
default:"0.5"
Size of the heated area outside the input shape. Range: 0 to 1.
​
angle
number
default:"0"
Direction of the heatwave animation in degrees. Range: 0 to 360.
​
noise
number
default:"0"
Amount of grain applied across the entire graphic. Range: 0 to 1.
​
suspendWhenProcessingImage
boolean
default:"false"
React only. When true, the component suspends while toProcessedHeatmap is running. Wrap in a <Suspense> boundary to provide a fallback.

​
Presets

The following presets are exported from @paper-design/shaders-react:
ExportNameDescription
defaultPresetDefaultClassic heatmap from deep blue to orange-red
sepiaPresetSepiaTwo-color sepia tone with added noise
import { heatmapPresets } from '@paper-design/shaders-react';

​
toProcessedHeatmap helper

toProcessedHeatmap performs a CPU-side preprocessing pass that encodes the image into the multi-channel texture the shader expects: 
import { toProcessedHeatmap } from '@paper-design/shaders';

const { blob } = await toProcessedHeatmap('/my-logo.png');
// or pass a File object:
const { blob } = await toProcessedHeatmap(file);
The returned blob is a PNG where:
  • R channel — contour (edge gradient)
  • G channel — outer blur
  • B channel — inner blur
This preprocessing step is required for correct rendering and Safari compatibility.