Liquid Metal
A shader-based liquid metal effect that transforms images or text into fluid, metallic flows.
Loading Metal Effect...
Installation
pnpm dlx rareui add LiquidMetal
Usage
Usage
1
Import the component
import LiquidMetal from "@/components/rareui/LiquidMetal";
2
Use in your application
export default function MyComponent() {
return (
<div className="w-full h-[600px]">
{/* Basic Usage */}
<LiquidMetal
text="Metal"
/>
{/* Custom Configuration */}
<LiquidMetal
text="Chrome"
speed={0.5}
dispersion={0.02}
edge={0.3}
patternScale={3}
/>
</div>
);
}
Features
High-performance liquid metal effect powered by WebGL shaders.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | RareUI | Text to transform into liquid metal |
imageSource | string | undefined | Optional image URL to use instead of text |
speed | number | 0.3 | Animation speed |
dispersion | number | 0.005 | Refraction/dispersion amount (chromatic aberration) |
edge | number | 0.5 | Sharpness of the edges |
patternBlur | number | 0.005 | Blur amount for the pattern |
liquify | number | 0.08 | Intensity of the liquid distortion effect |
patternScale | number | 2 | Scale of the metallic pattern |