react-animated-waves 1.0.2 → 1.0.3

package/README.md

@@ -1,44 +1,30 @@
 <div align="center">
-<h2>React Animated Waves</h2>
+  
+## 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>
-<sup align="center" style="width: 80%; margin: auto; font-size: 0.1rem !important;">
-(Planning to create your own NPM library? Check out my <a href="https://github.com/agrawal-rohit/npm-library-template">NPM library template</a> to kickstart your library development with best practices)
-</sup>
-</div>
 
-<br /><br />
+[Installation](#installation) • [Demo](https://codesandbox.io/p/sandbox/react-animated-waves-example-6z9hlh) • [Usage](#usage) • [Props](#props) • [Contributing](#contributing) • [License](#license)
 
-![Aug-24-2024 22-55-33](https://github.com/user-attachments/assets/348b84bf-d2f8-406b-a162-e0a480c9e273)
+<br />
 
-A lightweight and customizable React component that creates stunning animated wave effects. Perfect for enhancing audio visualizations, adding dynamic loading states, or creating eye-catching UI elements in your React apps.
+![Aug-24-2024 22-55-33](https://cdn.rohit.build/github-gifs%3Areact-animated-waves.gif)
 
-## Table of Contents
+</div>
 
-1. [Installation](#installation)
-2. [Usage](#usage)
-3. [Props](#props)
-4. [Contributing](#contributing)
-5. [License](#license)
+A canvas-based component built with React for creating fluid animated waves _(ideally used in audio visualizations, voice UIs, progress loaders, etc.)_.
 
 ## Installation
 
-**React Animated Waves** can be installed using either npm or yarn:
-
-**Using npm:**
-
-```bash
-npm install --save react-animated-waves
-```
-
-**Using yarn:**
+The easiest way to get the latest version of `react-animated-waves` is to install it via npm, yarn or pnpm:
 
 ```bash
-yarn add react-animated-waves
+npm install react-animated-waves
 ```
 
 ## Usage
@@ -62,7 +48,7 @@ The `Waves` component accepts the following props:
 
 ## Contributing
 
-All contributions from the community are welcome. Please read the [contributing guide](CONTRIBUTING.md) for more information.
+Contributions are welcome. Please read the [contributing guide](CONTRIBUTING.md) for more information.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-waves",
-  "version": "1.0.2",
+  "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",
@@ -18,7 +18,6 @@
   "repository": "https://github.com/agrawal-rohit/react-animated-waves.git",
   "homepage": "https://github.com/agrawal-rohit/react-animated-waves.git",
   "license": "MIT",
-  "private": false,
   "scripts": {
     "cz": "git-cz",
     "test": "jest --coverage",
@@ -113,5 +112,6 @@
         "message": "chore(release): ${nextRelease.version} [skip ci]"
       }
     ]
-  }
+  },
+  "packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538"
 }

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAuBpE,KAAK,UAAU,GAAG,KAAK,CAAC,iBAAiB,CACvC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,iBAAiB,CAClB,GAAG;IACF,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;;AAiKF,wBAA2B"}

package/dist/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useRef } from \"react\";\n\n// Linear interpolation function\n// This function is used to smoothly transition between two values\nconst lerp = (a: number, b: number, t: number): number => {\n  return a + t * (b - a);\n};\n\n// Function to convert a hexadecimal color to RGBA\nconst hexToRgba = (hex: string, alpha: number = 1): string => {\n  if (hex[0] === \"#\") {\n    hex = hex.slice(1);\n  }\n\n  const bigint = parseInt(hex, 16);\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n};\n\n// Define the properties for the AnimatedWaveform component\ntype WavesProps = React.DetailedHTMLProps<\n  React.CanvasHTMLAttributes<HTMLCanvasElement>,\n  HTMLCanvasElement\n> & {\n  /** The colors for the waveform */\n  colors?: string[];\n  /** The amplitude of the waveform */\n  amplitude?: number;\n};\n\nconst Waves: React.FC<WavesProps> = ({\n  amplitude = 20,\n  colors = [\"#436EDB\"],\n  ...props\n}) => {\n  const amplitudeRef = useRef(amplitude);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const targetAmplitudeRef = useRef<number>(amplitude);\n\n  // Update the target amplitude whenever the amplitude prop changes\n  useEffect(() => {\n    targetAmplitudeRef.current = amplitude;\n  }, [amplitude]);\n\n  // Function to draw the waveform on the canvas\n  const drawWaveform = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      amplitude: number,\n      frequency: number,\n      color: string | CanvasGradient,\n      phase = 0\n    ) => {\n      ctx.strokeStyle = color;\n      ctx.beginPath();\n\n      // Draw the waveform\n      for (let i = 0; i < ctx.canvas.width; i++) {\n        // Compute the pinching effect\n        const sineWave = Math.sin(Math.PI * (i / ctx.canvas.width));\n        const pinch = Math.pow(sineWave, 6);\n\n        // Calculate the y position with sine function, pinch effect, and time-based phase shift\n        const y = amplitude * Math.sin(frequency * i + phase) * pinch;\n\n        ctx.lineTo(i, ctx.canvas.height / 2 + y);\n      }\n\n      ctx.stroke();\n    },\n    []\n  );\n\n  // Animate the waveform\n  useEffect(() => {\n    let animationFrameId: number;\n    const canvas = canvasRef.current as HTMLCanvasElement;\n    const ctx = canvas.getContext(\"2d\")!;\n    const parent = canvas.parentElement;\n    if (parent) canvas.width = parent.clientWidth;\n\n    const animate = () => {\n      const time = Date.now() * 0.0015; // Convert milliseconds to seconds and increase speed\n\n      amplitudeRef.current = lerp(\n        amplitudeRef.current,\n        targetAmplitudeRef.current,\n        0.1\n      );\n\n      // Create an oscillating effect with amplitude\n      const oscillatingAmplitude =\n        amplitudeRef.current * (1 + Math.sin(time) * 0.05);\n\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n      // Define primary waveforms with their respective amplitudes, frequencies, and colors\n      const primaryWaveforms = [\n        {\n          amplitude: oscillatingAmplitude,\n          frequency: 0.02,\n          alpha: 0.6,\n          speed: 0.001,\n        },\n        {\n          amplitude: oscillatingAmplitude * 0.6,\n          frequency: 0.03,\n          alpha: 0.4,\n          speed: 0.004,\n        },\n        {\n          amplitude: oscillatingAmplitude * 0.3,\n          frequency: 0.04,\n          alpha: 0.2,\n          speed: 0.007,\n        },\n      ];\n\n      // For each primary waveform, draw the waveform and its surrounding mesh\n      for (const primary of primaryWaveforms) {\n        const gradient = ctx.createLinearGradient(\n          0,\n          0,\n          canvas.width,\n          canvas.height\n        );\n        const stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n        colors.forEach((color, index) => {\n          gradient.addColorStop(\n            stopIncrement * index,\n            hexToRgba(color, primary.alpha)\n          );\n        });\n\n        drawWaveform(\n          ctx,\n          primary.amplitude,\n          primary.frequency,\n          gradient,\n          Date.now() * primary.speed\n        );\n\n        // Draw secondary waveforms around the primary waveform\n        for (let i = 0; i < 30; i++) {\n          const amp = primary.amplitude - i * 0.1;\n          const freq = primary.frequency + i * 0.00025;\n          const alpha = primary.alpha * 0.6 - i * 0.01;\n          const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height\n          );\n          const stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n          colors.forEach((color, index) => {\n            gradient.addColorStop(\n              stopIncrement * index,\n              hexToRgba(color, alpha)\n            );\n          });\n\n          drawWaveform(\n            ctx,\n            amp,\n            freq,\n            gradient,\n            Date.now() * primary.speed + i * 0.015\n          );\n        }\n      }\n\n      animationFrameId = requestAnimationFrame(animate);\n    };\n\n    animate();\n\n    // Clean up the animation frame when the component unmounts\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [colors, drawWaveform]);\n\n  // Render the canvas \n  return (\n    <canvas ref={canvasRef} width=\"100%\" height=\"auto\" {...props}></canvas>\n  );\n};\n\n// Export the memoized version of the component to avoid unnecessary re-renders\nexport default memo(Waves);\n"],"names":["hexToRgba","hex","alpha","slice","bigint","parseInt","g","b","concat","index","memo","_a","_b","amplitude","_c","colors","props","__rest","amplitudeRef","useRef","canvasRef","targetAmplitudeRef","useEffect","current","drawWaveform","useCallback","ctx","frequency","color","phase","strokeStyle","beginPath","i","canvas","width","sineWave","Math","sin","PI","pinch","pow","y","lineTo","height","stroke","animationFrameId","getContext","parent","parentElement","clientWidth","animate","a","time","Date","now","oscillatingAmplitude","clearRect","primary","gradient","createLinearGradient","stopIncrement","length","forEach","addColorStop","speed","amp","freq","gradient_1","stopIncrement_1","primaryWaveforms_1","_i","requestAnimationFrame","cancelAnimationFrame","React","createElement","__assign","ref"],"mappings":"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"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useRef } from \"react\";\n\n// Linear interpolation function\n// This function is used to smoothly transition between two values\nconst lerp = (a: number, b: number, t: number): number => {\n  return a + t * (b - a);\n};\n\n// Function to convert a hexadecimal color to RGBA\nconst hexToRgba = (hex: string, alpha: number = 1): string => {\n  if (hex[0] === \"#\") {\n    hex = hex.slice(1);\n  }\n\n  const bigint = parseInt(hex, 16);\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n};\n\n// Define the properties for the AnimatedWaveform component\ntype WavesProps = React.DetailedHTMLProps<\n  React.CanvasHTMLAttributes<HTMLCanvasElement>,\n  HTMLCanvasElement\n> & {\n  /** The colors for the waveform */\n  colors?: string[];\n  /** The amplitude of the waveform */\n  amplitude?: number;\n};\n\nconst Waves: React.FC<WavesProps> = ({\n  amplitude = 20,\n  colors = [\"#436EDB\"],\n  ...props\n}) => {\n  const amplitudeRef = useRef(amplitude);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const targetAmplitudeRef = useRef<number>(amplitude);\n\n  // Update the target amplitude whenever the amplitude prop changes\n  useEffect(() => {\n    targetAmplitudeRef.current = amplitude;\n  }, [amplitude]);\n\n  // Function to draw the waveform on the canvas\n  const drawWaveform = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      amplitude: number,\n      frequency: number,\n      color: string | CanvasGradient,\n      phase = 0\n    ) => {\n      ctx.strokeStyle = color;\n      ctx.beginPath();\n\n      // Draw the waveform\n      for (let i = 0; i < ctx.canvas.width; i++) {\n        // Compute the pinching effect\n        const sineWave = Math.sin(Math.PI * (i / ctx.canvas.width));\n        const pinch = Math.pow(sineWave, 6);\n\n        // Calculate the y position with sine function, pinch effect, and time-based phase shift\n        const y = amplitude * Math.sin(frequency * i + phase) * pinch;\n\n        ctx.lineTo(i, ctx.canvas.height / 2 + y);\n      }\n\n      ctx.stroke();\n    },\n    []\n  );\n\n  // Animate the waveform\n  useEffect(() => {\n    let animationFrameId: number;\n    const canvas = canvasRef.current as HTMLCanvasElement;\n    const ctx = canvas.getContext(\"2d\")!;\n    const parent = canvas.parentElement;\n    if (parent) canvas.width = parent.clientWidth;\n\n    const animate = () => {\n      const time = Date.now() * 0.0015; // Convert milliseconds to seconds and increase speed\n\n      amplitudeRef.current = lerp(\n        amplitudeRef.current,\n        targetAmplitudeRef.current,\n        0.1\n      );\n\n      // Create an oscillating effect with amplitude\n      const oscillatingAmplitude =\n        amplitudeRef.current * (1 + Math.sin(time) * 0.05);\n\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n      // Define primary waveforms with their respective amplitudes, frequencies, and colors\n      const primaryWaveforms = [\n        {\n          amplitude: oscillatingAmplitude,\n          frequency: 0.02,\n          alpha: 0.6,\n          speed: 0.001,\n        },\n        {\n          amplitude: oscillatingAmplitude * 0.6,\n          frequency: 0.03,\n          alpha: 0.4,\n          speed: 0.004,\n        },\n        {\n          amplitude: oscillatingAmplitude * 0.3,\n          frequency: 0.04,\n          alpha: 0.2,\n          speed: 0.007,\n        },\n      ];\n\n      // For each primary waveform, draw the waveform and its surrounding mesh\n      for (const primary of primaryWaveforms) {\n        const gradient = ctx.createLinearGradient(\n          0,\n          0,\n          canvas.width,\n          canvas.height\n        );\n        const stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n        colors.forEach((color, index) => {\n          gradient.addColorStop(\n            stopIncrement * index,\n            hexToRgba(color, primary.alpha)\n          );\n        });\n\n        drawWaveform(\n          ctx,\n          primary.amplitude,\n          primary.frequency,\n          gradient,\n          Date.now() * primary.speed\n        );\n\n        // Draw secondary waveforms around the primary waveform\n        for (let i = 0; i < 30; i++) {\n          const amp = primary.amplitude - i * 0.1;\n          const freq = primary.frequency + i * 0.00025;\n          const alpha = primary.alpha * 0.6 - i * 0.01;\n          const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height\n          );\n          const stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n          colors.forEach((color, index) => {\n            gradient.addColorStop(\n              stopIncrement * index,\n              hexToRgba(color, alpha)\n            );\n          });\n\n          drawWaveform(\n            ctx,\n            amp,\n            freq,\n            gradient,\n            Date.now() * primary.speed + i * 0.015\n          );\n        }\n      }\n\n      animationFrameId = requestAnimationFrame(animate);\n    };\n\n    animate();\n\n    // Clean up the animation frame when the component unmounts\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [colors, drawWaveform]);\n\n  // Render the canvas \n  return (\n    <canvas ref={canvasRef} width=\"100%\" height=\"auto\" {...props}></canvas>\n  );\n};\n\n// Export the memoized version of the component to avoid unnecessary re-renders\nexport default memo(Waves);\n"],"names":["useRef","useEffect","useCallback","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA,IAAM,IAAI,GAAG,UAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAA;IAC3C,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACzB,CAAC,CAAC;AAEF;AACA,IAAM,SAAS,GAAG,UAAC,GAAW,EAAE,KAAiB,EAAA;AAAjB,IAAA,IAAA,KAAA,KAAA,KAAA,CAAA,EAAA,EAAA,KAAiB,GAAA,CAAA,CAAA,EAAA;AAC/C,IAAA,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAClB,QAAA,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KACpB;IAED,IAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACjC,IAAM,CAAC,GAAG,CAAC,MAAM,IAAI,EAAE,IAAI,GAAG,CAAC;IAC/B,IAAM,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC;AAC9B,IAAA,IAAM,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC;IAEvB,OAAO,OAAA,CAAA,MAAA,CAAQ,CAAC,EAAK,IAAA,CAAA,CAAA,MAAA,CAAA,CAAC,eAAK,CAAC,EAAA,IAAA,CAAA,CAAA,MAAA,CAAK,KAAK,EAAA,GAAA,CAAG,CAAC;AAC5C,CAAC,CAAC;AAaF,IAAM,KAAK,GAAyB,UAAC,EAIpC,EAAA;AAHC,IAAA,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,GAAA,EAAA,EACd,EAAoB,GAAA,EAAA,CAAA,MAAA,EAApB,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,CAAC,SAAS,CAAC,GAAA,EAAA,EACjB,KAAK,GAAA,MAAA,CAAA,EAAA,EAH2B,uBAIpC,CADS,CAAA;AAER,IAAA,IAAM,YAAY,GAAGA,YAAM,CAAC,SAAS,CAAC,CAAC;AACvC,IAAA,IAAM,SAAS,GAAGA,YAAM,CAAoB,IAAI,CAAC,CAAC;AAClD,IAAA,IAAM,kBAAkB,GAAGA,YAAM,CAAS,SAAS,CAAC,CAAC;;AAGrD,IAAAC,eAAS,CAAC,YAAA;AACR,QAAA,kBAAkB,CAAC,OAAO,GAAG,SAAS,CAAC;AACzC,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;;AAGhB,IAAA,IAAM,YAAY,GAAGC,iBAAW,CAC9B,UACE,GAA6B,EAC7B,SAAiB,EACjB,SAAiB,EACjB,KAA8B,EAC9B,KAAS,EAAA;AAAT,QAAA,IAAA,KAAA,KAAA,KAAA,CAAA,EAAA,EAAA,KAAS,GAAA,CAAA,CAAA,EAAA;AAET,QAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;QACxB,GAAG,CAAC,SAAS,EAAE,CAAC;;AAGhB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;;YAEzC,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC5D,IAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;;AAGpC,YAAA,IAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;AAE9D,YAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SAC1C;QAED,GAAG,CAAC,MAAM,EAAE,CAAC;KACd,EACD,EAAE,CACH,CAAC;;AAGF,IAAAD,eAAS,CAAC,YAAA;AACR,QAAA,IAAI,gBAAwB,CAAC;AAC7B,QAAA,IAAM,MAAM,GAAG,SAAS,CAAC,OAA4B,CAAC;QACtD,IAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;AACrC,QAAA,IAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;AACpC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;AAE9C,QAAA,IAAM,OAAO,GAAG,YAAA;YACd,IAAM,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;AAEjC,YAAA,YAAY,CAAC,OAAO,GAAG,IAAI,CACzB,YAAY,CAAC,OAAO,EACpB,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CACJ,CAAC;;AAGF,YAAA,IAAM,oBAAoB,GACxB,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAErD,YAAA,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;;AAGjD,YAAA,IAAM,gBAAgB,GAAG;AACvB,gBAAA;AACE,oBAAA,SAAS,EAAE,oBAAoB;AAC/B,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,KAAK,EAAE,GAAG;AACV,oBAAA,KAAK,EAAE,KAAK;AACb,iBAAA;AACD,gBAAA;oBACE,SAAS,EAAE,oBAAoB,GAAG,GAAG;AACrC,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,KAAK,EAAE,GAAG;AACV,oBAAA,KAAK,EAAE,KAAK;AACb,iBAAA;AACD,gBAAA;oBACE,SAAS,EAAE,oBAAoB,GAAG,GAAG;AACrC,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,KAAK,EAAE,GAAG;AACV,oBAAA,KAAK,EAAE,KAAK;AACb,iBAAA;aACF,CAAC;oCAGS,OAAO,EAAA;AAChB,gBAAA,IAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,CAAC,EACD,CAAC,EACD,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,MAAM,CACd,CAAC;gBACF,IAAM,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AACtE,gBAAA,MAAM,CAAC,OAAO,CAAC,UAAC,KAAK,EAAE,KAAK,EAAA;AAC1B,oBAAA,QAAQ,CAAC,YAAY,CACnB,aAAa,GAAG,KAAK,EACrB,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAChC,CAAC;AACJ,iBAAC,CAAC,CAAC;gBAEH,YAAY,CACV,GAAG,EACH,OAAO,CAAC,SAAS,EACjB,OAAO,CAAC,SAAS,EACjB,QAAQ,EACR,IAAI,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,CAC3B,CAAC;wCAGO,CAAC,EAAA;oBACR,IAAM,GAAG,GAAG,OAAO,CAAC,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC;oBACxC,IAAM,IAAI,GAAG,OAAO,CAAC,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC;oBAC7C,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;AAC7C,oBAAA,IAAM,UAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,CAAC,EACD,CAAC,EACD,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,MAAM,CACd,CAAC;oBACF,IAAM,eAAa,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AACtE,oBAAA,MAAM,CAAC,OAAO,CAAC,UAAC,KAAK,EAAE,KAAK,EAAA;AAC1B,wBAAA,UAAQ,CAAC,YAAY,CACnB,eAAa,GAAG,KAAK,EACrB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CACxB,CAAC;AACJ,qBAAC,CAAC,CAAC;oBAEH,YAAY,CACV,GAAG,EACH,GAAG,EACH,IAAI,EACJ,UAAQ,EACR,IAAI,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CACvC,CAAC;;;gBAxBJ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAA;4BAAlB,CAAC,CAAA,CAAA;AAyBT,iBAAA;;;AAjDH,YAAA,KAAsB,UAAgB,EAAhB,kBAAA,GAAA,gBAAgB,EAAhB,EAAA,GAAA,kBAAA,CAAA,MAAgB,EAAhB,EAAgB,EAAA,EAAA;AAAjC,gBAAA,IAAM,OAAO,GAAA,kBAAA,CAAA,EAAA,CAAA,CAAA;wBAAP,OAAO,CAAA,CAAA;AAkDjB,aAAA;AAED,YAAA,gBAAgB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AACpD,SAAC,CAAC;AAEF,QAAA,OAAO,EAAE,CAAC;;QAGV,OAAO,YAAA;YACL,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;AACzC,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;;AAG3B,IAAA,QACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,IAAK,KAAK,CAAA,CAAW,EACvE;AACJ,CAAC,CAAC;AAEF;AACA,YAAeE,UAAI,CAAC,KAAK,CAAC;;;;"}

