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.

liquid-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.

0px

Customize

Edit props; preview updates instantly.

Customize

Palette

Speed

0.45

Scale

0.80

Warp

0.45

Relief

0.85

Tilt

45°

Highlight

1.45

Roughness

0.58

Ambient

0.28

Stir strength

0.24

Props

Props accepted by LiquidChrome.

Prop	Type	Default	Description
children	ReactNode	—	Content rendered above the canvas. Wrapped in `relative z-10 h-full w-full` so centered layouts resolve.
palette	"nightfire" \| "aurora" \| "nebula" \| "ember" \| "chrome" \| "mercury"	"nightfire"	Color preset. `nightfire` is the default inky liquid with gold + electric-blue studio lights; `aurora` swaps to teal+magenta; `nebula` is violet+cyan; `ember` is warm amber+red; `chrome` and `mercury` are polished silvers for a brighter mood.
colors	string[]	—	Custom 5-stop palette `[base, ambient, lightA, lightB, sparkle]`. Hex or `rgb()`/`rgba()`. Overrides `palette`.
speed	number	0.45	Animation speed multiplier. `0` freezes the surface on its starting pose. Reduced-motion users see a static radial gradient fallback regardless.
scale	number	2.4	Wave field scale. Higher values pack more swirls into the frame; lower values produce big lazy arcs of liquid.
warp	number	1.3	Domain-warp depth (0–3). Drives how tightly the liquid curls back on itself — `0` produces gentle cloud-like waves, higher values create dense ropy reflections.
relief	number	0.85	Surface relief (0.1–4). The implicit Z component of the normal. Lower values yield more mirror-like flat reflections; higher values emboss the surface deeper.
tilt	number	0	Rotation in degrees of the two-light pair around the canvas centre. `0` keeps light A upper-left and light B right-mid; larger values orbit them together.
highlight	number	1.4	Specular highlight intensity (0–3). Brightness of both reflected lights and the rim crescents along curl edges.
roughness	number	0.12	Surface roughness (0–1). `0` produces needle-sharp pinpoint glints; `1` smears them into a soft satin sheen across the whole crest.
ambient	number	0.3	Ambient base glow strength (0–1). Lifts the dead-black shadow so the unlit areas read as a single illuminated volume rather than empty space.
mouseFollow	boolean	true	When `true`, the cursor pushes a soft Gaussian bulge into the height field — the liquid stirs around the pointer.
mouseInfluence	number	0.55	Cursor stir strength (0–1). Multiplied by the active-pointer ease so the bulge fades back to neutral when the pointer leaves.
className	string	—	Extra class names merged onto the outermost wrapper. Width and height are governed here — the canvas fills the container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/liquid-chrome.json

Usage

Import the component and drop it into a render.

demo.tsx28 lines

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>
  );
}