cheryglsljs 1.1.4 → 1.1.7

package/dist/cherry.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("Cherryglsl",[],n):"object"==typeof exports?exports.Cherryglsl=n():e.Cherryglsl=n()}(this,(()=>(()=>{"use strict";var e={d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>r});function t(e=400,n=400){const t=new THREE.Scene,r=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),o=new THREE.WebGLRenderer({alpha:!0});return o.setSize(e,n),{Scene:t,camera:r,renderer:o}}const r={CherryWave:({container:e,image:n,speed:r=.05,strength:o=8,hover:i=!1})=>{if(!n)return void console.log("No image provided");(new THREE.TextureLoader).load(n.src,(a=>{const u={uImage:{value:a},uTime:{value:0},uStrength:{value:i?0:o}},c=t(e.clientWidth,e.clientHeight);let s;c.camera.position.z=190;new THREE.Raycaster;const d=new THREE.Vector2;function l(){const t=e.clientWidth,r=e.clientHeight,o=t/r,i=n.naturalWidth/n.naturalHeight;let a,d;o<i?(a=t,d=t/i):(d=r,a=r*i),s&&(c.Scene.remove(s),s.geometry.dispose(),s.material.dispose()),s=function(e,n){const t=new THREE.PlaneGeometry(e,n,100,100),r=new THREE.ShaderMaterial({vertexShader:"\nprecision highp float;\n    varying vec2 vUv;\n    varying vec3 pos;\n    uniform float uTime;\n    uniform float uStrength;\n\n    void main() {\n    \n        vUv = uv;\n       \n        vec3 newPosition = position;\n\n        // Enhanced wave effect: move vertices in all directions\n        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);\n        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);\n        \n        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);\n\n        newPosition.x += waveX;\n        newPosition.y += waveY;\n        newPosition.z += waveZ;\n\n        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\n    }",fragmentShader:"\nprecision highp float;\nvarying vec2 vUv;\nuniform sampler2D uImage;\nuniform float uTime;\nuniform float uStrength;\nvoid main() {\n    // Create a wave effect by modifying the y coordinate\n    vec2 uv = vUv;\n    \n  \n    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);\n    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);\n    \n    vec4 color = texture2D(uImage, uv);\n    gl_FragColor = color;\n}",uniforms:u});return new THREE.Mesh(t,r)}(a,d),c.mesh=s,c.Scene.add(s)}return i&&(e.addEventListener("mousemove",(function(n){const t=e.getBoundingClientRect();d.x=(n.clientX-t.left)/t.width*2-1,d.y=-(n.clientY-t.top)/t.height*2+1})),e.addEventListener("mouseenter",(()=>{gsap.to(u.uStrength,{value:o,duration:.5,ease:"power2.out"})})),e.addEventListener("mouseleave",(()=>{gsap.to(u.uStrength,{value:0,duration:.5,ease:"power2.out"})}))),e.innerHTML="",e.appendChild(c.renderer.domElement),window.addEventListener("resize",(function(){const n=e.clientWidth,t=e.clientHeight;c.renderer.setSize(n,t),c.renderer.setPixelRatio(window.devicePixelRatio),c.camera.aspect=n/t,c.camera.updateProjectionMatrix(),l()})),l(),function e(){u.uTime.value+=r,c.renderer.render(c.Scene,c.camera),requestAnimationFrame(e)}(),{mesh:c.mesh,geometry:c.geometry,renderer:c.renderer,Scene:c.Scene}}))}};return n})()));
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("Cherryglsl",[],n):"object"==typeof exports?exports.Cherryglsl=n():e.Cherryglsl=n()}(this,(()=>(()=>{"use strict";var e={d:(n,t)=>{for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>o});function t(e=400,n=400){const t=new THREE.Scene,o=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),r=new THREE.WebGLRenderer({alpha:!1});return r.setSize(e,n),{Scene:t,camera:o,renderer:r}}const o={CherryWave:({container:e,image:n,speed:o=.05,strength:r=.02,hover:i=!1,light:a})=>{if(!n)return void console.log("No image provided");(new THREE.TextureLoader).load(n.src,(n=>{const u={uImage:{value:n},uTime:{value:0},uStrength:{value:i?0:r},uLight:{value:a}},l=t(e.clientWidth,e.clientHeight);let s;function v(){s&&(l.Scene.remove(s),s.geometry.dispose(),s.material.dispose()),s=function(){const n=e.clientWidth/e.clientHeight*2.3,t=new THREE.PlaneGeometry(n,2.3,100,100),o=new THREE.ShaderMaterial({vertexShader:"\nprecision highp float;\n    varying vec2 vUv;\n    varying vec3 pos;\n    uniform float uTime;\n    uniform float uStrength;\n\n    void main() {\n    \n        vUv = uv;\n       \n        vec3 newPosition = position;\n\n        \n        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);\n        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);\n        \n        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);\n\n        newPosition.x += waveX;\n        newPosition.y += waveY;\n        newPosition.z += waveZ;\n\n        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\n    }",fragmentShader:"\nprecision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uImage;\nuniform float uTime;\n\nuniform float uStrength;\nuniform bool uLight;\n\n\nvoid main() {\n    vec2 uv = vUv;\n    \n\n   \n  \n\n    // Apply wave distortion\n    float waveX = sin(10.0 * uv.y + uTime * 2.0);\n    float waveY = cos(10.0 * uv.x + uTime * 2.0);\n    uv.x += (uStrength * 0.05) * waveX;\n    uv.y += (uStrength * 0.05) * waveY;\n\n    \n\n    vec4 color = texture2D(uImage, uv);\n    if(uLight){\n        color.x+=smoothstep(0.001,0.6,sin(2.0*uTime));\n        color.y+=smoothstep(0.2,0.6,sin(0.2*uTime));\n    }\n    \n   gl_FragColor = color;\n}\n",uniforms:u,transparent:!0});return new THREE.Mesh(t,o)}(),l.mesh=s,l.Scene.add(s)}function d(){const n=e.clientWidth,t=e.clientHeight;l.renderer.setSize(n,t),l.renderer.setPixelRatio(window.devicePixelRatio),l.camera.aspect=n/t,l.camera.updateProjectionMatrix(),v()}return l.camera.fov=2*Math.atan(e.clientHeight/2/600)*(180/Math.PI),l.camera.position.z=2.8,i&&(e.addEventListener("mouseenter",(()=>{gsap.to(u.uStrength,{value:r,duration:.5,ease:"power2.out"})})),e.addEventListener("mouseleave",(()=>{gsap.to(u.uStrength,{value:0,duration:.5,ease:"power2.out"})}))),e.innerHTML="",e.appendChild(l.renderer.domElement),window.addEventListener("resize",d),d(),function e(){u.uTime.value+=o,l.renderer.render(l.Scene,l.camera),requestAnimationFrame(e)}(),{mesh:l.mesh,geometry:l.geometry,renderer:l.renderer,Scene:l.Scene}}))},ImageTransition:function(e,{speed:n=.02,strength:o=.02,radius:r=.02,hover:i=!1,noise:a=.4}={}){let u=Array.from(e.querySelectorAll("img"));if(!u.length)return void console.log("No image provided");const l={uImage:{value:null},uImage2:{value:null},uTime:{value:0},uStrength:{value:i?0:o},uNoise:{value:a},uMouse:{value:new THREE.Vector2(-10,-10)},uRadius:{value:r}},s=new THREE.TextureLoader;let v,d=[];u.map(((e,n)=>{s.load(e.src,(e=>{v=0,1==n&&(l.uImage2.value=e),0==n&&(l.uImage.value=e),d.push(e)}))}));const c=t(e.clientWidth,e.clientHeight);let m;function g(){m&&(c.Scene.remove(m),m.geometry.dispose(),m.material.dispose()),m=function(){const n=e.clientWidth/e.clientHeight*2.3,t=new THREE.PlaneGeometry(n,2.3,100,100),o=new THREE.ShaderMaterial({vertexShader:"\nprecision highp float;\nvarying vec2 vUv; \n\n    void main() {     \n        vUv = uv;   \n        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }",fragmentShader:"\nprecision highp float;\nuniform vec2 uMouse;\nvarying vec2 vUv;\nuniform sampler2D uImage;\nuniform float uTime;\nuniform float uRadius;\nuniform float uStrength;\nuniform float uNoise;\nuniform bool uLight;\nuniform sampler2D uImage2;\nfloat rand(float n){return fract(sin(n) * 43758.5453123);}\nfloat rand(vec2 n){return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453123);}\n\nfloat noise(float p){\n    float fl = floor(p);\n    float fc = fract(p);\n    return mix(rand(fl), rand(fl + 1.0), fc);\n}\n    \nfloat noise(vec2 n) {\n    const vec2 d = vec2(0.0, 1.0);\n    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\n\nvoid main() {\n    vec2 uv = vUv;\n      vec2 guv = vUv;\n    guv.x -= 0.5;\n    guv.y -= 0.5;\n\n    // Calculate distance from mouse\n    float dist = length(guv - uMouse);\n\n   \n    float edgeNoise = noise(guv * 10.0 + uTime * 2.0 ) * uNoise;\n\n    // Create mask for area following mouse, with wobbly edge\n    float inside = step(dist, uRadius *edgeNoise);\n\n    // Apply noise only inside the circle\n    float n = noise(guv * 0.2);\n\n    vec3 circle = mix(vec3(1.0), vec3(n), inside);\n\n    // Apply wave distortion\n    float waveX = sin(10.0 * uv.y + uTime * 2.0);\n    float waveY = cos(10.0 * uv.x + uTime * 2.0);\n    uv.x += (uStrength * 0.05) * waveX;\n    uv.y += (uStrength * 0.05) * waveY;\n\n    \n\n    vec4 color = texture2D(uImage, uv);\n   \n    vec4 color2 = texture2D(uImage2,uv);\n   gl_FragColor = mix(color,(vec4(n)+color2),inside);\n}\n",uniforms:l,transparent:!0});return new THREE.Mesh(t,o)}(),c.mesh=m,c.Scene.add(m)}function f(){const n=e.clientWidth,t=e.clientHeight;c.renderer.setSize(n,t),c.renderer.setPixelRatio(window.devicePixelRatio),c.camera.aspect=n/t,c.camera.updateProjectionMatrix(),g()}return c.camera.fov=2*Math.atan(e.clientHeight/2/600)*(180/Math.PI),c.camera.position.z=2.8,e.addEventListener("mousemove",(function(n){const t=e.getBoundingClientRect(),o=(n.clientX-t.left)/t.width-.5,r=-(n.clientY-t.top)/t.height+.5;gsap.to(l.uMouse.value,{x:o,y:r,duration:.2})})),i&&(e.addEventListener("mouseenter",(()=>{gsap.to(l.uStrength,{value:o,duration:.5,ease:"power2.out"}),gsap.to(l.uRadius,{value:r,duration:.2})})),e.addEventListener("mouseleave",(()=>{gsap.to(l.uStrength,{value:0,duration:.5,ease:"power2.out"}),gsap.to(l.uRadius,{value:-100,duration:.6})}))),e.innerHTML="",e.appendChild(c.renderer.domElement),window.addEventListener("resize",f),f(),function e(){l.uTime.value+=n,c.renderer.render(c.Scene,c.camera),requestAnimationFrame(e)}(),e.addEventListener("click",(()=>{const e=(v+1)%d.length,n=(v+2)%d.length;gsap.to(l.uRadius,{value:2,duration:2,ease:"power2.inOut",onComplete:()=>{l.uImage.value=d[e],l.uImage2.value=d[n],gsap.fromTo(l.uRadius,{value:0},{value:r,duration:2,ease:"power2.inOut"}),v=e}})})),{mesh:c.mesh,geometry:c.geometry,renderer:c.renderer,Scene:c.Scene,currntimageIndex:v}}};return n})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheryglsljs",
-  "version": "1.1.4",
+  "version": "1.1.7",
   "description": "A Three.js + GLSL-based wave effect library.",
   "main": "dist/cherry.js",
 "module": "dist/cherry.js",

package/src/cherry.js

@@ -1,6 +1,7 @@
 
 import CherryWave from "./effects/waveEffect/Effect";
-
+import { ImageTransition } from "./effects/TransitionEffect/Effect";
 export default {
-    CherryWave
+    CherryWave,
+    ImageTransition
 };

package/src/effects/TransitionEffect/Effect.js

@@ -0,0 +1,182 @@
+import createWaveAssets from "../../utils/init.js";
+import fragmentShader from "./FragementShader.glsl.js";
+import vertexShader from "./VertexShader.glsl.js";
+// Make sure the file 'FragmentShader.glsl.js' exists in the same directory as this file.
+// If the file is named differently or located elsewhere, update the import path accordingly.
+// Example: import fragmentShader from '../../shaders/FragmentShader.glsl.js';
+
+export function ImageTransition(
+  container,
+  { speed = 0.02, strength = 0.02, radius = 0.02, hover = false,noise=0.4 } = {}
+) {
+  let image = Array.from(container.querySelectorAll("img"));
+  if (!image.length) {
+    console.log("No image provided");
+    return;
+  }
+  const uniforms = {
+    uImage: { value: null },
+    uImage2: { value: null },
+    uTime: { value: 0.0 },
+    uStrength: { value: hover ? 0 : strength },
+    uNoise:{value:noise},
+    uMouse: { value: new THREE.Vector2(-10, -10) },
+    uRadius: { value: radius },
+  };
+  const textureLoader = new THREE.TextureLoader();
+
+  let textures = [];
+  let index;
+  image.map((img, i) => {
+    textureLoader.load(img.src, (texture) => {
+      index = 0;
+      if (i == 1) uniforms.uImage2.value = texture;
+      if (i == 0) uniforms.uImage.value = texture;
+      textures.push(texture);
+    });
+  });
+
+  const waveassets = createWaveAssets(
+    container.clientWidth,
+    container.clientHeight
+  );
+
+  // Set camera to frame a 2x2 unit square
+  waveassets.camera.fov =
+    2 * Math.atan(container.clientHeight / 2 / 600) * (180 / Math.PI);
+  waveassets.camera.position.z = 2.8;
+
+  let mesh;
+
+  function createMesh() {
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+
+    const aspect = width / height;
+    const worldHeight = 2.3;
+    const worldWidth = worldHeight * aspect;
+
+    const geometry = new THREE.PlaneGeometry(worldWidth, worldHeight, 100, 100);
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms,
+      transparent: true,
+    });
+
+    return new THREE.Mesh(geometry, material);
+  }
+
+  function addMesh() {
+    if (mesh) {
+      waveassets.Scene.remove(mesh);
+      mesh.geometry.dispose();
+      mesh.material.dispose();
+    }
+
+    mesh = createMesh();
+    waveassets.mesh = mesh;
+    waveassets.Scene.add(mesh);
+  }
+
+  function onResize() {
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+
+    waveassets.renderer.setSize(width, height);
+    waveassets.renderer.setPixelRatio(window.devicePixelRatio);
+
+    waveassets.camera.aspect = width / height;
+    waveassets.camera.updateProjectionMatrix();
+
+    addMesh();
+  }
+
+  function onMouseMove(event) {
+    const bounds = container.getBoundingClientRect();
+    const x = (event.clientX - bounds.left) / bounds.width - 0.5;
+    const y = -((event.clientY - bounds.top) / bounds.height) + 0.5;
+
+    gsap.to(uniforms.uMouse.value, {
+      x: x,
+      y: y,
+      duration: 0.2,
+    });
+  }
+
+  container.addEventListener("mousemove", onMouseMove);
+  if (hover) {
+    container.addEventListener("mouseenter", () => {
+      gsap.to(uniforms.uStrength, {
+        value: strength,
+        duration: 0.5,
+        ease: "power2.out",
+      });
+      gsap.to(uniforms.uRadius, {
+        value: radius,
+        duration: 0.2,
+      });
+    });
+
+    container.addEventListener("mouseleave", () => {
+      gsap.to(uniforms.uStrength, {
+        value: 0,
+        duration: 0.5,
+        ease: "power2.out",
+      });
+      gsap.to(uniforms.uRadius, {
+        value: -100,
+        duration: 0.6,
+      });
+    });
+  }
+
+  container.innerHTML = "";
+  container.appendChild(waveassets.renderer.domElement);
+
+  window.addEventListener("resize", onResize);
+  onResize();
+
+  function animate() {
+    uniforms.uTime.value += speed;
+    waveassets.renderer.render(waveassets.Scene, waveassets.camera);
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+  // let isTransitioning = false; // Removed unused variable
+
+  container.addEventListener("click", () => {
+    const nextIndex = (index + 1) % textures.length;
+    const nextNextIndex = (index + 2) % textures.length;
+
+    gsap.to(uniforms.uRadius, {
+      value: 2,
+      duration: 2,
+      ease: "power2.inOut",
+
+      onComplete: () => {
+        uniforms.uImage.value = textures[nextIndex];
+        uniforms.uImage2.value = textures[nextNextIndex];
+        gsap.fromTo(
+          uniforms.uRadius,
+          { value: 0.0 },
+          {
+            value: radius,
+            duration: 2,
+            ease: "power2.inOut",
+          }
+        );
+        index = nextIndex;
+      },
+    });
+  });
+
+  return {
+    mesh: waveassets.mesh,
+    geometry: waveassets.geometry,
+    renderer: waveassets.renderer,
+    Scene: waveassets.Scene,
+    currntimageIndex: index,
+  };
+}

