Lazy-uiLazy UI
Star0

Liquid Chrome

An inky liquid surface lit by two coloured studio lights — doubly domain-warped FBM, analytic normals, per-light Blinn-Phong specular, sparkle dust on the crests, and a cursor that stirs the flow. Six palettes from nightfire (black + gold + blue) to polished chrome.

Lazy-ui
Liquid Chrome

Build fluidly.

Two coloured studio lights reflecting across a domain-warped inky surface — gold from the upper-left, electric blue from the right, with sparkle dust catching the crests.

Customize

Palette
Show content
Cursor stir
Speed0.45
Scale0.80
Warp0.45
Relief0.85
Tilt45°
Highlight1.45
Roughness0.58
Ambient0.28
Stir strength0.24

Usage

import { LiquidChrome } from "@/components/lazy-ui/liquid-chrome";

export function Demo() {
  return (
    <LiquidChrome
      palette="nightfire"
      speed={0.45}
      scale={0.8}
      warp={0.45}
      relief={0.85}
      tilt={45}
      highlight={1.45}
      roughness={0.58}
      ambient={0.28}
      mouseInfluence={0.24}
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1
          className="text-5xl tracking-tight text-white"
          style={{ fontFamily: "'Instrument Serif', serif" }}
        >
          Build <span className="italic">fluidly.</span>
        </h1>
      </main>
    </LiquidChrome>
  );
}