WaterRippleImage

Heroes 1.2K

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>
  );
}