Liquid Chrome
NewPro
Reflective liquid metal that ripples slowly. A click sends a ripple out from that point.
Liquid metal
Click to send a ripple
Customize
#f4ede3
1
1
4
Installation
Liquid Chrome is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy liquid-chrome.tsx into components/ui and run npm install motion.
Usage
import { LiquidChrome } from "@/components/ui/liquid-chrome";
<section className="relative h-[600px]">
<LiquidChrome baseColor="#f4ede3" amplitude={1} frequency={4} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| baseColor | string | "#f4ede3" | Metal tint as a hex value. |
| speed | number | 1 | Flow speed multiplier. |
| amplitude | number | 1 | Wave height, from 0 to 2. |
| frequency | number | 4 | Wave density. Higher values make tighter ripples. |
| interactive | boolean | true | Raise a soft bulge under the pointer and send a ripple from each click or tap. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion