3D & WebGLNew
Liquid Metal
A flowing chrome surface in WebGL. It shimmers on its own and follows the cursor. Can also fill text.
Customize
tint
Based on Liquid Metal (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| variant | 'chrome' | 'mercury' | 'gold' | 'oil' | "chrome" | Surface material. |
| distortion | number | 1 | Wave strength. 0 is a nearly flat sheet, 2 is molten. |
| speed | number | 1 | Flow speed. |
| pointerInfluence | boolean | true | The cursor pushes the metal. |
| maskText | boolean | false | Fill only the text inside with metal. |
| paused | boolean | false | Freeze on the current frame. |
| children | ReactNode | — | Content over the metal, or text to fill. |
| tint | string | "#ffffff" | Colour the metal is tinted with, like anodised metal. White keeps the variant as is. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge