Water Ripple Effect

1"use client";
2 
3import { useRef, useEffect } from "react";
4import * as THREE from "three";
5 
6interface WaterRippleEffectProps {
7  imageSrc: string;
8  width?: number;
9  height?: number;
10  waveIntensity?: number;
11  rippleIntensity?: number;
12  animationSpeed?: number;
13  hoverRippleMultiplier?: number;
14  transitionSpeed?: number;
15  className?: string;
16  containerClassName?: string;
17  scale?: number;
18  waveFrequency?: number;
19  rippleFrequency?: number;
20  distortionAmount?: number;
21  onHover?: () => void;
22  onLeave?: () => void;
23}
24 
25export default function WaterRippleEffect({
26  imageSrc,
27  width = 920,
28  height = 955,
29  waveIntensity = 0.006,
30  rippleIntensity = 0.012,
31  animationSpeed = 1.0,
32  hoverRippleMultiplier = 4.0,
33  transitionSpeed = 0.08,
34  className = "",
35  containerClassName = "",
36  scale = 1.0,
37  waveFrequency = 10.0,
38  rippleFrequency = 20.0,
39  distortionAmount = 0.008,
40  onHover,
41  onLeave,
42  ...props
43}: WaterRippleEffectProps & React.HTMLAttributes<HTMLDivElement>) {
44  const mountRef = useRef<HTMLDivElement>(null);
45  const sceneRef = useRef<THREE.Scene | null>(null);
46  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
47  const materialRef = useRef<THREE.ShaderMaterial | null>(null);
48  const mouseRef = useRef({ x: 0.5, y: 0.5 });
49  const timeRef = useRef(0);
50  const isHoveredRef = useRef(false);
51 
52  useEffect(() => {
53    const mountElement = mountRef.current;
54    if (!mountElement) return;
55    const scene = new THREE.Scene();
56    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
57    const renderer = new THREE.WebGLRenderer({
58      antialias: true,
59      alpha: true,
60      powerPreference: "high-performance",
61      precision: "highp",
62    });
63 
64    renderer.setSize(width, height);
65    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
66    renderer.setClearColor(0x000000, 0);
67    mountElement.appendChild(renderer.domElement);
68    const textureLoader = new THREE.TextureLoader();
69    const texture = textureLoader.load(imageSrc, (loadedTexture) => {
70      loadedTexture.magFilter = THREE.LinearFilter;
71      loadedTexture.minFilter = THREE.LinearMipmapLinearFilter;
72      loadedTexture.wrapS = THREE.ClampToEdgeWrapping;
73      loadedTexture.wrapT = THREE.ClampToEdgeWrapping;
74      loadedTexture.generateMipmaps = true;
75      loadedTexture.needsUpdate = true;
76    });
77 
78    const vertexShader = `
79      varying vec2 vUv;
80      varying vec2 vPosition;
81 
82      void main() {
83        vUv = uv;
84// … truncated