cheryglsljs 1.1.14 → 1.1.16

package/README.md

@@ -1,6 +1,6 @@
 # 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.
+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 npm/bundler workflows.
 
 ---
 
@@ -10,6 +10,15 @@ A lightweight JavaScript library for beautiful, interactive image effects using
 - 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/)
+- Simple API for adding effects to your images
+
+---
+
+## 🏗️ What is it based on?
+
+- **Three.js**: For 3D rendering and WebGL abstraction
+- **GLSL**: For custom GPU-accelerated shader effects
+- **GSAP**: For smooth, performant animations and transitions
 
 ---
 
@@ -19,8 +28,6 @@ A lightweight JavaScript library for beautiful, interactive image effects using
 
 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>
    ```
 
@@ -38,53 +45,128 @@ A lightweight JavaScript library for beautiful, interactive image effects using
 2. Import in your JavaScript:
    ```js
    import Cherryglsl from 'cheryglsljs';
-   // or import { CherryWave, ImageTransition1 } from 'cheryglsljs';
+   // or import { CherryWave, ImageTransition1, ImageTransition2 } from 'cheryglsljs';
    ```
 
 ---
 
 ## 🛠️ Usage
 
-### 1. Wave Effect on an Image
+### 1. Wave Effect on an Image (`CherryWave`)
 
 **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
+**JavaScript:**
+```js
 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
+Cherryglsl.CherryWave({
+  image: img,                // HTMLImageElement (required)
+  container: container,      // HTMLElement (required)
+  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
 });
+```
+
+#### Parameters for `CherryWave`
+- `image`: HTMLImageElement (required) — The image to apply the wave effect to.
+- `container`: HTMLElement (required) — The container where the effect will be rendered.
+- `speed`: Number (optional, default: 0.05) — Speed of the wave animation.
+- `strength`: Number (optional, default: 8) — Strength/amplitude of the wave.
+- `hover`: Boolean (optional, default: false) — If true, wave animates on hover.
+- `light`: Boolean (optional, default: false) — If true, adds a light effect to the wave.
 
+---
+
+### 2. Image Transition Effect 1 (`ImageTransition1`)
+
+**HTML:**
+```html
+<div class="container" style="width: 400px; height: 400px;">
+  <img src="image1.jpg" />
+  <img src="image2.jpg" />
+</div>
+```
 
+**JavaScript:**
+```js
+import Cherryglsl from 'cheryglsljs';
 
+const container = document.querySelector('.container');
+Cherryglsl.ImageTransition1(container, {
+  speed: 0.02,      // (optional) transition speed
+  strength: 0.02,   // (optional) wave strength during transition
+  radius: 0.02,     // (optional) radius of the transition circle
+  hover: false,     // (optional) enable hover effect
+  noise: 0.4,       // (optional) noise amount for edge
+  p: 0.0            // (optional) camera z offset
+});
+```
 
+#### Parameters for `ImageTransition1`
+- `container`: HTMLElement (required) — The container with at least two `<img>` elements.
+- `speed`: Number (optional, default: 0.02) — Speed of the transition animation.
+- `strength`: Number (optional, default: 0.02) — Strength of the wave during transition.
+- `radius`: Number (optional, default: 0.02) — Radius of the transition circle.
+- `hover`: Boolean (optional, default: false) — If true, enables hover-based transition.
+- `noise`: Number (optional, default: 0.4) — Amount of noise for the transition edge.
+- `p`: Number (optional, default: 0.0) — Camera z offset for perspective.
 
+---
 
+### 3. Image Transition Effect 2 (`ImageTransition2`)
 
-### 2. Image Transition Effect
+**HTML:**
+```html
+<div class="container" style="width: 400px; height: 400px;">
+  <img src="image1.jpg" />
+  <img src="image2.jpg" />
+  <img src="image3.jpg" />
+</div>
+```
 
+**JavaScript:**
+```js
 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
+Cherryglsl.ImageTransition2(container, {
+  time: true,       // (optional) auto transition timing
+  speed: 1.2,       // (optional) transition speed
+  p: 0.0,           // (optional) camera z offset
+  hover: false,     // (optional) enable hover effect
+  ttype: 0          // (optional) transition type (future use)
 });
+```
+
+#### Parameters for `ImageTransition2`
+- `container`: HTMLElement (required) — The container with at least two `<img>` elements.
+- `time`: Boolean (optional, default: true) — If true, transitions automatically.
+- `speed`: Number (optional, default: 1.2) — Speed of the transition.
+- `p`: Number (optional, default: 0.0) — Camera z offset for perspective.
+- `hover`: Boolean (optional, default: false) — If true, enables hover-based transition.
+- `ttype`: Number (optional, default: 0) — Transition type (for future extension).
+
+---
+
+## 📚 API Summary
+
+- `CherryWave(options)` — Adds a wave effect to a single image.
+- `ImageTransition1(container, options)` — Adds a circular transition effect between two images.
+- `ImageTransition2(container, options)` — Adds an animated transition effect between multiple images.
+
+---
+
+## 📝 License
+
+MIT