Liquid Metal
Installation
npm i @paper-design/shaders-react
Code
import { LiquidMetal } from '@paper-design/shaders-react';
<LiquidMetal
height={500}
colorBack="#000000"
colorTint="#ffffff"
repetition={4}
softness={0.3}
shiftRed={0.3}
shiftBlue={0.3}
distortion={0.1}
contour={1}
shape="circle"
offsetX={0}
offsetY={0}
scale={0.6}
rotation={0}
speed={1}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorTint | Overlay color | string | Hex, RGB, or HSL color |
| repetition | Density of pattern stripes | number | 1 to 10 |
| softness | Color transition sharpness (0 = hard edge, 1 = smooth gradient) | number | 0 to 1 |
| shiftRed | R-channel dispersion | number | -1 to 1 |
| shiftBlue | B-channel dispersion | number | -1 to 1 |
| distortion | Noise distortion over the stripes pattern | number | 0 to 1 |
| contour | Strength of the distortion on the shape edges | number | 0 to 1 |
| shape | Shape type | enum | | "none" | "circle" | "daisy" | "metaballs" |
| offsetX | Horizontal offset of the graphics center | number | -1 to 1 |
| offsetY | Vertical offset of the graphics center | number | -1 to 1 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.01 to 4 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
| speed | Animation speed | number | 0 to 4 |
Description
Futuristic liquid metal material applied to abstract forms, simulating dynamic surface distortion.