Liquid Metal Effect

2 min read

Reflective chrome flowing surface with anisotropic streaks and specular highlights. Shader-rendered (continuously animated WebGL2 fragment shader, silhouette-clipped).

Usage

app.applyEffect(item, 'liquid_metal', {
  mode: 'inside',
  intensity: 1.0,
  radius: 0.95,
  palette: 0,           // 0 Chrome, 1 Gold, 2 Copper
  padding: 0.5,
  offsetX: 0,
  offsetY: 0,
  tint: '#ffffff',
  channels: {
    a: { speed: 0.3,  curve: 'linear' },
    b: { speed: 0.48, curve: 'linear' },
  },
});

Parameters

Parameter	Type	Default	Description
`mode`	string	`'inside'`	`inside` / `outside` / `overlay`
`intensity`	number	`1.0`	Brightness multiplier (0–1.5)
`radius`	number	`0.95`	Falloff distance (0.2–1.5)
`palette`	integer	`0`	`0` Chrome, `1` Gold, `2` Copper
`padding`	number	`0.5`	Bounds expansion (0–1.5)
`offsetX` / `offsetY`	number	`0`	Shifts pattern center (-1 to 1)
`tint`	string	`'#ffffff'`	Multiplicative tint
`channels.a`	`{speed, curve}`	`{0.3, linear}`	Streaks — drift motion of reflection field
`channels.b`	`{speed, curve}`	`{0.48, linear}`	Bands — sharpened sin-wave reflection oscillation

Example: Premium Logo

const logo = app.create('text', { content: 'AURIO', x: 540, y: 600, fontSize: 120, color: '#ffffff' });
app.applyEffect(logo, 'liquid_metal', { palette: 1 /* gold */, intensity: 1.2 });

Example: Subtle Texture

// Slow-moving chrome on a button background
app.applyEffect(button, 'liquid_metal', {
  palette: 0,
  intensity: 0.5,
  channels: { a: { speed: 0.1, curve: 'linear' } },
});

Stacking

Combine with other shader effects for layered surfaces:

app.applyEffect(item, 'liquid_metal', { palette: 1 });            // gold base
app.applyEffect(item, 'gem_smoke',   { mode: 'outside', palette: 1 }); // rose smoke halo

Related: Heatmap | Gem Smoke | Shader effects overview