Skip to main content
A glowing gradient of colors flowing through an input shape. The effect creates a smoothly animated wave of intensity across the image, perfect for creating attention-grabbing effects.

​
Features

  • Animated gradient flow
  • Customizable color palette (up to 10 colors)
  • Inner and outer glow controls
  • Contour intensity adjustment
  • Directional animation
  • Image preprocessing for optimal results

​
Basic Usage

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

function App() {
  return (
    <Heatmap
      image="/path/to/logo.png"
      colors={[
        '#11206a',
        '#1f3ba2',
        '#2f63e7',
        '#6bd7ff',
        '#ffe679',
        '#ff991e',
        '#ff4c00',
      ]}
      colorBack="#000000"
      contour={0.5}
      angle={0}
      noise={0}
      innerGlow={0.5}
      outerGlow={0.5}
      speed={1}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
required
Source image/logo to apply the heatmap effect to. The image will be preprocessed automatically in React.
​
colors
string[]
Array of up to 10 gradient colors (from cold to hot) in hex, rgb, or rgba format
​
colorBack
string
default:"'#000000'"
Background color in hex, rgb, or rgba format
​
contour
number
default:"0.5"
Heat intensity near the edges of the input shape
​
angle
number
default:"0"
Direction of the heatwave animation in degrees
​
noise
number
default:"0"
Grain applied across the entire graphic for texture
​
innerGlow
number
default:"0.5"
Size of the heated area inside the input shape
​
outerGlow
number
default:"0.5"
Size of the heated area outside the input shape
​
suspendWhenProcessingImage
boolean
default:"false"
(React only) Suspends the component when the image is being processed. Useful with React Suspense.

​
Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions
​
scale
number
default:"0.75"
Overall zoom level of the graphics
​
rotation
number
default:"0"
Overall rotation angle in degrees
​
offsetX
number
default:"0"
Horizontal offset of the graphics center
​
offsetY
number
default:"0"
Vertical offset of the graphics center

​
Animation Parameters

​
speed
number
default:"1"
Animation speed multiplier
​
frame
number
default:"0"
Manual frame control for animation

​
Presets

The Heatmap shader comes with built-in presets:
  • Default: Blue to red fire gradient
  • Sepia: Warm brown to white gradient with high noise
import { Heatmap, heatmapPresets } from '@paper-design/shaders-react';

function App() {
  return <Heatmap {...heatmapPresets[0].params} image="/logo.png" />;
}

​
Examples

​
Fire Effect

<Heatmap
  image="/logo.png"
  colors={['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00']}
  colorBack="#000000"
  contour={0.5}
  innerGlow={0.5}
  outerGlow={0.5}
  speed={1}
/>

​
Sepia Glow

<Heatmap
  image="/logo.png"
  colors={['#997F45', '#ffffff']}
  colorBack="#000000"
  contour={0.5}
  noise={0.75}
  innerGlow={0.5}
  outerGlow={0.5}
  speed={0.5}
/>

​
Electric Blue

<Heatmap
  image="/logo.png"
  colors={['#000033', '#0066ff', '#00ffff', '#ffffff']}
  colorBack="#000000"
  contour={0.8}
  angle={90}
  innerGlow={0.3}
  outerGlow={0.7}
  speed={2}
/>

​
Image Preprocessing

​
React (Automatic)

In React, image preprocessing happens automatically: 
<Heatmap image="/logo.png" suspendWhenProcessingImage={true} />
Set suspendWhenProcessingImage to true to use React Suspense during processing.

​
Vanilla JavaScript (Manual)

For vanilla JavaScript, you must preprocess images manually: 
import { toProcessedHeatmap } from '@paper-design/shaders';

const result = await toProcessedHeatmap('/logo.png');
const processedUrl = URL.createObjectURL(result.blob);

// Use processedUrl as u_image uniform

​
What Preprocessing Does

The preprocessing function:
  1. Converts the image to grayscale
  2. Generates multiple blur levels
  3. Creates edge detection data
  4. Packages everything into RGB channels of a single image
This allows the shader to efficiently compute the heatmap effect.

​
Technical Details

​
Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API: 
{
  u_image: processedImageUrl, // Must be preprocessed!
  u_colors: [
    [r, g, b, a],
    [r, g, b, a],
    // ... up to 10 colors
  ],
  u_colorsCount: 7,
  u_colorBack: [r, g, b, a],
  u_contour: 0.5,
  u_angle: 0,
  u_noise: 0,
  u_innerGlow: 0.5,
  u_outerGlow: 0.5,
}

​
Animation

The Heatmap shader features:
  • Multiple animated waves flowing through the shape
  • Smooth gradient transitions
  • Directional control via angle parameter
  • Synchronized timing for natural appearance

​
Color Gradient

Colors are interpolated smoothly across the heat levels. The gradient flows from:
  • First color (cold/dark areas)
  • Middle colors (medium heat)
  • Last color (hot/bright areas)
You can use 2-10 colors for different effects.

​
Performance Notes

  • Animated shader with continuous rendering
  • Image preprocessing happens once per image
  • Preprocessing time depends on image size (~100-500ms typical)
  • Multiple blur passes computed during preprocessing
  • Runtime performance is excellent after preprocessing
  • Best with logo/icon images rather than photos