Components
WaterRippleImage
Immersive hero background that applies animated water ripples to any image, theme-aware out of the box.
import { WaterRippleImage } from "@/components/ui/water-ripple-image";
export default function DemoOne() {
return (
<div className="min-h-screen">
<WaterRippleImage
blueish={0.4}
scale={7}
illumination={0.15}
surfaceDistortion={0.03}
waterDistortion={0.02}
src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
/>
</div>
);
}