Gem Smoke Effect

2 min read

Soft volumetric smoke wreath with curl-noise drift and internal sparkles. Shader-rendered (continuously animated WebGL2 fragment shader, silhouette-clipped).

Usage

app.applyEffect(item, 'gem_smoke', {
  mode: 'inside',
  intensity: 1.0,
  radius: 1.1,
  palette: 0,           // 0 White, 1 Rose, 2 Emerald
  padding: 0.6,
  offsetX: 0,
  offsetY: 0,
  tint: '#ffffff',
  channels: {
    a: { speed: 0.18, curve: 'linear' },
    b: { speed: 0.45, curve: 'linear' },
  },
});

Parameters

Parameter	Type	Default	Description
`mode`	string	`'inside'`	`inside` / `outside` / `overlay`
`intensity`	number	`1.0`	Density multiplier (0–1.5)
`radius`	number	`1.1`	Smoke ring radius — bell-curve falloff (0.4–1.6)
`palette`	integer	`0`	`0` White, `1` Rose, `2` Emerald
`padding`	number	`0.6`	Bounds expansion (0.2–1.5)
`offsetX` / `offsetY`	number	`0`	Shifts pattern center (-1 to 1)
`tint`	string	`'#ffffff'`	Multiplicative tint
`channels.a`	`{speed, curve}`	`{0.18, linear}`	Drift — curl-noise rotation field
`channels.b`	`{speed, curve}`	`{0.45, linear}`	Sparkle — high-frequency noise spikes

Example: Mystical Reveal

const title = app.create('text', { content: 'Awaken', x: 540, y: 800, fontSize: 80, color: '#ffffff' });
app.applyEffect(title, 'gem_smoke', { palette: 2 /* emerald */, intensity: 1.2 });

Example: Twinkling Background Layer

// Slow drift, fast pulsing sparkles
app.applyEffect(bg, 'gem_smoke', {
  mode: 'outside',
  channels: {
    a: { speed: 0.05, curve: 'linear' },
    b: { speed: 1.5,  curve: 'pulse' },     // strobing sparkles
  },
});

Stacking

app.applyEffect(item, 'heatmap',   { mode: 'inside', palette: 0 });    // glowing core
app.applyEffect(item, 'gem_smoke', { mode: 'outside', palette: 1 });   // rose smoke halo

Related: Heatmap | Liquid Metal | Shader effects overview