Liquid Chrome Background

Flowing silver folds with studio reflections, sharp metallic highlights, and pointer-driven ripples.

Smooth beveled silver folds reflect soft studio panels with rounded highlights and tone-mapped reflections. Move the pointer to disturb the surface with local ripples while the container stays still.

Liquid Chrome Background is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the liquid-chrome-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/liquid-chrome-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { LiquidChromeBackground } from "@/components/hangry-ui/shader/liquid-chrome-background";

<LiquidChromeBackground scale={1.6} distortion={0.8} speed={0.2} intensity={0.9} roughness={0.3} exposure={1}
  className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">A fluid perspective.</h2>
</LiquidChromeBackground>

Props

Prop	Type	Default	Description
`scale`	`number`	`1.6`	Surface frequency, clamped to 0.5–5. Larger values show more folds.
`distortion`	`number`	`0.8`	Domain-warp strength, clamped to 0–2.
`roughness`	`number`	`0.3`	Reflection softness, clamped to 0–1.
`exposure`	`number`	`1`	Tone-mapped lighting exposure, clamped to 0–4.
`speed`	`number`	`0.2`	Nonnegative flow speed. Set 0 to freeze the ambient motion.
`intensity`	`number`	`0.9`	Reflection brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Add ripples near the pointer.
`children`	`ReactNode`	—	Content placed above the metallic surface.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu