react-animated-waves 1.0.3 → 1.0.5

package/LICENSE

@@ -1,21 +1,18 @@
 MIT License
 
-Copyright (c) 2024 - PRESENT Rohit Agrawal
+Copyright (c) 2025 Rohit Agrawal
 
-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:
+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 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.
+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

@@ -1,55 +1,61 @@
 <div align="center">
-  
-## React Animated Waves
-
-<p align="center" style="width: 80%; margin: auto">
-<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/agrawal-rohit/react-animated-waves/Publish.yml">
-<img alt="Codacy coverage" src="https://img.shields.io/codacy/coverage/09220ab3d193472ba76d1ad50f11ee51">
-<img alt="npm" src="https://img.shields.io/npm/dw/react-animated-waves">
-<img alt="Licence" src="https://img.shields.io/github/license/agrawal-rohit/react-animated-waves">
-</p>
+  <h2>React Animated Waves</h2>
+</div>
 
-[Installation](#installation) • [Demo](https://codesandbox.io/p/sandbox/react-animated-waves-example-6z9hlh) • [Usage](#usage) • [Props](#props) • [Contributing](#contributing) • [License](#license)
+<div align="center">
+  <p align="center" style="width: 80%; margin: auto">
+    <a href="https://github.com/agrawal-rohit/grimoire"><img alt="Made with Grimoire" src="https://img.shields.io/badge/made_with-grimoire-7452A3"></a>
+    <img alt="Status" src="https://img.shields.io/github/actions/workflow/status/agrawal-rohit/react-animated-waves/ci.yml">
+    <img alt="Sonar Coverage" src="https://img.shields.io/sonar/coverage/agrawal-rohit_react-animated-waves?server=https%3A%2F%2Fsonarcloud.io">
+    <img alt="Downloads" src="https://img.shields.io/npm/dt/react-animated-waves">
+    <img alt="License" src="https://img.shields.io/github/license/agrawal-rohit/react-animated-waves" />
+  </p>
 
-<br />
+[Installation](#installation) • [Demo](#demo) • [Usage](#usage) • [Contributing](#contributing) • [License](#license)
 
-![Aug-24-2024 22-55-33](https://cdn.rohit.build/github-gifs%3Areact-animated-waves.gif)
+<img src="https://cdn.rohit.build/oss/react-animated-waves/github-readme-preview.gif" alt="Preview" style="width: 80%; margin: auto" />
 
 </div>
 
-A canvas-based component built with React for creating fluid animated waves _(ideally used in audio visualizations, voice UIs, progress loaders, etc.)_.
+<br />
+
+`react-animated-waves` is an opinionated canvas-based React component for displaying wave animations. The colors and strength of the wave animations can be customized to support dynamic UIs such as audio visualizations, voice UIs, progress loaders, etc.
 
 ## Installation
 
-The easiest way to get the latest version of `react-animated-waves` is to install it via npm, yarn or pnpm:
+`react-animated-waves` can be installed using [npm](https://www.npmjs.com/) (or your favorite package manager):
 
 ```bash
-npm install react-animated-waves
+$ npm install react-animated-waves
 ```
 
+## Demo
+
+Check out an interactive demo [here](https://codesandbox.io/p/sandbox/react-animated-waves-example-6z9hlh).
+
 ## Usage
 
-Import the `Waves` component from the library and use it in your React app. Check out an interactive demo [here](https://codesandbox.io/p/sandbox/react-animated-waves-example-6z9hlh).
+Import the `Waves` component from `react-animated-waves` and use it in your React app as follows:
 
 ```jsx
-import Waves from "react-animated-waves";
+import { Waves } from "react-animated-waves";
 
 <Waves amplitude={20} colors={["#FF6AC6", "#436EDB", "#FF6AC6"]} />;
 ```
 
-## Props
+### Props
 
 The `Waves` component accepts the following props:
 
 | Prop        | Description                                                                 | Default       |
 | ----------- | --------------------------------------------------------------------------- | ------------- |
-| `amplitude` | Defines the height of the waveform. Higher values result in taller waves.   | `20`          |
-| `colors`    | An array of colors used to create a linear gradient effect on the waveform. | `['#436EDB']` |
+| `amplitude` | Defines the strength of the waveform. Higher values result in taller waves.   | `20`          |
+| `colors`    | An array of hex colors used to create a linear gradient effect on the waveform. | `['#436EDB']` |
 
 ## Contributing
 
-Contributions are welcome. Please read the [contributing guide](CONTRIBUTING.md) for more information.
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to report issues, propose changes, and submit pull requests.
 
 ## License
 
-[MIT License](LICENSE).
+[MIT](LICENSE) © [Rohit Agrawal](https://github.com/agrawal-rohit)

package/dist/index.d.ts

@@ -1,10 +1,13 @@
-import React from "react";
+import * as react0 from "react";
+
+//#region src/waves.d.ts
 type WavesProps = React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement> & {
-    /** The colors for the waveform */
-    colors?: string[];
-    /** The amplitude of the waveform */
-    amplitude?: number;
+  /** The colors for the waveform */
+  colors?: string[];
+  /** The amplitude of the waveform */
+  amplitude?: number;
 };
-declare const _default: React.NamedExoticComponent<WavesProps>;
-export default _default;
+declare const Waves: react0.NamedExoticComponent<WavesProps>;
+//#endregion
+export { Waves };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,170 +1,2 @@
-'use strict';
-
-var React = require('react');
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-// Linear interpolation function
-// This function is used to smoothly transition between two values
-var lerp = function (a, b, t) {
-    return a + t * (b - a);
-};
-// Function to convert a hexadecimal color to RGBA
-var hexToRgba = function (hex, alpha) {
-    if (alpha === void 0) { alpha = 1; }
-    if (hex[0] === "#") {
-        hex = hex.slice(1);
-    }
-    var bigint = parseInt(hex, 16);
-    var r = (bigint >> 16) & 255;
-    var g = (bigint >> 8) & 255;
-    var b = bigint & 255;
-    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
-};
-var Waves = function (_a) {
-    var _b = _a.amplitude, amplitude = _b === void 0 ? 20 : _b, _c = _a.colors, colors = _c === void 0 ? ["#436EDB"] : _c, props = __rest(_a, ["amplitude", "colors"]);
-    var amplitudeRef = React.useRef(amplitude);
-    var canvasRef = React.useRef(null);
-    var targetAmplitudeRef = React.useRef(amplitude);
-    // Update the target amplitude whenever the amplitude prop changes
-    React.useEffect(function () {
-        targetAmplitudeRef.current = amplitude;
-    }, [amplitude]);
-    // Function to draw the waveform on the canvas
-    var drawWaveform = React.useCallback(function (ctx, amplitude, frequency, color, phase) {
-        if (phase === void 0) { phase = 0; }
-        ctx.strokeStyle = color;
-        ctx.beginPath();
-        // Draw the waveform
-        for (var i = 0; i < ctx.canvas.width; i++) {
-            // Compute the pinching effect
-            var sineWave = Math.sin(Math.PI * (i / ctx.canvas.width));
-            var pinch = Math.pow(sineWave, 6);
-            // Calculate the y position with sine function, pinch effect, and time-based phase shift
-            var y = amplitude * Math.sin(frequency * i + phase) * pinch;
-            ctx.lineTo(i, ctx.canvas.height / 2 + y);
-        }
-        ctx.stroke();
-    }, []);
-    // Animate the waveform
-    React.useEffect(function () {
-        var animationFrameId;
-        var canvas = canvasRef.current;
-        var ctx = canvas.getContext("2d");
-        var parent = canvas.parentElement;
-        if (parent)
-            canvas.width = parent.clientWidth;
-        var animate = function () {
-            var time = Date.now() * 0.0015; // Convert milliseconds to seconds and increase speed
-            amplitudeRef.current = lerp(amplitudeRef.current, targetAmplitudeRef.current, 0.1);
-            // Create an oscillating effect with amplitude
-            var oscillatingAmplitude = amplitudeRef.current * (1 + Math.sin(time) * 0.05);
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // Define primary waveforms with their respective amplitudes, frequencies, and colors
-            var primaryWaveforms = [
-                {
-                    amplitude: oscillatingAmplitude,
-                    frequency: 0.02,
-                    alpha: 0.6,
-                    speed: 0.001,
-                },
-                {
-                    amplitude: oscillatingAmplitude * 0.6,
-                    frequency: 0.03,
-                    alpha: 0.4,
-                    speed: 0.004,
-                },
-                {
-                    amplitude: oscillatingAmplitude * 0.3,
-                    frequency: 0.04,
-                    alpha: 0.2,
-                    speed: 0.007,
-                },
-            ];
-            var _loop_1 = function (primary) {
-                var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
-                var stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;
-                colors.forEach(function (color, index) {
-                    gradient.addColorStop(stopIncrement * index, hexToRgba(color, primary.alpha));
-                });
-                drawWaveform(ctx, primary.amplitude, primary.frequency, gradient, Date.now() * primary.speed);
-                var _loop_2 = function (i) {
-                    var amp = primary.amplitude - i * 0.1;
-                    var freq = primary.frequency + i * 0.00025;
-                    var alpha = primary.alpha * 0.6 - i * 0.01;
-                    var gradient_1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
-                    var stopIncrement_1 = colors.length > 1 ? 1 / (colors.length - 1) : 0;
-                    colors.forEach(function (color, index) {
-                        gradient_1.addColorStop(stopIncrement_1 * index, hexToRgba(color, alpha));
-                    });
-                    drawWaveform(ctx, amp, freq, gradient_1, Date.now() * primary.speed + i * 0.015);
-                };
-                // Draw secondary waveforms around the primary waveform
-                for (var i = 0; i < 30; i++) {
-                    _loop_2(i);
-                }
-            };
-            // For each primary waveform, draw the waveform and its surrounding mesh
-            for (var _i = 0, primaryWaveforms_1 = primaryWaveforms; _i < primaryWaveforms_1.length; _i++) {
-                var primary = primaryWaveforms_1[_i];
-                _loop_1(primary);
-            }
-            animationFrameId = requestAnimationFrame(animate);
-        };
-        animate();
-        // Clean up the animation frame when the component unmounts
-        return function () {
-            cancelAnimationFrame(animationFrameId);
-        };
-    }, [colors, drawWaveform]);
-    // Render the canvas 
-    return (React.createElement("canvas", __assign({ ref: canvasRef, width: "100%", height: "auto" }, props)));
-};
-// Export the memoized version of the component to avoid unnecessary re-renders
-var index = React.memo(Waves);
-
-module.exports = index;
-//# sourceMappingURL=index.js.map
+import{memo as e,useCallback as t,useEffect as n,useRef as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=(e,t,n)=>e+n*(t-e),o=(e,t=1)=>{e.startsWith(`#`)&&(e=e.slice(1));let n=Number.parseInt(e,16),r=n>>16&255,i=n>>8&255,a=n&255;return`rgba(${r}, ${i}, ${a}, ${t})`},s=e(({amplitude:e=20,colors:s=[`#436EDB`],...c})=>{let l=r(e),u=r(null),d=r(e);n(()=>{d.current=e},[e]);let f=t((e,t,n,r,i=0)=>{e.strokeStyle=r,e.beginPath();for(let r=0;r<e.canvas.width;r++){let a=Math.sin(Math.PI*(r/e.canvas.width)),o=a**6,s=t*Math.sin(n*r+i)*o;e.lineTo(r,e.canvas.height/2+s)}e.stroke()},[]);return n(()=>{let e,t=u.current,n=t.getContext(`2d`);if(!n)return;let r=t.parentElement;r&&(t.width=r.clientWidth);let i=()=>{let r=Date.now()*.0015;l.current=a(l.current,d.current,.1);let c=l.current*(1+Math.sin(r)*.05);n.clearRect(0,0,t.width,t.height);let u=[{amplitude:c,frequency:.02,alpha:.6,speed:.001},{amplitude:c*.6,frequency:.03,alpha:.4,speed:.004},{amplitude:c*.3,frequency:.04,alpha:.2,speed:.007}];for(let e of u){let r=n.createLinearGradient(0,0,t.width,t.height),i=s.length>1?1/(s.length-1):0;s.forEach((t,n)=>{r.addColorStop(i*n,o(t,e.alpha))}),f(n,e.amplitude,e.frequency,r,Date.now()*e.speed);for(let r=0;r<30;r++){let i=e.amplitude-r*.1,a=e.frequency+r*25e-5,c=e.alpha*.6-r*.01,l=n.createLinearGradient(0,0,t.width,t.height),u=s.length>1?1/(s.length-1):0;s.forEach((e,t)=>{l.addColorStop(u*t,o(e,c))}),f(n,i,a,l,Date.now()*e.speed+r*.015)}}e=requestAnimationFrame(i)};return i(),()=>{cancelAnimationFrame(e)}},[s,f]),i(`canvas`,{ref:u,width:`100%`,height:`auto`,...c})});export{s as Waves};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["a: number","b: number","t: number","hex: string","alpha: number","ctx: CanvasRenderingContext2D","amplitude: number","frequency: number","color: string | CanvasGradient","amplitude","animationFrameId: number","gradient","stopIncrement"],"sources":["../src/utils.ts","../src/waves.tsx"],"sourcesContent":["/**\n * Linearly interpolates between two numeric values.\n *\n * Given a start value `a` and an end value `b`, returns the value that lies\n * `t` fraction of the way from `a` to `b`. The interpolation factor `t` is\n * typically in the range [0, 1], where 0 returns `a` and 1 returns `b`.\n * No clamping is performed on `t` (values outside [0, 1] will extrapolate).\n *\n * @param a - Start value.\n * @param b - End value.\n * @param t - Interpolation factor between 0 and 1 (no automatic clamping).\n * @returns The interpolated numeric value at fraction `t` between `a` and `b`.\n *\n * @example\n * lerp(0, 10, 0.5); // returns 5\n */\nexport const lerp = (a: number, b: number, t: number): number => {\n\treturn a + t * (b - a);\n};\n\n/**\n * Convert a hexadecimal color to an rgba(...) CSS string.\n *\n * The `hex` parameter may optionally start with a leading '#'. This function\n * expects a 6-digit hexadecimal color (e.g. \"#aabbcc\" or \"aabbcc\"). The\n * returned string is a valid CSS `rgba(r, g, b, a)` representation where\n * `r`, `g`, and `b` are integer values in [0, 255] and `a` is the supplied\n * alpha value.\n *\n * Note: This function does not perform strict validation on the `hex` input.\n * Passing non-hex characters or an incorrectly sized hex string may produce\n * unexpected results.\n *\n * @param hex - Hex color string (with or without leading '#'), expected 6 hex digits.\n * @param alpha - Opacity value between 0 and 1 (default: 1).\n * @returns A CSS rgba(...) string representing the color and alpha.\n *\n * @example\n * hexToRgba('#ff0000', 0.5); // returns \"rgba(255, 0, 0, 0.5)\"\n */\nexport const hexToRgba = (hex: string, alpha: number = 1): string => {\n\tif (hex.startsWith(\"#\")) {\n\t\thex = hex.slice(1);\n\t}\n\n\tconst bigint = Number.parseInt(hex, 16);\n\tconst r = (bigint >> 16) & 255;\n\tconst g = (bigint >> 8) & 255;\n\tconst b = bigint & 255;\n\n\treturn `rgba(${r}, ${g}, ${b}, ${alpha})`;\n};\n","import { memo, useCallback, useEffect, useRef } from \"react\";\nimport { hexToRgba, lerp } from \"./utils\";\n\n// Define the properties for the AnimatedWaveform component\ntype WavesProps = React.DetailedHTMLProps<\n\tReact.CanvasHTMLAttributes<HTMLCanvasElement>,\n\tHTMLCanvasElement\n> & {\n\t/** The colors for the waveform */\n\tcolors?: string[];\n\t/** The amplitude of the waveform */\n\tamplitude?: number;\n};\n\nexport const Waves = memo<WavesProps>(\n\t({ amplitude = 20, colors = [\"#436EDB\"], ...props }) => {\n\t\tconst amplitudeRef = useRef(amplitude);\n\t\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\t\tconst targetAmplitudeRef = useRef<number>(amplitude);\n\n\t\t// Update the target amplitude whenever the amplitude prop changes\n\t\tuseEffect(() => {\n\t\t\ttargetAmplitudeRef.current = amplitude;\n\t\t}, [amplitude]);\n\n\t\t// Function to draw the waveform on the canvas\n\t\tconst drawWaveform = useCallback(\n\t\t\t(\n\t\t\t\tctx: CanvasRenderingContext2D,\n\t\t\t\tamplitude: number,\n\t\t\t\tfrequency: number,\n\t\t\t\tcolor: string | CanvasGradient,\n\t\t\t\tphase = 0,\n\t\t\t) => {\n\t\t\t\tctx.strokeStyle = color;\n\t\t\t\tctx.beginPath();\n\n\t\t\t\t// Draw the waveform\n\t\t\t\tfor (let i = 0; i < ctx.canvas.width; i++) {\n\t\t\t\t\t// Compute the pinching effect\n\t\t\t\t\tconst sineWave = Math.sin(Math.PI * (i / ctx.canvas.width));\n\t\t\t\t\tconst pinch = sineWave ** 6;\n\n\t\t\t\t\t// Calculate the y position with sine function, pinch effect, and time-based phase shift\n\t\t\t\t\tconst y = amplitude * Math.sin(frequency * i + phase) * pinch;\n\n\t\t\t\t\tctx.lineTo(i, ctx.canvas.height / 2 + y);\n\t\t\t\t}\n\n\t\t\t\tctx.stroke();\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\t// Animate the waveform\n\t\tuseEffect(() => {\n\t\t\tlet animationFrameId: number;\n\t\t\tconst canvas = canvasRef.current as HTMLCanvasElement;\n\t\t\tconst ctx = canvas.getContext(\"2d\");\n\t\t\tif (!ctx) return;\n\t\t\tconst parent = canvas.parentElement;\n\t\t\tif (parent) canvas.width = parent.clientWidth;\n\n\t\t\tconst animate = () => {\n\t\t\t\tconst time = Date.now() * 0.0015; // Convert milliseconds to seconds and increase speed\n\n\t\t\t\tamplitudeRef.current = lerp(\n\t\t\t\t\tamplitudeRef.current,\n\t\t\t\t\ttargetAmplitudeRef.current,\n\t\t\t\t\t0.1,\n\t\t\t\t);\n\n\t\t\t\t// Create an oscillating effect with amplitude\n\t\t\t\tconst oscillatingAmplitude =\n\t\t\t\t\tamplitudeRef.current * (1 + Math.sin(time) * 0.05);\n\n\t\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t\t\t// Define primary waveforms with their respective amplitudes, frequencies, and colors\n\t\t\t\tconst primaryWaveforms = [\n\t\t\t\t\t{\n\t\t\t\t\t\tamplitude: oscillatingAmplitude,\n\t\t\t\t\t\tfrequency: 0.02,\n\t\t\t\t\t\talpha: 0.6,\n\t\t\t\t\t\tspeed: 0.001,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tamplitude: oscillatingAmplitude * 0.6,\n\t\t\t\t\t\tfrequency: 0.03,\n\t\t\t\t\t\talpha: 0.4,\n\t\t\t\t\t\tspeed: 0.004,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tamplitude: oscillatingAmplitude * 0.3,\n\t\t\t\t\t\tfrequency: 0.04,\n\t\t\t\t\t\talpha: 0.2,\n\t\t\t\t\t\tspeed: 0.007,\n\t\t\t\t\t},\n\t\t\t\t];\n\n\t\t\t\t// For each primary waveform, draw the waveform and its surrounding mesh\n\t\t\t\tfor (const primary of primaryWaveforms) {\n\t\t\t\t\tconst gradient = ctx.createLinearGradient(\n\t\t\t\t\t\t0,\n\t\t\t\t\t\t0,\n\t\t\t\t\t\tcanvas.width,\n\t\t\t\t\t\tcanvas.height,\n\t\t\t\t\t);\n\t\t\t\t\tconst stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n\t\t\t\t\tcolors.forEach((color, index) => {\n\t\t\t\t\t\tgradient.addColorStop(\n\t\t\t\t\t\t\tstopIncrement * index,\n\t\t\t\t\t\t\thexToRgba(color, primary.alpha),\n\t\t\t\t\t\t);\n\t\t\t\t\t});\n\n\t\t\t\t\tdrawWaveform(\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tprimary.amplitude,\n\t\t\t\t\t\tprimary.frequency,\n\t\t\t\t\t\tgradient,\n\t\t\t\t\t\tDate.now() * primary.speed,\n\t\t\t\t\t);\n\n\t\t\t\t\t// Draw secondary waveforms around the primary waveform\n\t\t\t\t\tfor (let i = 0; i < 30; i++) {\n\t\t\t\t\t\tconst amp = primary.amplitude - i * 0.1;\n\t\t\t\t\t\tconst freq = primary.frequency + i * 0.00025;\n\t\t\t\t\t\tconst alpha = primary.alpha * 0.6 - i * 0.01;\n\t\t\t\t\t\tconst gradient = ctx.createLinearGradient(\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\tcanvas.width,\n\t\t\t\t\t\t\tcanvas.height,\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst stopIncrement =\n\t\t\t\t\t\t\tcolors.length > 1 ? 1 / (colors.length - 1) : 0;\n\t\t\t\t\t\tcolors.forEach((color, index) => {\n\t\t\t\t\t\t\tgradient.addColorStop(\n\t\t\t\t\t\t\t\tstopIncrement * index,\n\t\t\t\t\t\t\t\thexToRgba(color, alpha),\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tdrawWaveform(\n\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\tamp,\n\t\t\t\t\t\t\tfreq,\n\t\t\t\t\t\t\tgradient,\n\t\t\t\t\t\t\tDate.now() * primary.speed + i * 0.015,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tanimationFrameId = requestAnimationFrame(animate);\n\t\t\t};\n\n\t\t\tanimate();\n\n\t\t\t// Clean up the animation frame when the component unmounts\n\t\t\treturn () => {\n\t\t\t\tcancelAnimationFrame(animationFrameId);\n\t\t\t};\n\t\t}, [colors, drawWaveform]);\n\n\t\t// Render the canvas\n\t\treturn (\n\t\t\t<canvas ref={canvasRef} width=\"100%\" height=\"auto\" {...props}></canvas>\n\t\t);\n\t},\n);\n"],"mappings":"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"}

package/package.json

@@ -1,117 +1,62 @@
 {
   "name": "react-animated-waves",
-  "version": "1.0.3",
-  "description": "A React component for creating beautiful audio visualizations or UI loading states using animated waves",
-  "main": "dist/index.min.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "keywords": [
-    "reactjs",
-    "audio-visualization",
-    "loader-animation",
-    "animated-wave"
-  ],
+  "version": "1.0.5",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "homepage": "https://github.com/agrawal-rohit/react-animated-waves#readme",
+  "bugs": "https://github.com/agrawal-rohit/react-animated-waves/issues",
+  "repository": "https://github.com/agrawal-rohit/react-animated-waves",
+  "author": "Rohit Agrawal <29514438+agrawal-rohit@users.noreply.github.com>",
   "files": [
     "dist"
   ],
-  "author": "Rohit Agrawal <https://github.com/agrawal-rohit>",
-  "repository": "https://github.com/agrawal-rohit/react-animated-waves.git",
-  "homepage": "https://github.com/agrawal-rohit/react-animated-waves.git",
-  "license": "MIT",
-  "scripts": {
-    "cz": "git-cz",
-    "test": "jest --coverage",
-    "start": "rollup -c rollup.config.js -w",
-    "build": "tsc && rollup -c rollup.config.js",
-    "test:watch": "jest --coverage --watch",
-    "semantic-release": "semantic-release"
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "tailwindcss": "^4.1.17"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.1",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "commitizen": "^4.3.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-standard": "^5.0.0",
-    "husky": "^8.0.3",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.33",
-    "prettier": "^3.2.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.9.5",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "semantic-release": "^23.0.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
+    "@biomejs/biome": "2.2.3",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@fontsource/geist-sans": "^5.2.5",
+    "@stryker-mutator/core": "^9.4.0",
+    "@stryker-mutator/typescript-checker": "^9.4.0",
+    "@stryker-mutator/vitest-runner": "^9.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.4",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/coverage-v8": "3.2.4",
+    "git-cliff": "^2.10.1",
+    "happy-dom": "^20.0.11",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.6",
+    "tsdown": "^0.11.9",
+    "typescript": "^5.9.2",
+    "vite": "npm:rolldown-vite@latest",
+    "vitest": "^3.2.4"
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "dist/"
-  ],
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
-  "release": {
-    "branches": [
-      "main",
-      {
-        "name": "beta",
-        "prerelease": true
-      }
-    ],
-    "prepare": [
-      "@semantic-release/changelog",
-      "@semantic-release/npm",
-      {
-        "path": "@semantic-release/git",
-        "assets": [
-          "dist/**/*.{js,ts}",
-          "package.json",
-          "package-lock.json",
-          "yarn.lock",
-          "CHANGELOG.md"
-        ],
-        "message": "chore(release): ${nextRelease.version} [skip ci]"
-      }
-    ]
-  },
-  "packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538"
-}
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "test-mutations": "stryker run",
+    "playground": "vite --config playground/vite.config.ts",
+    "cov": "vitest run --coverage --passWithNoTests",
+    "typecheck": "tsc --noEmit",
+    "lint": "pnpm exec biome lint --write",
+    "format": "pnpm exec biome format --write",
+    "check": "pnpm run typecheck && pnpm exec biome check --write",
+    "check:ci": "pnpm run typecheck && pnpm exec biome check"
+  }
+}

package/dist/index.es.js

@@ -1,2 +0,0 @@
-import e,{memo as t,useRef as r,useEffect as n,useCallback as a}from"react";var o=function(){return o=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var i=function(e,t){void 0===t&&(t=1),"#"===e[0]&&(e=e.slice(1));var r=parseInt(e,16),n=r>>8&255,a=255&r;return"rgba(".concat(r>>16&255,", ").concat(n,", ").concat(a,", ").concat(t,")")},c=t((function(t){var c=t.amplitude,u=void 0===c?20:c,l=t.colors,p=void 0===l?["#436EDB"]:l,h=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(t,["amplitude","colors"]),f=r(u),d=r(null),s=r(u);n((function(){s.current=u}),[u]);var v=a((function(e,t,r,n,a){void 0===a&&(a=0),e.strokeStyle=n,e.beginPath();for(var o=0;o<e.canvas.width;o++){var i=Math.sin(Math.PI*(o/e.canvas.width)),c=Math.pow(i,6),u=t*Math.sin(r*o+a)*c;e.lineTo(o,e.canvas.height/2+u)}e.stroke()}),[]);return n((function(){var e,t=d.current,r=t.getContext("2d"),n=t.parentElement;n&&(t.width=n.clientWidth);var a=function(){var n,o,c=.0015*Date.now();f.current=(n=f.current,o=s.current,n+.1*(o-n));var u=f.current*(1+.05*Math.sin(c));r.clearRect(0,0,t.width,t.height);for(var l=function(e){var n=r.createLinearGradient(0,0,t.width,t.height),a=p.length>1?1/(p.length-1):0;p.forEach((function(t,r){n.addColorStop(a*r,i(t,e.alpha))})),v(r,e.amplitude,e.frequency,n,Date.now()*e.speed);for(var o=function(n){var a=e.amplitude-.1*n,o=e.frequency+25e-5*n,c=.6*e.alpha-.01*n,u=r.createLinearGradient(0,0,t.width,t.height),l=p.length>1?1/(p.length-1):0;p.forEach((function(e,t){u.addColorStop(l*t,i(e,c))})),v(r,a,o,u,Date.now()*e.speed+.015*n)},c=0;c<30;c++)o(c)},h=0,d=[{amplitude:u,frequency:.02,alpha:.6,speed:.001},{amplitude:.6*u,frequency:.03,alpha:.4,speed:.004},{amplitude:.3*u,frequency:.04,alpha:.2,speed:.007}];h<d.length;h++){l(d[h])}e=requestAnimationFrame(a)};return a(),function(){cancelAnimationFrame(e)}}),[p,v]),e.createElement("canvas",o({ref:d,width:"100%",height:"auto"},h))}));export{c as default};
-//# sourceMappingURL=index.es.js.map

package/dist/index.min.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r=function(e,t){void 0===t&&(t=1),"#"===e[0]&&(e=e.slice(1));var r=parseInt(e,16),n=r>>8&255,a=255&r;return"rgba(".concat(r>>16&255,", ").concat(n,", ").concat(a,", ").concat(t,")")},n=e.memo((function(n){var a=n.amplitude,o=void 0===a?20:a,c=n.colors,i=void 0===c?["#436EDB"]:c,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(n,["amplitude","colors"]),l=e.useRef(o),f=e.useRef(null),p=e.useRef(o);e.useEffect((function(){p.current=o}),[o]);var h=e.useCallback((function(e,t,r,n,a){void 0===a&&(a=0),e.strokeStyle=n,e.beginPath();for(var o=0;o<e.canvas.width;o++){var c=Math.sin(Math.PI*(o/e.canvas.width)),i=Math.pow(c,6),u=t*Math.sin(r*o+a)*i;e.lineTo(o,e.canvas.height/2+u)}e.stroke()}),[]);return e.useEffect((function(){var e,t=f.current,n=t.getContext("2d"),a=t.parentElement;a&&(t.width=a.clientWidth);var o=function(){var a,c,u=.0015*Date.now();l.current=(a=l.current,c=p.current,a+.1*(c-a));var f=l.current*(1+.05*Math.sin(u));n.clearRect(0,0,t.width,t.height);for(var s=function(e){var a=n.createLinearGradient(0,0,t.width,t.height),o=i.length>1?1/(i.length-1):0;i.forEach((function(t,n){a.addColorStop(o*n,r(t,e.alpha))})),h(n,e.amplitude,e.frequency,a,Date.now()*e.speed);for(var c=function(a){var o=e.amplitude-.1*a,c=e.frequency+25e-5*a,u=.6*e.alpha-.01*a,l=n.createLinearGradient(0,0,t.width,t.height),f=i.length>1?1/(i.length-1):0;i.forEach((function(e,t){l.addColorStop(f*t,r(e,u))})),h(n,o,c,l,Date.now()*e.speed+.015*a)},u=0;u<30;u++)c(u)},d=0,v=[{amplitude:f,frequency:.02,alpha:.6,speed:.001},{amplitude:.6*f,frequency:.03,alpha:.4,speed:.004},{amplitude:.3*f,frequency:.04,alpha:.2,speed:.007}];d<v.length;d++){s(v[d])}e=requestAnimationFrame(o)};return o(),function(){cancelAnimationFrame(e)}}),[i,h]),e.createElement("canvas",t({ref:f,width:"100%",height:"auto"},u))}));module.exports=n;
-//# sourceMappingURL=index.min.js.map