package/dist/index.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.min.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useRef } from \"react\";\n\n// Linear interpolation function\n// This function is used to smoothly transition between two values\nconst lerp = (a: number, b: number, t: number): number => {\n  return a + t * (b - a);\n};\n\n// Function to convert a hexadecimal color to RGBA\nconst hexToRgba = (hex: string, alpha: number = 1): string => {\n  if (hex[0] === \"#\") {\n    hex = hex.slice(1);\n  }\n\n  const bigint = parseInt(hex, 16);\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n};\n\n// Define the properties for the AnimatedWaveform component\ntype WavesProps = React.DetailedHTMLProps<\n  React.CanvasHTMLAttributes<HTMLCanvasElement>,\n  HTMLCanvasElement\n> & {\n  /** The colors for the waveform */\n  colors?: string[];\n  /** The amplitude of the waveform */\n  amplitude?: number;\n};\n\nconst Waves: React.FC<WavesProps> = ({\n  amplitude = 20,\n  colors = [\"#436EDB\"],\n  ...props\n}) => {\n  const amplitudeRef = useRef(amplitude);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const targetAmplitudeRef = useRef<number>(amplitude);\n\n  // Update the target amplitude whenever the amplitude prop changes\n  useEffect(() => {\n    targetAmplitudeRef.current = amplitude;\n  }, [amplitude]);\n\n  // Function to draw the waveform on the canvas\n  const drawWaveform = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      amplitude: number,\n      frequency: number,\n      color: string | CanvasGradient,\n      phase = 0\n    ) => {\n      ctx.strokeStyle = color;\n      ctx.beginPath();\n\n      // Draw the waveform\n      for (let i = 0; i < ctx.canvas.width; i++) {\n        // Compute the pinching effect\n        const sineWave = Math.sin(Math.PI * (i / ctx.canvas.width));\n        const pinch = Math.pow(sineWave, 6);\n\n        // Calculate the y position with sine function, pinch effect, and time-based phase shift\n        const y = amplitude * Math.sin(frequency * i + phase) * pinch;\n\n        ctx.lineTo(i, ctx.canvas.height / 2 + y);\n      }\n\n      ctx.stroke();\n    },\n    []\n  );\n\n  // Animate the waveform\n  useEffect(() => {\n    let animationFrameId: number;\n    const canvas = canvasRef.current as HTMLCanvasElement;\n    const ctx = canvas.getContext(\"2d\")!;\n    const parent = canvas.parentElement;\n    if (parent) canvas.width = parent.clientWidth;\n\n    const animate = () => {\n      const time = Date.now() * 0.0015; // Convert milliseconds to seconds and increase speed\n\n      amplitudeRef.current = lerp(\n        amplitudeRef.current,\n        targetAmplitudeRef.current,\n        0.1\n      );\n\n      // Create an oscillating effect with amplitude\n      const oscillatingAmplitude =\n        amplitudeRef.current * (1 + Math.sin(time) * 0.05);\n\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n      // Define primary waveforms with their respective amplitudes, frequencies, and colors\n      const primaryWaveforms = [\n        {\n          amplitude: oscillatingAmplitude,\n          frequency: 0.02,\n          alpha: 0.6,\n          speed: 0.001,\n        },\n        {\n          amplitude: oscillatingAmplitude * 0.6,\n          frequency: 0.03,\n          alpha: 0.4,\n          speed: 0.004,\n        },\n        {\n          amplitude: oscillatingAmplitude * 0.3,\n          frequency: 0.04,\n          alpha: 0.2,\n          speed: 0.007,\n        },\n      ];\n\n      // For each primary waveform, draw the waveform and its surrounding mesh\n      for (const primary of primaryWaveforms) {\n        const gradient = ctx.createLinearGradient(\n          0,\n          0,\n          canvas.width,\n          canvas.height\n        );\n        const stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n        colors.forEach((color, index) => {\n          gradient.addColorStop(\n            stopIncrement * index,\n            hexToRgba(color, primary.alpha)\n          );\n        });\n\n        drawWaveform(\n          ctx,\n          primary.amplitude,\n          primary.frequency,\n          gradient,\n          Date.now() * primary.speed\n        );\n\n        // Draw secondary waveforms around the primary waveform\n        for (let i = 0; i < 30; i++) {\n          const amp = primary.amplitude - i * 0.1;\n          const freq = primary.frequency + i * 0.00025;\n          const alpha = primary.alpha * 0.6 - i * 0.01;\n          const gradient = ctx.createLinearGradient(\n            0,\n            0,\n            canvas.width,\n            canvas.height\n          );\n          const stopIncrement = colors.length > 1 ? 1 / (colors.length - 1) : 0;\n          colors.forEach((color, index) => {\n            gradient.addColorStop(\n              stopIncrement * index,\n              hexToRgba(color, alpha)\n            );\n          });\n\n          drawWaveform(\n            ctx,\n            amp,\n            freq,\n            gradient,\n            Date.now() * primary.speed + i * 0.015\n          );\n        }\n      }\n\n      animationFrameId = requestAnimationFrame(animate);\n    };\n\n    animate();\n\n    // Clean up the animation frame when the component unmounts\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [colors, drawWaveform]);\n\n  // Render the canvas \n  return (\n    <canvas ref={canvasRef} width=\"100%\" height=\"auto\" {...props}></canvas>\n  );\n};\n\n// Export the memoized version of the component to avoid unnecessary re-renders\nexport default memo(Waves);\n"],"names":["hexToRgba","hex","alpha","slice","bigint","parseInt","g","b","concat","memo","_a","_b","amplitude","_c","colors","props","__rest","amplitudeRef","useRef","canvasRef","targetAmplitudeRef","useEffect","current","drawWaveform","useCallback","ctx","frequency","color","phase","strokeStyle","beginPath","i","canvas","width","sineWave","Math","sin","PI","pinch","pow","y","lineTo","height","stroke","animationFrameId","getContext","parent","parentElement","clientWidth","animate","a","time","Date","now","oscillatingAmplitude","clearRect","primary","gradient","createLinearGradient","stopIncrement","length","forEach","index","addColorStop","speed","amp","freq","gradient_1","stopIncrement_1","primaryWaveforms_1","_i","requestAnimationFrame","cancelAnimationFrame","React","createElement","__assign","ref"],"mappings":"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"}