A React component for creating liquid metal effects on images.
Just for fun, complete ripoff of: liquid.paper.design
npm install liquid-imageimport { LiquidImage } from 'liquid-image'
<LiquidImage src="/liquid-image.png" invert showControls />| Prop | Type | Default | Description | Range |
|---|---|---|---|---|
src |
string |
- | The URL of the image to display | - |
invert |
boolean |
false |
Invert the liquid image | - |
className |
string |
- | The className of the container | - |
width |
number |
- | The width of the image, overrides img width if provided | - |
height |
number |
- | The height of the image, overrides img height if provided | - |
background |
string |
'transparent' |
The background color of the image | - |
refraction |
number |
0.015 |
Refraction amount | [0, 0.06] |
edge |
number |
0.4 |
Edge thickness | [0, 1] |
patternBlur |
number |
0.005 |
Pattern blur amount | [0, 0.05] |
liquid |
number |
0.07 |
Liquid distortion amount | [0, 1] |
speed |
number |
0.3 |
Animation speed | [0, 1] |
patternScale |
number |
2 |
Pattern scale | [1, 10] |
showControls |
boolean |
false |
Display the controls panel | - |