About
Immersive hero background that applies animated water ripples to any image, theme-aware out of the box.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds WaterRippleImage to your project and fits it to your theme.
Code
How WaterRippleImage is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
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://cdn.21st.dev/assets/mirror/e7/e702fd6cb0650a2b72ccae34504b088191f3e2c2919e96041979779573843b67.jpg"
/>
</div>
);
}