cheryglsljs 1.1.7 → 1.1.9

package/README.md

@@ -0,0 +1,90 @@
+# cheryglsljs
+
+A lightweight JavaScript library for beautiful, interactive image effects using Three.js, GLSL shaders, and GSAP. Easily add animated wave and transition effects to images in your web projects, with support for both CDN and bundler workflows.
+
+---
+
+## ✨ Features
+
+- GPU-accelerated wave and transition effects for images
+- Highly customizable via parameters (speed, strength, hover, etc.)
+- Works with both CDN and npm/bundler setups
+- Built on top of [Three.js](https://threejs.org/) and [GSAP](https://greensock.com/gsap/)
+
+---
+
+## 🚀 Installation
+
+### Using CDN
+
+1. Add Three.js and GSAP via CDN in your HTML:
+   ```html
+   <script src="https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+   <script src="https://unpkg.com/cheryglsljs/dist/cherry.js"></script>
+   ```
+
+2. The library will be available as a global variable: `Cherryglsl`.
+
+---
+
+### Using npm (Bundler: Webpack, Vite, etc.)
+
+1. Install via npm:
+   ```sh
+   npm install cheryglsljs three gsap
+   ```
+
+2. Import in your JavaScript:
+   ```js
+   import Cherryglsl from 'cheryglsljs';
+   // or import { CherryWave, ImageTransition1 } from 'cheryglsljs';
+   ```
+
+---
+
+## 🛠️ Usage
+
+### 1. Wave Effect on an Image
+
+**HTML:**
+```html
+<div class="container" style="width: 400px; height: 400px;">
+  <img class="cherry" src="your-image.jpg" style="width: 100%; height: 100%;" />
+</div>
+
+
+**HTML:**
+```html
+import Cherryglsl from 'cheryglsljs';
+
+const img = document.querySelector('.cherry');
+const container = document.querySelector('.container');
+
+Cherryglsl.default.CherryWave({
+  image: img,
+  container: container,
+  speed: 0.04,      // (optional) wave animation speed
+  strength: 8,      // (optional) wave strength
+  hover: true,      // (optional) enable wave on hover
+  light: false      // (optional) enable light effect
+});
+
+
+
+
+
+
+
+### 2. Image Transition Effect
+
+import Cherryglsl from 'cheryglsljs';
+
+const container = document.querySelector('.container');
+Cherryglsl.default.ImageTransition(Container,{
+  
+    radius:0.05,
+    speed:0.04,
+    strength:0.2,hover:true,
+    noise:6
+});

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}},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})()));
+!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}}))},ImageTransition1: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.7",
+  "version": "1.1.9",
   "description": "A Three.js + GLSL-based wave effect library.",
   "main": "dist/cherry.js",
 "module": "dist/cherry.js",

package/src/cherry.js

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

package/src/effects/TransitionEffect/Effect.js

@@ -1,182 +0,0 @@
-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/TransitionEffect1/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 ImageTransition1(
+  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,
+  };
+}