sparkle-ripple 3.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2025 Litrain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+<h1 align="center">✨ sparkle-ripple</h1>
+<p align="center">Bring Material 3(You) Ripple Effect to your <b>React</b> projects!</p>
+<p align="center">Previously, it was named <b>m3-ripple</b>.</p>
+<div align="center">
+
+[![NPM Version](https://img.shields.io/npm/v/sparkle-ripple?style=for-the-badge&logo=npm&logoColor=white&labelColor=%235c4b39&color=%23363024)](https://www.npmjs.com/package/sparkle-ripple)
+[![npm package minimized gzipped size (scoped)](https://img.shields.io/bundlejs/size/sparkle-ripple?style=for-the-badge&labelColor=%235c4b39&color=%23363024)](#)
+[![GitHub License](https://img.shields.io/github/license/yuyake-litrain/sparkle-ripple?style=for-the-badge&labelColor=%235c4b39&color=%23363024)](https://github.com/yuyake-litrain/sparkle-ripple/blob/main/LICENSE)
+[![NPM Downloads](https://img.shields.io/npm/dy/sparkle-ripple?style=for-the-badge&logo=npm&logoColor=white&labelColor=%235c4b39&color=%23363024)](https://npmtrends.com/sparkle-ripple)
+[![GitHub Repo stars](https://img.shields.io/github/stars/yuyake-litrain/sparkle-ripple?style=for-the-badge&labelColor=%235c4b39&color=%23363024)](#)
+[![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/yuyake-litrain/sparkle-ripple/main.yml?style=for-the-badge&labelColor=%235c4b39&color=%23363024)](https://github.com/yuyake-litrain/sparkle-ripple/actions/workflows/main.yml)
+</div>
+<div align="center"><a href="https://m3ripple.js.org/"><b>Live Demo</b></a></div><br />
+
+<div align="center">
+  <video src="https://github.com/user-attachments/assets/5b8cd5e6-5c91-4ca1-bc4d-50d5781a8be9" />
+</div>
+  
+## Features
+- ✨ Ripple Effect with sparkle easily realized on the web
+- 😍 Well-tuned behavior with no faltering
+- 🎨 Highly customizable in terms of ripple color, number of sparkles, clarity, etc.
+- ⚡ High speed drawing for Sparkles by canvas
+- ✅ Ripple effect in Material 2 is also supported
+
+## Getting Started
+### Install
+#### Bun
+```bash
+bun install sparkle-ripple
+```
+#### Others
+<details>
+  <summary>npm</summary>
+  <pre>npm i sparkle-ripple</pre>
+</details>
+<details>
+  <summary>pnpm</summary>
+  <pre>pnpm add sparkle-ripple</pre>
+</details>
+<details>
+  <summary>Yarn</summary>
+  <pre>yarn add sparkle-ripple</pre>
+</details>
+
+### Use
+Import `<RippleContainer>` component(by default, it's rendered as `<div />`) and set props.
+
+#### Example
+```tsx
+import { RippleContainer } from 'sparkle-ripple'; //import it
+import 'sparkle-ripple/css' // import css
+
+import styles from './some_css_file.module.css';
+
+const YourComponent = () => {
+  return (
+    <RippleContainer
+      as = 'div'
+      isMaterial3 = {true}
+      beforeRippleFn = {(event) =>{}}
+      className = {styles.rippleContainer}
+      rippleColor = "hsla(29,81%,84%,0.15)"
+      sparklesColorRGB = "255 255 255"
+      opacity_level1 = "0.4"
+      opacity_level2 = "0.1"
+      sparklesMaxCount = 2048
+    >
+      <div className={styles.children} />
+    </RippleContainer>
+  );
+};
+
+export default YourComponent;
+```
+<div align="center">
+
+|Property|optional|explanation|default|type|
+|----|----|----|----|----|
+|`as`|yes|What element is RippleContainer rendered as.|`"div"`|`ElementType`|
+|`isMaterial3`|yes|Whether to use ripple of Material 3.|`true`|`boolean`|
+|`beforeRippleFn`|yes|A function to be executed when a click occurs and just before the ripple is displayed (used for example to display a button shadow).|`()=>{}`|`(event: React.MouseEvent \| React.TouchEvent) => void`|
+|`className`|yes|Since RippleContainer is rendered as the element which is selected by `as` property, this is the ClassName of that element.|`""`|`string`|
+|`children`|yes|Child Elements of RippleContainer.|`undefined`|`ReactNode`|
+|`rippleColor`|yes|Ripple Effect Colors. If transparency is not specified, the overlap will not be visible when multiple clicks are made.|`"#ffffff35"`|`string`|
+|`sparklesColorRGB`|yes|Specify sparkle color as space-separated RGB. Transparency cannot be specified.|`"255 255 255"`|`string`|
+|`opacity_level1`|yes|Transparency just before the sparkle disappears. \*The transparency when initially displayed is calculated by the current progress of the Ripple Effect.|`"0.2"`|`string`|
+|`opacity_level2`|yes|Transparency just before Sparkles disappear.Set after `opacity_level1`.|`"0.1"`|`string`|
+|`sparklesMaxCount`|yes|Total amount of dots representing sparkle.|`2048`|`number`|
+|Other Properties|yes|You can set other properties to add to the rendered element. e.g., `href` attribute of the RippleContainer whose rendered as `<a></a>` element.|-|-|
+
+</div>

package/dist/components/base/ripple.d.ts

@@ -0,0 +1,17 @@
+declare const Ripple: import('react').MemoExoticComponent<({ ripple_width, offsetX, offsetY, isMaterial3, rippleColor, rippleTime, time, tobeDeleted, waitingTime, deleteRipple, sparklesColorRGB, opacity_level1, opacity_level2, sparklesMaxCount, }: {
+    ripple_width: number;
+    offsetX: number;
+    offsetY: number;
+    isMaterial3?: boolean;
+    rippleColor?: string;
+    rippleTime?: number;
+    waitingTime?: number;
+    time: number;
+    tobeDeleted: boolean;
+    sparklesColorRGB?: string;
+    opacity_level1?: string;
+    opacity_level2?: string;
+    sparklesMaxCount?: number;
+    deleteRipple: (createdTime: number) => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default Ripple;

package/dist/components/base/sparkles_canvas.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+declare const SparklesCanvas: import('react').MemoExoticComponent<({ ripple_width, rippleRef, sparklesColorRGB, opacity_level1, opacity_level2, sparklesMaxCount, }: {
+    ripple_width: number;
+    rippleRef: RefObject<HTMLSpanElement | null>;
+    sparklesColorRGB?: string;
+    sparklesMaxCount?: number;
+    opacity_level1?: string;
+    opacity_level2?: string;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default SparklesCanvas;

package/dist/components/ripple_container.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+export type RippleObj = {
+    ripple_width: number;
+    offsetY: number;
+    offsetX: number;
+    time: number;
+    isMaterial3: boolean;
+    tobeDeleted: boolean;
+};
+type Props<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as'> & {
+    as?: T;
+    isMaterial3?: boolean;
+    beforeRippleFn?: (event: React.MouseEvent | React.TouchEvent) => void;
+    children?: ReactNode;
+    rippleColor?: string;
+    sparklesColorRGB?: string;
+    opacity_level1?: string;
+    opacity_level2?: string;
+    sparklesMaxCount?: number;
+};
+declare const RippleContainer: <T extends ElementType = "div">({ as, isMaterial3, beforeRippleFn, rippleColor, sparklesColorRGB, opacity_level1, opacity_level2, sparklesMaxCount, className, children, onMouseDown, onTouchStart, onTouchMove, onMouseUp, onMouseLeave, onTouchEnd, onTouchCancel, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default RippleContainer;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { default as RippleContainer } from './components/ripple_container';
+export { RippleContainer };

package/dist/ripple/sparkles.d.ts

@@ -0,0 +1,19 @@
+declare class Sparkle {
+    xpos: number;
+    ypos: number;
+    width: number;
+    height: number;
+    constructor(xpos: number, ypos: number, width: number, height: number);
+}
+export declare class Sparkles {
+    sparkles: Sparkle[];
+    color: string;
+    constructor(sparkles: Sparkle[], color: string);
+}
+type SparklesColor = {
+    rgb: string;
+    opacity_level1: string;
+    opacity_level2: string;
+};
+export declare function drawSparkles(sparkle_collection: Sparkles[], context: CanvasRenderingContext2D, ripple: HTMLSpanElement, ripple_width: number, sparklesColor?: SparklesColor, convLevel?: number, spaklesMaxCount?: number): void;
+export {};

package/dist/ripple/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function calcRippleWidth(offsetX: number | null, offsetY: number | null, clientWidth: number | null, clientHeight: number | null): number | undefined;
+export declare const offsetXFromCurrent: (rect: DOMRect, clientX: number) => number;
+export declare const offsetYFromCurrent: (rect: DOMRect, clientY: number) => number;
+export declare const rippleElemWidthOriginal: (rect: DOMRect, clientX: number, clientY: number, clientWidth: number, clientHeight: number) => number | undefined;

package/dist/sparkle-ripple.css

@@ -0,0 +1 @@
+._ripple_17x6w_1{position:absolute;border-radius:100%;z-index:-1;transform:translate(-50%) translateY(-50%);pointer-events:none;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}._sparkles_canvas_qe9de_1{position:absolute;-webkit-user-select:none;user-select:none}._rippleContainer_qv2ad_1{overflow:hidden;position:relative;z-index:0}

package/dist/sparkle-ripple.js

@@ -0,0 +1,393 @@
+import { jsx as k, jsxs as K } from "react/jsx-runtime";
+import { memo as X, useRef as p, useEffect as B, useState as Y, useCallback as j } from "react";
+function E(t) {
+  var e, o, n = "";
+  if (typeof t == "string" || typeof t == "number") n += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var s = t.length;
+    for (e = 0; e < s; e++) t[e] && (o = E(t[e])) && (n && (n += " "), n += o);
+  } else for (o in t) t[o] && (n && (n += " "), n += o);
+  return n;
+}
+function q() {
+  for (var t, e, o = 0, n = "", s = arguments.length; o < s; o++) (t = arguments[o]) && (e = E(t)) && (n && (n += " "), n += e);
+  return n;
+}
+function Q(t, e, o, n) {
+  if (!t || !e || !o || !n) return;
+  const s = t, a = o - t, i = e, c = n - e;
+  let u, l;
+  return s >= a ? u = s : u = a, i >= c ? l = i : l = c, Math.sqrt(
+    u ** 2 + l ** 2
+  ) * 2;
+}
+const D = (t, e) => e - t.left, O = (t, e) => e - t.top, N = (t, e, o, n, s) => Q(
+  D(t, e),
+  O(t, o),
+  n,
+  s
+), Z = "_ripple_17x6w_1", G = {
+  ripple: Z
+};
+class L {
+  xpos;
+  ypos;
+  width;
+  height;
+  constructor(e, o, n, s) {
+    this.xpos = e, this.ypos = o, this.width = n, this.height = s;
+  }
+}
+class _ {
+  sparkles;
+  color;
+  constructor(e, o) {
+    this.sparkles = e, this.color = o;
+  }
+}
+function v(t, e, o, n) {
+  const s = t * (Math.PI / 180), a = Math.cos(s) * n + (Math.floor(Math.random() * (e / o)) - Math.floor(Math.random() * (e / o))), i = Math.sin(s) * n + (Math.floor(Math.random() * (e / o)) - Math.floor(Math.random() * (e / o)));
+  return { xpos: a, ypos: i };
+}
+function tt(t, e, o) {
+  return `rgb(${o.rgb} / ${Math.abs(
+    (Math.random() - Math.random()) * 0.3 + (1 - t / e) - (1 - 0.6)
+  ).toFixed(2)})`;
+}
+function I(t, e, o, n, s = {
+  rgb: "255 255 255",
+  opacity_level1: "0.2",
+  opacity_level2: "0.1"
+}, a = 6, i = 2048) {
+  const c = o.clientWidth / 2, u = o.clientWidth / 2.6;
+  if (e.clearRect(0, 0, n, n), c === 0 || a === 0)
+    return;
+  const l = [];
+  let d = o.clientWidth;
+  d > i && (d = i);
+  const x = [];
+  for (let g = 0; g < d; g++)
+    x.push(Math.floor(Math.random() * 360));
+  for (const g of x) {
+    const f = v(
+      g,
+      c,
+      a,
+      u
+    );
+    l.push(new L(f.xpos, f.ypos, 1, 1));
+  }
+  const S = tt(
+    c,
+    n,
+    s
+  );
+  t.push(new _(l, S)), t.length > 5 && (t.splice(0, 1), t[0].color = `rgb(${s.rgb} / ${s.opacity_level1})`, t[1].color = `rgb(${s.rgb} / ${s.opacity_level2})`);
+  for (const g of t) {
+    e.fillStyle = g.color;
+    for (const f of g.sparkles)
+      e.fillRect(
+        n / 2 + f.xpos,
+        n / 2 + f.ypos,
+        f.width,
+        f.height
+      );
+  }
+  window.requestAnimationFrame(
+    () => I(t, e, o, n)
+  );
+}
+const rt = "_sparkles_canvas_qe9de_1", nt = {
+  sparkles_canvas: rt
+}, et = X(
+  ({
+    ripple_width: t,
+    rippleRef: e,
+    sparklesColorRGB: o = "255 255 255",
+    opacity_level1: n = "0.2",
+    opacity_level2: s = "0.1",
+    sparklesMaxCount: a = 2048
+  }) => {
+    const i = p(null), c = p(null);
+    return B(() => {
+      const u = window.devicePixelRatio;
+      c.current && (c.current.width = Math.floor(t * u), c.current.height = Math.floor(t * u));
+      const l = c.current?.getContext("2d");
+      if (!l)
+        return;
+      const d = [];
+      return l.scale(u, u), i.current = requestAnimationFrame(() => {
+        e.current && I(
+          d,
+          l,
+          e.current,
+          t,
+          {
+            rgb: o,
+            opacity_level1: n,
+            opacity_level2: s
+          },
+          6,
+          a
+        );
+      }), c.current?.animate(
+        {
+          opacity: [1, 0]
+        },
+        {
+          fill: "forwards",
+          duration: 600
+        }
+      ), () => {
+        i.current && cancelAnimationFrame(i.current);
+      };
+    }, [
+      t,
+      e,
+      o,
+      a,
+      n,
+      s
+    ]), /* @__PURE__ */ k(
+      "canvas",
+      {
+        ref: c,
+        style: {
+          width: `${t}px`,
+          height: `${t}px`
+        },
+        className: q("sparkles_canvas", nt.sparkles_canvas)
+      }
+    );
+  }
+), ot = X(
+  ({
+    ripple_width: t,
+    offsetX: e,
+    offsetY: o,
+    isMaterial3: n = !0,
+    rippleColor: s = "#ffffff35",
+    rippleTime: a = 500,
+    time: i,
+    tobeDeleted: c = !1,
+    // waiting time for ripple animation
+    waitingTime: u = 290,
+    deleteRipple: l,
+    sparklesColorRGB: d = "255 255 255",
+    opacity_level1: x = "0.2",
+    opacity_level2: S = "0.1",
+    sparklesMaxCount: g = 2048
+  }) => {
+    const f = p(null), y = p(null), C = p(!1), [F, P] = Y(!1), $ = j(async () => {
+      if (f.current && y.current) {
+        if (y.current.currentTime < u) {
+          const M = a - y.current.currentTime - u;
+          await new Promise((W) => {
+            setTimeout(W, M);
+          });
+        } else
+          await y.current.finished;
+        if (!f.current)
+          return;
+        await f.current.animate(
+          {
+            opacity: [1, 0]
+          },
+          {
+            fill: "forwards",
+            duration: 200,
+            easing: "cubic-bezier(0.11, 0, 0.5, 0)"
+          }
+        ).finished;
+      }
+      l(i);
+    }, [l, n, a, i, u]);
+    return B(() => {
+      c || (y.current = f.current?.animate(
+        {
+          width: n ? [`${t / 6}px`, `${t}px`] : [`${t / 3}px`, `${t}px`],
+          height: n ? [`${t / 6}px`, `${t}px`] : [`${t / 3}px`, `${t}px`],
+          background: n ? [
+            `radial-gradient(circle closest-side, ${s} 0%, transparent)`,
+            `radial-gradient(circle closest-side, ${s} 80%, transparent)`
+          ] : [s, s]
+        },
+        {
+          fill: "forwards",
+          duration: n ? 400 : a,
+          easing: n ? "cubic-bezier(0,0.49,0,1)" : "cubic-bezier(0.1, 0.8, 1, 0.80)"
+        }
+      ), (async () => (await y.current?.ready, P(!0)))());
+    }, [n, a, s, t, c]), B(() => {
+      c && (C.current || (C.current = !0, $()));
+    }, [c, $]), /* @__PURE__ */ k(
+      "span",
+      {
+        className: q("ripple", G.ripple),
+        style: {
+          width: t,
+          height: t,
+          left: e,
+          top: o
+        },
+        ref: f,
+        children: n && F && /* @__PURE__ */ k(
+          et,
+          {
+            ripple_width: t,
+            rippleRef: f,
+            sparklesColorRGB: d,
+            opacity_level1: x,
+            opacity_level2: S,
+            sparklesMaxCount: g
+          }
+        )
+      }
+    );
+  }
+), st = "_rippleContainer_qv2ad_1", ct = {
+  rippleContainer: st
+}, ft = ({
+  as: t,
+  isMaterial3: e = !0,
+  beforeRippleFn: o,
+  rippleColor: n = "#ffffff35",
+  sparklesColorRGB: s = "255 255 255",
+  opacity_level1: a = "0.2",
+  opacity_level2: i = "0.1",
+  sparklesMaxCount: c = 2048,
+  className: u,
+  children: l,
+  onMouseDown: d,
+  onTouchStart: x,
+  onTouchMove: S,
+  onMouseUp: g,
+  onMouseLeave: f,
+  onTouchEnd: y,
+  onTouchCancel: C,
+  ...F
+}) => {
+  const [P, $] = Y([]), b = p(!1), M = p(!1);
+  function W(r) {
+    if (M.current)
+      return;
+    const h = N(
+      r.currentTarget.getBoundingClientRect(),
+      r.clientX,
+      r.clientY,
+      r.currentTarget.clientWidth,
+      r.currentTarget.clientHeight
+    ), m = D(
+      r.currentTarget.getBoundingClientRect(),
+      r.clientX
+    ), T = O(
+      r.currentTarget.getBoundingClientRect(),
+      r.clientY
+    );
+    o && o(r), z(h, m, T);
+  }
+  function z(r, h, m, T = !1) {
+    if (M.current && !T || !r)
+      return;
+    const R = r / 0.8, A = (/* @__PURE__ */ new Date()).getTime();
+    $((J) => [
+      ...J,
+      {
+        ripple_width: R,
+        offsetX: h,
+        offsetY: m,
+        time: A,
+        isMaterial3: e,
+        tobeDeleted: !1
+      }
+    ]);
+  }
+  async function w(r) {
+    (r.type === "touchend" || r.type === "touchcancel") && await new Promise((h) => setTimeout(h, 100)), $((h) => h.length === 0 ? [] : h.map((m) => ({ ...m, tobeDeleted: !0 }))), b.current = !1;
+  }
+  const H = j((r) => {
+    $((h) => h.filter((m) => m.time !== r));
+  }, []), U = async (r) => {
+    const h = N(
+      r.currentTarget.getBoundingClientRect(),
+      r.changedTouches[0].clientX,
+      r.changedTouches[0].clientY,
+      r.currentTarget.clientWidth,
+      r.currentTarget.clientHeight
+    ), m = D(
+      r.currentTarget.getBoundingClientRect(),
+      r.changedTouches[0].clientX
+    ), T = O(
+      r.currentTarget.getBoundingClientRect(),
+      r.changedTouches[0].clientY
+    );
+    M.current = !0, await new Promise((R) => {
+      setTimeout(R, 100);
+    }), setTimeout(() => {
+      M.current = !1;
+    }, 1e3), b.current || (o && o(r), z(h, m, T, !0)), b.current = !1;
+  }, V = () => {
+    b.current = !0;
+  };
+  return /* @__PURE__ */ K(
+    t ?? "div",
+    {
+      ...F,
+      className: q(ct.rippleContainer, u ?? ""),
+      onMouseDown: (r) => {
+        W(r), d?.(r);
+      },
+      onTouchStart: (r) => {
+        U(r), x?.(r);
+      },
+      onTouchMove: (r) => {
+        V(), S?.(r);
+      },
+      onTouchEnd: (r) => {
+        w(r), y?.(r);
+      },
+      onMouseUp: (r) => {
+        w(r), g?.(r);
+      },
+      onMouseLeave: (r) => {
+        w(r), f?.(r);
+      },
+      onTouchCancel: (r) => {
+        w(r), C?.(r);
+      },
+      children: [
+        P.map(
+          ({
+            ripple_width: r,
+            offsetX: h,
+            offsetY: m,
+            isMaterial3: T,
+            time: R,
+            tobeDeleted: A
+          }) => /* @__PURE__ */ k(
+            ot,
+            {
+              time: R,
+              ripple_width: r,
+              offsetX: h,
+              offsetY: m,
+              isMaterial3: T,
+              tobeDeleted: A,
+              deleteRipple: H,
+              rippleColor: n,
+              sparklesColorRGB: s,
+              opacity_level1: a,
+              opacity_level2: i,
+              sparklesMaxCount: c
+            },
+            R
+          )
+        ),
+        l
+      ]
+    }
+  );
+};
+export {
+  ft as RippleContainer
+};

package/dist/sparkle-ripple.umd.cjs

@@ -0,0 +1 @@
+(function(T,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],y):(T=typeof globalThis<"u"?globalThis:T||self,y(T["sparkle-ripple"]={},T.ReactJSXRuntime,T.React))})(this,(function(T,y,i){"use strict";function D(t){var r,s,e="";if(typeof t=="string"||typeof t=="number")e+=t;else if(typeof t=="object")if(Array.isArray(t)){var o=t.length;for(r=0;r<o;r++)t[r]&&(s=D(t[r]))&&(e&&(e+=" "),e+=s)}else for(s in t)t[s]&&(e&&(e+=" "),e+=s);return e}function F(){for(var t,r,s=0,e="",o=arguments.length;s<o;s++)(t=arguments[s])&&(r=D(t))&&(e&&(e+=" "),e+=r);return e}function N(t,r,s,e){if(!t||!r||!s||!e)return;const o=t,a=s-t,u=r,c=e-r;let f,h;return o>=a?f=o:f=a,u>=c?h=u:h=c,Math.sqrt(f**2+h**2)*2}const W=(t,r)=>r-t.left,A=(t,r)=>r-t.top,X=(t,r,s,e,o)=>N(W(t,r),A(t,s),e,o),Y={ripple:"_ripple_17x6w_1"};class I{xpos;ypos;width;height;constructor(r,s,e,o){this.xpos=r,this.ypos=s,this.width=e,this.height=o}}class H{sparkles;color;constructor(r,s){this.sparkles=r,this.color=s}}function J(t,r,s,e){const o=t*(Math.PI/180),a=Math.cos(o)*e+(Math.floor(Math.random()*(r/s))-Math.floor(Math.random()*(r/s))),u=Math.sin(o)*e+(Math.floor(Math.random()*(r/s))-Math.floor(Math.random()*(r/s)));return{xpos:a,ypos:u}}function U(t,r,s){return`rgb(${s.rgb} / ${Math.abs((Math.random()-Math.random())*.3+(1-t/r)-(1-.6)).toFixed(2)})`}function z(t,r,s,e,o={rgb:"255 255 255",opacity_level1:"0.2",opacity_level2:"0.1"},a=6,u=2048){const c=s.clientWidth/2,f=s.clientWidth/2.6;if(r.clearRect(0,0,e,e),c===0||a===0)return;const h=[];let p=s.clientWidth;p>u&&(p=u);const b=[];for(let g=0;g<p;g++)b.push(Math.floor(Math.random()*360));for(const g of b){const l=J(g,c,a,f);h.push(new I(l.xpos,l.ypos,1,1))}const k=U(c,e,o);t.push(new H(h,k)),t.length>5&&(t.splice(0,1),t[0].color=`rgb(${o.rgb} / ${o.opacity_level1})`,t[1].color=`rgb(${o.rgb} / ${o.opacity_level2})`);for(const g of t){r.fillStyle=g.color;for(const l of g.sparkles)r.fillRect(e/2+l.xpos,e/2+l.ypos,l.width,l.height)}window.requestAnimationFrame(()=>z(t,r,s,e))}const V={sparkles_canvas:"_sparkles_canvas_qe9de_1"},K=i.memo(({ripple_width:t,rippleRef:r,sparklesColorRGB:s="255 255 255",opacity_level1:e="0.2",opacity_level2:o="0.1",sparklesMaxCount:a=2048})=>{const u=i.useRef(null),c=i.useRef(null);return i.useEffect(()=>{const f=window.devicePixelRatio;c.current&&(c.current.width=Math.floor(t*f),c.current.height=Math.floor(t*f));const h=c.current?.getContext("2d");if(!h)return;const p=[];return h.scale(f,f),u.current=requestAnimationFrame(()=>{r.current&&z(p,h,r.current,t,{rgb:s,opacity_level1:e,opacity_level2:o},6,a)}),c.current?.animate({opacity:[1,0]},{fill:"forwards",duration:600}),()=>{u.current&&cancelAnimationFrame(u.current)}},[t,r,s,a,e,o]),y.jsx("canvas",{ref:c,style:{width:`${t}px`,height:`${t}px`},className:F("sparkles_canvas",V.sparkles_canvas)})}),Q=i.memo(({ripple_width:t,offsetX:r,offsetY:s,isMaterial3:e=!0,rippleColor:o="#ffffff35",rippleTime:a=500,time:u,tobeDeleted:c=!1,waitingTime:f=290,deleteRipple:h,sparklesColorRGB:p="255 255 255",opacity_level1:b="0.2",opacity_level2:k="0.1",sparklesMaxCount:g=2048})=>{const l=i.useRef(null),x=i.useRef(null),w=i.useRef(!1),[q,O]=i.useState(!1),$=i.useCallback(async()=>{if(l.current&&x.current){if(x.current.currentTime<f){const M=a-x.current.currentTime-f;await new Promise(j=>{setTimeout(j,M)})}else await x.current.finished;if(!l.current)return;await l.current.animate({opacity:[1,0]},{fill:"forwards",duration:200,easing:"cubic-bezier(0.11, 0, 0.5, 0)"}).finished}h(u)},[h,e,a,u,f]);return i.useEffect(()=>{c||(x.current=l.current?.animate({width:e?[`${t/6}px`,`${t}px`]:[`${t/3}px`,`${t}px`],height:e?[`${t/6}px`,`${t}px`]:[`${t/3}px`,`${t}px`],background:e?[`radial-gradient(circle closest-side, ${o} 0%, transparent)`,`radial-gradient(circle closest-side, ${o} 80%, transparent)`]:[o,o]},{fill:"forwards",duration:e?400:a,easing:e?"cubic-bezier(0,0.49,0,1)":"cubic-bezier(0.1, 0.8, 1, 0.80)"}),(async()=>(await x.current?.ready,O(!0)))())},[e,a,o,t,c]),i.useEffect(()=>{c&&(w.current||(w.current=!0,$()))},[c,$]),y.jsx("span",{className:F("ripple",Y.ripple),style:{width:t,height:t,left:r,top:s},ref:l,children:e&&q&&y.jsx(K,{ripple_width:t,rippleRef:l,sparklesColorRGB:p,opacity_level1:b,opacity_level2:k,sparklesMaxCount:g})})}),Z={rippleContainer:"_rippleContainer_qv2ad_1"},G=({as:t,isMaterial3:r=!0,beforeRippleFn:s,rippleColor:e="#ffffff35",sparklesColorRGB:o="255 255 255",opacity_level1:a="0.2",opacity_level2:u="0.1",sparklesMaxCount:c=2048,className:f,children:h,onMouseDown:p,onTouchStart:b,onTouchMove:k,onMouseUp:g,onMouseLeave:l,onTouchEnd:x,onTouchCancel:w,...q})=>{const[O,$]=i.useState([]),S=i.useRef(!1),M=i.useRef(!1);function j(n){if(M.current)return;const d=X(n.currentTarget.getBoundingClientRect(),n.clientX,n.clientY,n.currentTarget.clientWidth,n.currentTarget.clientHeight),m=W(n.currentTarget.getBoundingClientRect(),n.clientX),R=A(n.currentTarget.getBoundingClientRect(),n.clientY);s&&s(n),E(d,m,R)}function E(n,d,m,R=!1){if(M.current&&!R||!n)return;const C=n/.8,B=new Date().getTime();$(nt=>[...nt,{ripple_width:C,offsetX:d,offsetY:m,time:B,isMaterial3:r,tobeDeleted:!1}])}async function P(n){(n.type==="touchend"||n.type==="touchcancel")&&await new Promise(d=>setTimeout(d,100)),$(d=>d.length===0?[]:d.map(m=>({...m,tobeDeleted:!0}))),S.current=!1}const L=i.useCallback(n=>{$(d=>d.filter(m=>m.time!==n))},[]),_=async n=>{const d=X(n.currentTarget.getBoundingClientRect(),n.changedTouches[0].clientX,n.changedTouches[0].clientY,n.currentTarget.clientWidth,n.currentTarget.clientHeight),m=W(n.currentTarget.getBoundingClientRect(),n.changedTouches[0].clientX),R=A(n.currentTarget.getBoundingClientRect(),n.changedTouches[0].clientY);M.current=!0,await new Promise(C=>{setTimeout(C,100)}),setTimeout(()=>{M.current=!1},1e3),S.current||(s&&s(n),E(d,m,R,!0)),S.current=!1},v=()=>{S.current=!0},tt=t??"div";return y.jsxs(tt,{...q,className:F(Z.rippleContainer,f??""),onMouseDown:n=>{j(n),p?.(n)},onTouchStart:n=>{_(n),b?.(n)},onTouchMove:n=>{v(),k?.(n)},onTouchEnd:n=>{P(n),x?.(n)},onMouseUp:n=>{P(n),g?.(n)},onMouseLeave:n=>{P(n),l?.(n)},onTouchCancel:n=>{P(n),w?.(n)},children:[O.map(({ripple_width:n,offsetX:d,offsetY:m,isMaterial3:R,time:C,tobeDeleted:B})=>y.jsx(Q,{time:C,ripple_width:n,offsetX:d,offsetY:m,isMaterial3:R,tobeDeleted:B,deleteRipple:L,rippleColor:e,sparklesColorRGB:o,opacity_level1:a,opacity_level2:u,sparklesMaxCount:c},C)),h]})};T.RippleContainer=G,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "sparkle-ripple",
+  "version": "3.0.0",
+  "author": "yuyake-litrain",
+  "homepage": "https://m3ripple.js.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuyake-litrain/sparkle-ripple.git"
+  },
+  "main": "./dist/sparkle-ripple.umd.cjs",
+  "module": "./dist/sparkle-ripple.js",
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.10",
+    "@types/node": "^22.19.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "clsx": "^2.1.1",
+    "concurrently": "^9.2.1",
+    "globals": "^16.5.0",
+    "playwright": "^1.57.0",
+    "typed-css-modules": "^0.9.1",
+    "typescript": "5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/sparkle-ripple.d.ts",
+      "import": "./dist/sparkle-ripple.js",
+      "require": "./dist/sparkle-ripple.umd.cjs"
+    },
+    "./css": "./dist/sparkle-ripple.css"
+  },
+  "description": "Bring Material 3(You) Ripple Effect to your projects!",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "Ripple",
+    "Ripple Effect",
+    "Material Design",
+    "Material You",
+    "react",
+    "web",
+    "front-end"
+  ],
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "biome lint --write",
+    "format": "biome format --write",
+    "check": "biome check --write",
+    "preview": "vite preview",
+    "preinstall": "npx only-allow bun"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts"
+}