Liquid Wave
A mesmerizing fluid dynamics background with interactive mouse-driven waves and customizable colors.
Loading WebGL Simulation...
Installation
Run the following command to install the component:
npx rareui add LiquidWaveThis will install the component to components/rareui/ directory.
Usage
import LiquidWave from '@/components/rareui/Interactive Background/LiquidWave';
export default function App() {
return (
<div className="w-full h-screen">
<LiquidWave />
</div>
);
}Custom Colors
<LiquidWave
color1="#5227FF"
color2="#FF9FFC"
color3="#B19EEF"
/>Custom Force and Cursor Size
<LiquidWave
mouseForce={30}
cursorSize={150}
/>With Viscosity
<LiquidWave
isViscous={true}
viscous={50}
/>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 |