Liquid Chrome

Molten metallic liquid WebGL shader with dynamic Fresnel reflections, Blinn-Phong specular highlights, and pointer ripple physics.

Interactive Playground

Move cursor over canvas to interact

Variant

Flow Speed0.35x

Ripple Frequency2.2

Deformation Depth0.32

Film Grain0.03

Pointer Warp

Anatomy

import { LiquidChrome } from "@shavin/fx";

<div className="relative w-full h-80 rounded-[var(--radius-panel)] overflow-hidden">
  <LiquidChrome
    speed={0.35}
    frequency={2.2}
    amplitude={0.32}
    interactive={true}
    color="theme"
    className="w-full h-full"
  />
</div>

Examples

Obsidian / Pearl Chrome Banner

Dynamic metallic flow reflecting the active design system accent and dark/light mode palette.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <LiquidChrome
    speed={0.3}
    frequency={2.0}
    amplitude={0.35}
    color="theme"
    interactive={true}
    className="w-full h-full"
  />
</div>

Classic Liquid Mercury

High-luster neutral titanium / platinum chrome with silver specular sweeps.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <LiquidChrome
    speed={0.4}
    frequency={2.5}
    amplitude={0.3}
    color="metallic"
    interactive={true}
    className="w-full h-full"
  />
</div>

Props Reference

Prop	Type	Default	Description
color	"theme" \| "accent-dark" \| "accent-light" \| "metallic" \| string \| string[]	"theme"	Color tinting mode: theme reflection, dark obsidian, light pearl, classic silver metallic, or custom palette.
speed	number	0.35	Metallic fluid flow time multiplier.
frequency	number	2.2	Surface ripple frequency and wave detail scale.
amplitude	number	0.32	Molten wave height and depth of normal deformation.
grain	number	0.03	Film grain & dither intensity to eliminate color banding.
interactive	boolean	true	Enables pointer fluid indentation.