Docs·Liquid Chrome

Liquid Chrome

A premium fluid liquid metal shader background effect with interactive mouse distortion.

Installation

pnpm dlx shadcn@latest add @componentry/liquid-chrome

Usage

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

<LiquidChrome 
  baseColor={[0.10, 0.10, 0.10]}
  speed={1.0}
  amplitude={0.6}
  interactive={true}
/>

API Reference

Property	Type	Default
`baseColor` Base RGB color tint. Use values 0.0 - 1.0.	`[number, number, number]`	`[0.1, 0.1, 0.1]`
`speed` Animation speed multiplier.	`number`	`1.0`
`amplitude` Detail level and distortion of the fluid waves.	`number`	`0.6`
`interactive` Enables mouse distortion if true.	`boolean`	`true`
`className` Additional CSS classes for styling.	`string`	—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X