cheryglsljs 1.1.5 → 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 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}},s=t(e.clientWidth,e.clientHeight);let l;function v(){l&&(s.Scene.remove(l),l.geometry.dispose(),l.material.dispose()),l=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)}(),s.mesh=l,s.Scene.add(l)}function c(){const n=e.clientWidth,t=e.clientHeight;s.renderer.setSize(n,t),s.renderer.setPixelRatio(window.devicePixelRatio),s.camera.aspect=n/t,s.camera.updateProjectionMatrix(),v()}return s.camera.fov=2*Math.atan(e.clientHeight/2/600)*(180/Math.PI),s.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(s.renderer.domElement),window.addEventListener("resize",c),c(),function e(){u.uTime.value+=o,s.renderer.render(s.Scene,s.camera),requestAnimationFrame(e)}(),{mesh:s.mesh,geometry:s.geometry,renderer:s.renderer,Scene:s.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.5",
+  "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

@@ -1,161 +1,182 @@
-
-import createWaveAssets from '../../utils/init.js';
-import fragmentShader from './FragementShader.glsl.js';
-import vertexShader from './Vertexshader.glsl.js';
-
-const CherryWave = ({ container, image, speed = 0.05, strength = 0.02, hover = false,light=false }) => {
-  if (!image) {
+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={
+  const uniforms = {
     uImage: { value: null },
-     uImage2: { value: null },
-      uTime: { value: 0.0 },
-      uStrength: { value: hover ? 0 : strength },
-      uLight:light,
-       uMouse: { value: new THREE.Vector2(-10, -10) },
-       uRadius:{value:-4.0}
-};
+    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();
-  const images = ["i3.jpg","testimage.jpeg"];
-  let textures=[];
+
+  let textures = [];
   let index;
-  images.map((img,i)=>{
- textureLoader.load(img, (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
-      });
+  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);
+  }
 
-      return new THREE.Mesh(geometry, material);
+  function addMesh() {
+    if (mesh) {
+      waveassets.Scene.remove(mesh);
+      mesh.geometry.dispose();
+      mesh.material.dispose();
     }
 
-    function addMesh() {
-      if (mesh) {
-        waveassets.Scene.remove(mesh);
-        mesh.geometry.dispose();
-        mesh.material.dispose();
-      }
+    mesh = createMesh();
+    waveassets.mesh = mesh;
+    waveassets.Scene.add(mesh);
+  }
 
-      mesh = createMesh();
-      waveassets.mesh = mesh;
-      waveassets.Scene.add(mesh);
-    }
+  function onResize() {
+    const width = container.clientWidth;
+    const height = container.clientHeight;
 
-    function onResize() {
-      const width = container.clientWidth;
-      const height = container.clientHeight;
+    waveassets.renderer.setSize(width, height);
+    waveassets.renderer.setPixelRatio(window.devicePixelRatio);
 
-      waveassets.renderer.setSize(width, height);
-      waveassets.renderer.setPixelRatio(window.devicePixelRatio);
+    waveassets.camera.aspect = width / height;
+    waveassets.camera.updateProjectionMatrix();
 
-      waveassets.camera.aspect = width / height;
-      waveassets.camera.updateProjectionMatrix();
+    addMesh();
+  }
 
-      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;
 
-      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
-            });
-            // TransitionAssets.renderer.render(TransitionAssets.Scene, TransitionAssets.camera);
-        }
-
-        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:0.02,
-                duration: 0.2
-            });
+    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.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);
+  container.innerHTML = "";
+  container.appendChild(waveassets.renderer.domElement);
 
-    window.addEventListener('resize', onResize);
-    onResize();
+  window.addEventListener("resize", onResize);
+  onResize();
 
-    function animate() {
-      uniforms.uTime.value += speed;
-      waveassets.renderer.render(waveassets.Scene, waveassets.camera);
-      requestAnimationFrame(animate);
-    }
-   
-    animate();
-    container.addEventListener('click',()=>{
-      gsap.to(uniforms.uRadius,{
-        value:20,
-        duration:3,
-        onComplete:()=>{
-          uniforms.uRadius.value=0.01
-        uniforms.uImage.value=textures[(index+1)%textures.length]
-         uniforms.uImage2.value=textures[(index+2)%textures.length]  
-         index++;
-        }
-      })
-    })
-
-    return {
-      mesh: waveassets.mesh,
-      geometry: waveassets.geometry,
-      renderer: waveassets.renderer,
-      Scene: waveassets.Scene
-    };
-};
-
-export default CherryWave;
+  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

@@ -6,6 +6,7 @@ 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);}
@@ -33,10 +34,10 @@ void main() {
     float dist = length(guv - uMouse);
 
    
-    float edgeNoise = noise(guv * 10.0 + uTime * 2.0 ) * 0.2;
+    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);
+    float inside = step(dist, uRadius *edgeNoise);
 
     // Apply noise only inside the circle
     float n = noise(guv * 0.2);
@@ -52,11 +53,8 @@ void main() {
     
 
     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));
-    }
+   
     vec4 color2 = texture2D(uImage2,uv);
    gl_FragColor = mix(color,(vec4(n)+color2),inside);
 }
-`;
+`

package/src/effects/waveEffect/Effect.js

@@ -18,6 +18,7 @@ const CherryWave = ({ container, image, speed = 0.05, strength = 0.02, hover = f
       uLight:{value:light}
        
     };
+   
     
 
     const waveassets = createWaveAssets(container.clientWidth, container.clientHeight);

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

@@ -25,7 +25,7 @@ void main() {
     
 
     vec4 color = texture2D(uImage, uv);
-    if(!uLight){
+    if(uLight){
         color.x+=smoothstep(0.001,0.6,sin(2.0*uTime));
         color.y+=smoothstep(0.2,0.6,sin(0.2*uTime));
     }