package/src/effects/TransitionEffect/FragementShader.glsl.js

@@ -0,0 +1,60 @@
+export default /* glsl */`
+precision highp float;
+uniform vec2 uMouse;
+varying vec2 vUv;
+uniform sampler2D uImage;
+uniform float uTime;
+uniform float uRadius;
+uniform float uStrength;
+uniform float uNoise;
+uniform bool uLight;
+uniform sampler2D uImage2;
+float rand(float n){return fract(sin(n) * 43758.5453123);}
+float rand(vec2 n){return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453123);}
+
+float noise(float p){
+    float fl = floor(p);
+    float fc = fract(p);
+    return mix(rand(fl), rand(fl + 1.0), fc);
+}
+    
+float noise(vec2 n) {
+    const vec2 d = vec2(0.0, 1.0);
+    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+
+void main() {
+    vec2 uv = vUv;
+      vec2 guv = vUv;
+    guv.x -= 0.5;
+    guv.y -= 0.5;
+
+    // Calculate distance from mouse
+    float dist = length(guv - uMouse);
+
+   
+    float edgeNoise = noise(guv * 10.0 + uTime * 2.0 ) * uNoise;
+
+    // Create mask for area following mouse, with wobbly edge
+    float inside = step(dist, uRadius *edgeNoise);
+
+    // Apply noise only inside the circle
+    float n = noise(guv * 0.2);
+
+    vec3 circle = mix(vec3(1.0), vec3(n), inside);
+
+    // Apply wave distortion
+    float waveX = sin(10.0 * uv.y + uTime * 2.0);
+    float waveY = cos(10.0 * uv.x + uTime * 2.0);
+    uv.x += (uStrength * 0.05) * waveX;
+    uv.y += (uStrength * 0.05) * waveY;
+
+    
+
+    vec4 color = texture2D(uImage, uv);
+   
+    vec4 color2 = texture2D(uImage2,uv);
+   gl_FragColor = mix(color,(vec4(n)+color2),inside);
+}
+`

