Installation
Usage
import RippleDistortion from "@/components/ruixen/ripple-distortion";
export default function App() {
return (
<div className="relative h-screen w-full">
<RippleDistortion
imageSrc="/path/to/your/image.jpg"
frequency={30.0}
amplitude={0.02}
speed={5.0}
className="w-full h-full"
/>
<div className="relative z-10">{/* Your content here */}</div>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc | string | - | Path to the image to be distorted |
frequency | number | 30.0 | Frequency of the ripple waves |
amplitude | number | 0.02 | Amplitude/strength of the distortion effect |
speed | number | 5.0 | Speed of the ripple animation |
className | string | "" | Additional CSS classes |
Features
- Interactive: Ripples follow mouse movement
- WebGL Powered: Uses Three.js for smooth performance
- Customizable: Adjustable wave properties
- Responsive: Automatically adapts to container size