Heatmap

Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.

Props

originstring

Default:center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

origin

stringDefault: center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center position of the heatmap shape

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center position of the heatmap shape

scalenumber

Default:1

Scale of the heatmap shape (1 = default size)

scale

numberDefault: 1

Scale of the heatmap shape (1 = default size)

rotationnumber

Default:0

Rotation of the heatmap shape in degrees

rotation

numberDefault: 0

Rotation of the heatmap shape in degrees

colorAstring

Default:#02010f

Cold color (used when no gradient stops are set)

colorA

stringDefault: #02010f

Cold color (used when no gradient stops are set)

colorBstring

Default:#f9e25f

Hot color (used when no gradient stops are set)

colorB

stringDefault: #f9e25f

Hot color (used when no gradient stops are set)

stopsobject

Default:

[{"color":"#02010f","position":0},{"color":"#2a0a8a","position":0.2},{"color":"#a41c9b","position":0.45},{"color":"#e8632b","position":0.7},{"color":"#f9e25f","position":0.9},{"color":"#ffffff","position":1}]

Multi-stop gradient colors (overrides Color A / Color B when set)

stops

objectDefault:

[{"color":"#02010f","position":0},{"color":"#2a0a8a","position":0.2},{"color":"#a41c9b","position":0.45},{"color":"#e8632b","position":0.7},{"color":"#f9e25f","position":0.9},{"color":"#ffffff","position":1}]

Multi-stop gradient colors (overrides Color A / Color B when set)

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:oklab

Color space for the heat ramp interpolation

colorSpace

Color space for the heat ramp interpolation

innerGlownumber

Default:0.4

Heat filling the inside of the shape

innerGlow

numberDefault: 0.4

Heat filling the inside of the shape

outerGlownumber

Default:0.2

Heat radiating beyond the silhouette

outerGlow

numberDefault: 0.2

Heat radiating beyond the silhouette

contournumber

Default:0.5

Heat concentrated along the shape boundary

contour

numberDefault: 0.5

Heat concentrated along the shape boundary

anglenumber

Default:90

Direction the heat waves travel, in degrees

angle

numberDefault: 90

Direction the heat waves travel, in degrees

speednumber

Default:1

Speed of the flowing heat. 0 pauses.

speed

numberDefault: 1

Speed of the flowing heat. 0 pauses.

shapeShapeConfig

Default:circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shape

ShapeConfigDefault: circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shapeSdfUrlstring

Default:""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

shapeSdfUrl

stringDefault: ""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <Heatmap />
</Shader>

<Shader>
  <Heatmap />
</Shader>

<Shader>
  <Heatmap />
</Shader>

<Shader>
  <Heatmap />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Heatmap', props: {} }
  ]
})

Heart

HexGrid