package/src/effects/TransitionEffect/VertexShader.glsl.js

@@ -0,0 +1,11 @@
+export default /* glsl */`
+precision highp float;
+varying vec2 vUv; 
+
+    void main() {     
+        vUv = uv;   
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }`
+
+
+

package/src/effects/waveEffect/Effect.js

@@ -1,8 +1,9 @@
+
 import createWaveAssets from '../../utils/init.js';
-import fragmentShader from './FragementShader.glsl';
-import vertexShader from './Vertexshader.glsl';
+import fragmentShader from './FragementShader.glsl.js';
+import vertexShader from './Vertexshader.glsl.js';
 
- const CherryWave = ({ container, image, speed = 0.05, strength = 8, hover = false }) => {
+const CherryWave = ({ container, image, speed = 0.05, strength = 0.02, hover = false,light }) => {
   if (!image) {
     console.log("No image provided");
     return;
@@ -13,49 +14,49 @@ import vertexShader from './Vertexshader.glsl';
     const uniforms = {
       uImage: { value: texture },
       uTime: { value: 0.0 },
-      uStrength: { value: hover ? 0 : strength }
+      uStrength: { value: hover ? 0 : strength },
+      uLight:{value:light}
+       
     };
+   
+    
 
     const waveassets = createWaveAssets(container.clientWidth, container.clientHeight);
-    waveassets.camera.position.z = 190;
+
+    // Set camera to frame a 2x2 unit square
+    waveassets.camera.fov = 2 * Math.atan(container.clientHeight / 2 / 600) * (180 / Math.PI);
+    waveassets.camera.position.z = 2.8;
 
     let mesh;
-    const raycaster = new THREE.Raycaster();
-    const mouse = new THREE.Vector2();
-    let isHovering = false;
 
-    function createMesh(width, height) {
-      const geometry = new THREE.PlaneGeometry(width, height, 100, 100);
+    function createMesh() {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+
+     
+      const aspect = width / height;
+      const worldHeight = 2.3;
+      const worldWidth = worldHeight * aspect;
+
+      const geometry = new THREE.PlaneGeometry(worldWidth, worldHeight, 100, 100);
       const material = new THREE.ShaderMaterial({
         vertexShader,
         fragmentShader,
-        uniforms
+        uniforms,
+        transparent: true
       });
+
       return new THREE.Mesh(geometry, material);
     }
 
     function addMesh() {
-      const containerWidth = container.clientWidth;
-      const containerHeight = container.clientHeight;
-      const containerAspect = containerWidth / containerHeight;
-      const imageAspect = image.naturalWidth / image.naturalHeight;
-
-      let scaleWidth, scaleHeight;
-      if (containerAspect < imageAspect) {
-        scaleWidth = containerWidth;
-        scaleHeight = containerWidth / imageAspect;
-      } else {
-        scaleHeight = containerHeight;
-        scaleWidth = containerHeight * imageAspect;
-      }
-
       if (mesh) {
         waveassets.Scene.remove(mesh);
         mesh.geometry.dispose();
         mesh.material.dispose();
       }
 
-      mesh = createMesh(scaleWidth, scaleHeight);
+      mesh = createMesh();
       waveassets.mesh = mesh;
       waveassets.Scene.add(mesh);
     }
@@ -73,14 +74,8 @@ import vertexShader from './Vertexshader.glsl';
       addMesh();
     }
 
-    function onMouseMove(event) {
-      const bounds = container.getBoundingClientRect();
-      mouse.x = ((event.clientX - bounds.left) / bounds.width) * 2 - 1;
-      mouse.y = -((event.clientY - bounds.top) / bounds.height) * 2 + 1;
-    }
-
+    
     if (hover) {
-      container.addEventListener('mousemove', onMouseMove);
 
       container.addEventListener('mouseenter', () => {
         gsap.to(uniforms.uStrength, {
@@ -88,6 +83,7 @@ import vertexShader from './Vertexshader.glsl';
           duration: 0.5,
           ease: 'power2.out'
         });
+      
       });
 
       container.addEventListener('mouseleave', () => {
@@ -96,20 +92,22 @@ import vertexShader from './Vertexshader.glsl';
           duration: 0.5,
           ease: 'power2.out'
         });
+         
       });
     }
 
     container.innerHTML = '';
     container.appendChild(waveassets.renderer.domElement);
+
     window.addEventListener('resize', onResize);
-    addMesh();
+    onResize();
 
     function animate() {
       uniforms.uTime.value += speed;
       waveassets.renderer.render(waveassets.Scene, waveassets.camera);
       requestAnimationFrame(animate);
     }
-
+   
     animate();
 
     return {
@@ -122,4 +120,3 @@ import vertexShader from './Vertexshader.glsl';
 };
 
 export default CherryWave;
-

package/src/effects/waveEffect/FragementShader.glsl.js

@@ -1,18 +1,35 @@
 export default /* glsl */`
 precision highp float;
+
 varying vec2 vUv;
 uniform sampler2D uImage;
 uniform float uTime;
+
 uniform float uStrength;
+uniform bool uLight;
+
+
 void main() {
-    // Create a wave effect by modifying the y coordinate
     vec2 uv = vUv;
     
+
+   
   
-    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);
-    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);
+
+    // Apply wave distortion
+    float waveX = sin(10.0 * uv.y + uTime * 2.0);
+    float waveY = cos(10.0 * uv.x + uTime * 2.0);
+    uv.x += (uStrength * 0.05) * waveX;
+    uv.y += (uStrength * 0.05) * waveY;
+
     
-    vec4 color = texture2D(uImage, uv);
-    gl_FragColor = color;
-}`
 
+    vec4 color = texture2D(uImage, uv);
+    if(uLight){
+        color.x+=smoothstep(0.001,0.6,sin(2.0*uTime));
+        color.y+=smoothstep(0.2,0.6,sin(0.2*uTime));
+    }
+    
+   gl_FragColor = color;
+}
+`;

package/src/effects/waveEffect/Vertexshader.glsl.js

@@ -11,7 +11,7 @@ precision highp float;
        
         vec3 newPosition = position;
 
-        // Enhanced wave effect: move vertices in all directions
+        
         float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);
         float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);
         

package/src/utils/init.js

@@ -6,7 +6,8 @@ const camera = () => new THREE.PerspectiveCamera(
     0.1,
     1000
 );
-const renderer = () => new THREE.WebGLRenderer({alpha:true});
+
+const renderer = () => new THREE.WebGLRenderer({alpha:false});
 
 export default function createWaveAssets(width = 400, height = 400) {
     const SceneInstance = Scene();