heatmap
A glowing animated gradient flowing through any silhouette. Up to ten palette colors, controllable wave direction and noise.
Preview
live Upload your own silhouette or logo (SVG / PNG with transparency works best). Install
npm npm i @devmischief/shaders-svelte Code
import { Heatmap } from '@devmischief/shaders-svelte';
<Heatmap
width={1280}
height={720}
colors={['#112069', '#1f3ca3', '#3265e7', '#6bd8ff', '#ffe77a', '#ff9a1f', '#ff4d00']}
colorBack="#000000"
contour={0.5}
angle={0}
noise={0}
innerGlow={0.5}
outerGlow={0.5}
scale={0.75}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="contain"
/>
Shader Props
10 | name | description | type | values |
|---|
| image | Source image used as the heat shape. Silhouettes and logos work best. | string | url |
| colors | Heatmap gradient colors (up to 10). | string[] | hex / rgb |
| colorBack | Background color shown behind the shape. | string | hex / rgba |
| contour | Heat intensity near the edges of the shape. | number | 0 → 1 |
| angle | Direction of the flowing heatwaves. | number | 0 → 360° |
| noise | Grain applied across the entire graphic. | number | 0 → 1 |
| innerGlow | Size of the heated area inside the shape. | number | 0 → 1 |
| outerGlow | Size of the heated area outside the shape. | number | 0 → 1 |
| speed | Animation speed of the heatwaves. | number | 0 → 3 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
8 | name | description | type | values |
|---|
| scale | Overall zoom level of the graphics. | number | 0.01 → 4 |
| rotation | Overall rotation angle of the graphics. | number | 0 → 360 |
| offsetX | Horizontal offset of the graphics. | number | −1 → 1 |
| offsetY | Vertical offset of the graphics. | number | −1 → 1 |
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |