Liquid Wave
A mesmerizing fluid dynamics background with interactive mouse-driven waves and customizable colors.
Loading WebGL Simulation...
Installation
pnpm dlx rareui add LiquidWave
Usage
1
Import the component
import LiquidWave from "@/components/rareui/interactive-background/LiquidWave";
2
Use in your application
export default function App() {
return (
<div style={{ width: '100%', height: '500px', position: 'relative' }}>
<LiquidWave />
</div>
);
}
Examples
1
Custom Colors
<LiquidWave
color1="#5227FF"
color2="#FF9FFC"
color3="#B19EEF"
/>
2
Custom Force and Cursor Size
<LiquidWave
mouseForce={30}
cursorSize={150}
/>
3
With Viscosity
<LiquidWave
isViscous={true}
viscous={50}
/>
Features
High-performance WebGL fluid dynamics with advection, diffusion, and pressure handling.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color1 | string | "orange" | Primary gradient color (any CSS color format) |
color2 | string | "orange" | Secondary gradient color (optional) |
color3 | string | "orange" | Tertiary gradient color (optional) |
mouseForce | number | 20 | Strength of mouse interaction (0-100) |
cursorSize | number | 100 | Size of the interaction cursor in pixels |
isViscous | boolean | false | Enable viscous fluid behavior |
viscous | number | 30 | Viscosity strength (only when isViscous is true) |
isBounce | boolean | false | Enable boundary bounce effect |
dt | number | 0.014 | Time delta for simulation step |
resolution | number | 0.5 | Simulation resolution (0.1-1.0, higher = better quality) |
iterationsPoisson | number | 32 | Pressure solver iterations (higher = more accurate) |
iterationsViscous | number | 32 | Viscosity solver iterations |
BFECC | boolean | true | Use BFECC advection for better stability |
className | string | "" | Additional CSS classes for the canvas |