cheryglsljs 1.0.0 → 1.0.2

package/dist/cherry.js.LICENSE.txt

@@ -1,12 +1,3 @@
-/*!
- * GSAP 3.13.0
- * https://gsap.com
- *
- * @license Copyright 2008-2025, GreenSock. All rights reserved.
- * Subject to the terms at https://gsap.com/standard-license
- * @author: Jack Doyle, jack@greensock.com
-*/
-
 /**
  * @license
  * Copyright 2010-2025 Three.js Authors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheryglsljs",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "\"It is threejs,glsl and gsap based js library\"",
   "main": "src/cherry.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "files": [
     "dist/",
-    "src/cherry.js"
+    "src/"
   ],
   "devDependencies": {
     "css-loader": "^6.8.1",

package/src/effects/waveEffect/Effect.js

@@ -0,0 +1,124 @@
+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 = 8, hover = false }) => {
+  if (!image) {
+    console.log("No image provided");
+    return;
+  }
+
+  const textureLoader = new THREE.TextureLoader();
+  textureLoader.load(image.src, (texture) => {
+    const uniforms = {
+      uImage: { value: texture },
+      uTime: { value: 0.0 },
+      uStrength: { value: hover ? 0 : strength }
+    };
+
+    const waveassets = createWaveAssets(container.clientWidth, container.clientHeight);
+    waveassets.camera.position.z = 190;
+
+    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);
+      const material = new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms
+      });
+      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);
+      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();
+      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, {
+          value: strength,
+          duration: 0.5,
+          ease: 'power2.out'
+        });
+      });
+
+      container.addEventListener('mouseleave', () => {
+        gsap.to(uniforms.uStrength, {
+          value: 0,
+          duration: 0.5,
+          ease: 'power2.out'
+        });
+      });
+    }
+
+    container.innerHTML = '';
+    container.appendChild(waveassets.renderer.domElement);
+    window.addEventListener('resize', onResize);
+    addMesh();
+
+    function animate() {
+      uniforms.uTime.value += speed;
+      waveassets.renderer.render(waveassets.Scene, waveassets.camera);
+      requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    return {
+      mesh: waveassets.mesh,
+      geometry: waveassets.geometry,
+      renderer: waveassets.renderer,
+      Scene: waveassets.Scene
+    };
+  });
+};
+
+export default CherryWave;

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

@@ -0,0 +1,17 @@
+export const fragmentShader = `
+varying vec2 vUv;
+uniform sampler2D uImage;
+uniform float uTime;
+uniform float uStrength;
+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);
+    
+    vec4 color = texture2D(uImage, uv);
+    gl_FragColor = color;
+}
+`;

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

@@ -0,0 +1,28 @@
+const vertexShader = `
+    varying vec2 vUv;
+    varying vec3 pos;
+    uniform float uTime;
+    uniform float uStrength;
+
+    void main() {
+    
+        vUv = uv;
+       
+        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);
+        
+        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);
+
+        newPosition.x += waveX;
+        newPosition.y += waveY;
+        newPosition.z += waveZ;
+
+        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+    }
+`;
+
+export default vertexShader;

package/src/utils/init.js

@@ -0,0 +1,22 @@
+import *as THREE from 'three';
+import gsap from 'gsap';
+const Scene = () => new THREE.Scene();
+const camera = () => new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+);
+const renderer = () => new THREE.WebGLRenderer({alpha:true});
+
+export default function createWaveAssets(width = 400, height = 400) {
+    const SceneInstance = Scene();
+    const cameraInstance = camera();
+    const rendererInstance = renderer();
+    rendererInstance.setSize(width, height);
+    return {
+        Scene: SceneInstance,
+        camera: cameraInstance,
+        renderer: rendererInstance,
+    };
+}