Heatmap Effect

3 min read

The heatmap effect renders an animated thermal halo with domain-warped fbm turbulence. It’s a shader-rendered effect — a continuously animated WebGL2 fragment shader composited against the item’s silhouette.

Reads as fire when filling text, and as a hot glow when haloing a shape.

Usage

app.applyEffect(item, 'heatmap', {
  mode: 'inside',
  intensity: 1.0,
  radius: 0.85,
  palette: 0,
  padding: 0.4,
  offsetX: 0,
  offsetY: 0,
  tint: '#ffffff',
  channels: {
    a: { speed: 0.4,  curve: 'linear' },
    b: { speed: 0.56, curve: 'linear' },
  },
});

Parameters

Parameter	Type	Default	Description
`mode`	string	`'inside'`	Composite mode: `inside` (fill silhouette), `outside` (halo around edge), `overlay` (multiply blend on item)
`intensity`	number	`1.0`	Brightness multiplier (0–1.5)
`radius`	number	`0.85`	Falloff distance, normalized to bounds (0.2–1.5)
`palette`	integer	`0`	Color preset: `0` Hot (red/yellow), `1` Cool (blue/cyan), `2` Violet
`padding`	number	`0.4`	Bounds expansion as fraction of item dimension (0–1.5)
`offsetX`	number	`0`	Shifts shader pattern center horizontally (-1 to 1)
`offsetY`	number	`0`	Shifts shader pattern center vertically (-1 to 1)
`tint`	string	`'#ffffff'`	Multiplicative color tint (white = no bias)
`channels.a.speed`	number	`0.4`	Flow channel speed multiplier
`channels.a.curve`	string	`'linear'`	Flow time curve transform
`channels.b.speed`	number	`0.56`	Shimmer channel speed multiplier
`channels.b.curve`	string	`'linear'`	Shimmer time curve transform

Curve options: linear, sine, triangle, pulse, ease, sawtooth, bounce, noise. See shader effects overview for what each does.

Defaults by Item Type

When mode isn’t specified, the system picks based on item type:

Text → inside (fire-text look)
Image (Raster) → overlay (image stays visible, takes on heat coloring)
Path / Shape / Group → outside (halo around the edge)

Example: Fire-text Title

const title = app.create('text', { content: 'EPIC', x: 540, y: 400, fontSize: 96, color: '#ffffff' });
app.applyEffect(title, 'heatmap', { palette: 0, intensity: 1.3 });

Example: Strobing Glow

app.applyEffect(item, 'heatmap', {
  channels: {
    a: { speed: 1.0, curve: 'linear' },     // steady flow
    b: { speed: 2.0, curve: 'pulse' },      // strobing shimmer
  },
});

Live Updates

Update params on a live heatmap without re-creating it:

app.effectSystem.setEffectParams(item, 'heatmap', { intensity: 1.5 });

Stacking with Other Shaders

Heatmap stacks freely with liquid_metal and gem_smoke. Each runs independently:

app.applyEffect(item, 'heatmap',   { mode: 'inside' });
app.applyEffect(item, 'gem_smoke', { mode: 'outside', palette: 0 });

Removal

// Remove just heatmap (siblings stay)
app.effectSystem.removeEffectByType(item, 'heatmap');

// Remove all effects on the item
app.effectSystem.removeEffectsFrom(item);

Related: Liquid Metal | Gem Smoke | Shader effects overview