ripppl 0.1.0 → 0.1.1

package/README.md

@@ -1,14 +1,19 @@
-# ripyl
+<h1 align="center">ripppl</h1>
 
-Ripple displacement over the **real DOM** (WebGL shader + screen capture). Works in the browser only.
+<p align="center">Ripple displacement using WebGL over the DOM.</p>
 
-## Install
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Arman-Luthra/ripppl/main/demo_1.gif" alt="" width="49%" />
+  <img src="https://raw.githubusercontent.com/Arman-Luthra/ripppl/main/demo-2.gif" alt="" width="49%" />
+</p>
+
+## Installation
 
 ```bash
 npm install ripppl
 ```
 
-## Use
+## Usage
 
 ```ts
 import { attachRipple } from "ripppl";
@@ -24,12 +29,56 @@ handle.trigger({ x: 0.5, y: 0.5 });
 handle.destroy();
 ```
 
-- **`attachRipple(trigger, options?)`** — `trigger` is a selector, element, or list of elements that start a capture + ripple on click. Use **`scope`** to clip the effect to a container (e.g. a card); omit it for a full-page ripple.
-- **`update(partial)`** — change tuning; see **`RippleTuning`** in the published types.
-- **`trigger({ x?, y? })`** — fire a ripple at normalized **0–1** coordinates inside the scope (default center).
-- **`destroy()`** — remove listeners and overlay.
+`attachRipple` takes a **trigger** (CSS selector, element, or list of elements) and optional options. Clicks on the trigger capture the surrounding DOM and run the ripple. Use **`scope`** to clip the effect to a container; omit **`scope`** for a full-viewport ripple.
+
+The returned **handle** exposes:
+
+| Method | Purpose |
+|--------|---------|
+| `update(partial)` | Merge new tuning values (see parameters below). |
+| `trigger({ x?, y? })` | Start a ripple at normalized coordinates **0–1** inside the scope (default center). |
+| `destroy()` | Remove listeners, overlay, and WebGL resources. |
+
+Types: `RippleOptions`, `RippleTuning`, `RippleHandle` are exported from the package.
+
+## Parameters
+
+Options passed to `attachRipple` or `update` (all optional except where noted):
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `scope` | `string` \| `HTMLElement` | `document.body` | Element whose box clips the ripple and capture. |
+| `amplitude` | `number` | `3` | Displacement strength of the wave. |
+| `frequency` | `number` | `0.018` | Spatial frequency of the ripple rings. |
+| `speed` | `number` | `300` | How fast the wave propagates. |
+| `damping` | `number` | `0.025` | Ring falloff behind the wave front. |
+| `decay` | `number` | `1.2` | How quickly the effect fades over time. |
+| `duration` | `number` (ms) | `3500` | Max duration of the animation. |
+| `chromatic` | `boolean` | `false` | Chromatic aberration on the displaced image. |
+| `chromaticIntensity` | `number` | `0.4` | Strength when `chromatic` is true. |
+| `shimmer` | `string` \| `false` | `false` | OKLCH color string for the shimmer pass, or `false` to disable. |
+| `shimmerWidth` | `number` | `1` | Width of the shimmer band. |
+| `shimmerDuration` | `number` (ms) | `2600` | Shimmer timing relative to the ripple. |
+| `shimmerGlowColor` | `string` | — | Optional OKLCH override for glow highlights (uses shimmer color when omitted). |
+
+## Contributing
+
+Issues and pull requests are welcome in [GitHub Issues](https://github.com/Arman-Luthra/ripppl/issues).
+
+Clone the repo, install dependencies, and run the demo or build the library:
+
+```bash
+git clone https://github.com/Arman-Luthra/ripppl.git
+cd ripppl
+npm install
+npm run dev
+```
+
+```bash
+npm run build
+```
 
-Build before publish: `npm run build` (runs automatically via `prepublishOnly` on `npm publish`).
+Please keep changes focused and match existing style. For larger changes, open an issue first so the direction is agreed.
 
 ## License
 

package/dist/{ripyl.d.ts → ripppl.d.ts}

@@ -26,4 +26,4 @@ export type RippleHandle = {
 type TriggerInput = string | HTMLElement | NodeListOf<HTMLElement> | HTMLElement[];
 export declare function attachRipple(trigger: TriggerInput, options?: RippleOptions): RippleHandle;
 export {};
-//# sourceMappingURL=ripyl.d.ts.map
+//# sourceMappingURL=ripppl.d.ts.map

package/dist/ripppl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripppl.d.ts","sourceRoot":"","sources":["../src/ripppl.ts"],"names":[],"mappings":"AAwFA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC9B,CAAC;AAgBF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,KAAK,YAAY,GACb,MAAM,GACN,WAAW,GACX,UAAU,CAAC,WAAW,CAAC,GACvB,WAAW,EAAE,CAAC;AA0JlB,wBAAgB,YAAY,CAC1B,OAAO,EAAE,YAAY,EACrB,OAAO,GAAE,aAAkB,GAC1B,YAAY,CAuWd"}

package/dist/{ripyl.js → ripppl.js}

@@ -700,7 +700,7 @@ function Be(d, f = {}) {
   };
   let U = ie();
   const M = document.createElement("canvas");
-  if (M.setAttribute("data-ripyl-overlay", ""), T)
+  if (M.setAttribute("data-ripppl-overlay", ""), T)
     M.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2147483647;";
   else {
     getComputedStyle(r).position === "static" && (r.style.position = "relative");
@@ -749,7 +749,7 @@ function Be(d, f = {}) {
     if (!(V || Y)) {
       V = !0, se();
       try {
-        const o = devicePixelRatio || 1, _ = innerWidth, D = innerHeight, W = (ee) => !(ee instanceof Element && ee.hasAttribute("data-ripyl-overlay")), F = Math.round(_ * o), we = Math.round(D * o), be = await De.toPng(document.documentElement, {
+        const o = devicePixelRatio || 1, _ = innerWidth, D = innerHeight, W = (ee) => !(ee instanceof Element && ee.hasAttribute("data-ripppl-overlay")), F = Math.round(_ * o), we = Math.round(D * o), be = await De.toPng(document.documentElement, {
           width: F,
           height: we,
           style: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ripppl",
-  "version": "0.1.0",
-  "description": "Ripple displacement effect over the real DOM (WebGL + screen capture)",
+  "version": "0.1.1",
+  "description": "Ripple displacement using WebGL over the DOM",
   "keywords": [
     "ripple",
     "webgl",
@@ -14,21 +14,21 @@
   "author": "Arman Luthra",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Arman-Luthra/ripyl.git"
+    "url": "git+https://github.com/Arman-Luthra/ripppl.git"
   },
   "bugs": {
-    "url": "https://github.com/Arman-Luthra/ripyl/issues"
+    "url": "https://github.com/Arman-Luthra/ripppl/issues"
   },
-  "homepage": "https://github.com/Arman-Luthra/ripyl#readme",
+  "homepage": "https://github.com/Arman-Luthra/ripppl#readme",
   "type": "module",
-  "main": "./dist/ripyl.js",
-  "module": "./dist/ripyl.js",
-  "types": "./dist/ripyl.d.ts",
+  "main": "./dist/ripppl.js",
+  "module": "./dist/ripppl.js",
+  "types": "./dist/ripppl.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/ripyl.d.ts",
-      "import": "./dist/ripyl.js",
-      "default": "./dist/ripyl.js"
+      "types": "./dist/ripppl.d.ts",
+      "import": "./dist/ripppl.js",
+      "default": "./dist/ripppl.js"
     }
   },
   "files": [

package/dist/ripyl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ripyl.d.ts","sourceRoot":"","sources":["../src/ripyl.ts"],"names":[],"mappings":"AAwFA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC9B,CAAC;AAgBF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,KAAK,YAAY,GACb,MAAM,GACN,WAAW,GACX,UAAU,CAAC,WAAW,CAAC,GACvB,WAAW,EAAE,CAAC;AA0JlB,wBAAgB,YAAY,CAC1B,OAAO,EAAE,YAAY,EACrB,OAAO,GAAE,aAAkB,GAC1B,YAAY,CAuWd"}