Turn interactions into
generative art.

Track clicks, movements, scrolls, and hovers. Render them as heatmaps, constellations, flow fields, topographic maps, and more. 8 modes. 8 palettes. Zero dependencies.

8 render modes

Every mode reads the same interaction data. Each one tells a different visual story. Click any canvas to regenerate.

heatmapdensity gradients
constellationconnected star map
flowfieldmovement vectors
topographiccontour elevation
trailsfading particle paths
auroraflowing gradient bands
ringsconcentric click rings
meshtriangulated network

8 color palettes

From thermal infrared to ocean depths. Each palette has 8 carefully tuned gradient stops. Or pass your own colors.

thermal
ocean
neon
sunset
monochrome
mint
lavender
fire

By the numbers

8
Render modes
8
Color palettes
0
Dependencies
10kb
Packed size

What it tracks

Clicks

Every click with position. Weighted 3x in visualizations. Touch events on mobile.

Movement

Mouse path with velocity-based intensity. Configurable sampling rate (default 50ms).

Hovers

Detects when the cursor pauses. Configurable threshold (default 500ms). Weighted 2x.

Scroll

Scroll position mapped to page coordinates. Shows which sections get attention.

Hotspots

Grid-based density clustering. Finds the top 5 most active areas automatically.

Export

Export as PNG image or JSON data. Import data to replay and re-render in any mode.

Quick start

import { Heatprint } from 'heatprint'

// Start tracking
const hp = new Heatprint({
  mode: 'constellation',
  palette: 'neon',
})
hp.start()

// Render to canvas
const canvas = hp.render()
document.body.appendChild(canvas)

// Switch modes on the fly
hp.render('topographic')
hp.render('aurora')
hp.render('mesh')

// Export as PNG
const png = hp.exportPNG()

// Get interaction stats
const stats = hp.getStats()
// → { clicks: 42, moves: 1200, hotspots: [...], ... }

Every mode

Heatmap

Classic density visualization. Gaussian blur smoothing. Click zones glow hottest.

Constellation

Points connected by proximity like star maps. Glow halos on click points.

Flow Field

Movement direction shown as curved vectors. Velocity controls intensity.

Topographic

Contour lines from density elevation. Looks like terrain maps of behavior.

Trails

Fading particle paths trace the mouse journey. Click bursts radiate at stops.

Aurora

Flowing gradient bands. Movement density creates waves of color across the canvas.

Rings

Concentric circles radiate outward from each click point. Hover zones glow softly.

Mesh

Triangulated network connecting nearby points. Filled faces with low opacity for depth.

Disclaimer

Experimental, open-source software. Provided as-is. No warranties. DYOR. Built by 0xDragoon.