Heatmap

Installation

npm i @paper-design/shaders-react

Code

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

<Heatmap
  width={1280}
  height={720}
  image="https://shaders.paper.design/diamond.webp"
  colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33", "#33cc99", "#3399cc", "#3333cc"]}
  colorBack="#000000"
  contour={0.5}
  angle={0}
  noise={0}
  innerGlow={0.5}
  outerGlow={0.5}
  speed={1}
  scale={0.75}
/>

Shader Props

NameDescriptionTypeValues
imageThe image to use for the effectHTMLImageElement | stringImage object or URL
colorsUp to 10 colors used to color the heatmapstring[]Hex, RGB, or HSL color
colorBackBackground colorstringHex, RGB, or HSL color
contourThe heat intensity near the edges of the input shapenumber0 to 1
angleThe direction of the heatwaves (angle relative to the shape)number0 to 360
noiseGrain applied across the entire graphicnumber0 to 1
innerGlowThe size of the heated area inside the input shapenumber0 to 1
outerGlowThe side of the heated area outside the input shapenumber0 to 1

Common Props

NameDescriptionTypeValues
speedAnimation speednumber—
frameStarting animation framenumber—
scaleOverall zoom level of the graphicsnumber0.01 to 4
rotationOverall rotation angle of the graphicsnumber0 to 360
offsetXHorizontal offset of the graphics centernumber-1 to 1
offsetYVertical offset of the graphics centernumber-1 to 1
widthCSS width style of the shader elementnumber | string—
heightCSS height style of the shader elementnumber | string—
fitHow to fit the rendered shader into the canvas dimensionsenum
| "contain" | "cover"
worldWidthVirtual width of the graphic before it's scaled to fit the canvasnumber—
worldHeightVirtual height of the graphic before it's scaled to fit the canvasnumber—
originXReference point for positioning world width in the canvasnumber0 to 1
originYReference point for positioning world height in the canvasnumber0 to 1
minPixelRatioMinimum pixel ratio to use when rendering the shadernumber—
maxPixelCountMaximum pixel count that the shader may processnumber—

Description

A glowing gradient of colors flowing through an input image. It can for example shift from cool blues to hot reds, like thermal energy radiating through the shape. The effect creates a smoothly animated wave of intensity across the image.