react-animated-waves 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -6
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h2>React Animated Waves</h2>
|
|
3
|
+
<p align="center" style="width: 80%; margin: auto">
|
|
4
4
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/agrawal-rohit/react-animated-waves/Publish.yml">
|
|
5
5
|
<img alt="Codacy coverage" src="https://img.shields.io/codacy/coverage/09220ab3d193472ba76d1ad50f11ee51">
|
|
6
6
|
<img alt="npm" src="https://img.shields.io/npm/dw/react-animated-waves">
|
|
7
7
|
<img alt="Licence" src="https://img.shields.io/github/license/agrawal-rohit/react-animated-waves">
|
|
8
|
+
</p>
|
|
9
|
+
<sup align="center" style="width: 80%; margin: auto; font-size: 0.1rem !important;">
|
|
10
|
+
(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)
|
|
11
|
+
</sup>
|
|
8
12
|
</div>
|
|
9
13
|
|
|
10
|
-
<br />
|
|
14
|
+
<br /><br />
|
|
15
|
+
|
|
16
|
+
|
|
11
17
|
|
|
12
|
-
|
|
18
|
+
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.
|
|
13
19
|
|
|
14
20
|
## Table of Contents
|
|
15
21
|
|
|
@@ -37,7 +43,7 @@ yarn add react-animated-waves
|
|
|
37
43
|
|
|
38
44
|
## Usage
|
|
39
45
|
|
|
40
|
-
|
|
46
|
+
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).
|
|
41
47
|
|
|
42
48
|
```jsx
|
|
43
49
|
import Waves from "react-animated-waves";
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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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"}
|
|
1
|
+
{"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
CHANGED
|
@@ -160,7 +160,7 @@ var Waves = function (_a) {
|
|
|
160
160
|
cancelAnimationFrame(animationFrameId);
|
|
161
161
|
};
|
|
162
162
|
}, [colors, drawWaveform]);
|
|
163
|
-
// Render the canvas
|
|
163
|
+
// Render the canvas
|
|
164
164
|
return (React.createElement("canvas", __assign({ ref: canvasRef, width: "100%", height: "auto" }, props)));
|
|
165
165
|
};
|
|
166
166
|
// Export the memoized version of the component to avoid unnecessary re-renders
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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":"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"}
|
|
1
|
+
{"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":"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"}
|
package/dist/index.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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":"wSAIA,IAKMA,EAAY,SAACC,EAAaC,QAAA,IAAAA,IAAAA,EAAiB,GAChC,MAAXD,EAAI,KACNA,EAAMA,EAAIE,MAAM,IAGlB,IAAMC,EAASC,SAASJ,EAAK,IAEvBK,EAAKF,GAAU,EAAK,IACpBG,EAAa,IAATH,EAEV,MAAO,QAAAI,OAJIJ,GAAU,GAAM,IAIN,MAAAI,OAAAF,eAAMC,EAAC,MAAAC,OAAKN,EAAK,IACxC,EA4KeO,EAAAA,EAAAA,MA/JqB,SAACC,GACnC,IAAAC,cAAAC,aAAY,GAAED,EACdE,EAAoBH,EAAAI,OAApBA,OAAS,IAAAD,EAAA,CAAC,WAAUA,EACjBE,2UAAKC,CAAAN,EAH2B,wBAK7BO,EAAeC,SAAON,GACtBO,EAAYD,SAA0B,MACtCE,EAAqBF,SAAeN,GAG1CS,EAAAA,WAAU,WACRD,EAAmBE,QAAUV,CAC/B,GAAG,CAACA,IAGJ,IAAMW,EAAeC,EAAAA,aACnB,SACEC,EACAb,EACAc,EACAC,EACAC,QAAA,IAAAA,IAAAA,EAAS,GAETH,EAAII,YAAcF,EAClBF,EAAIK,YAGJ,IAAK,IAAIC,EAAI,EAAGA,EAAIN,EAAIO,OAAOC,MAAOF,IAAK,CAEzC,IAAMG,EAAWC,KAAKC,IAAID,KAAKE,IAAMN,EAAIN,EAAIO,OAAOC,QAC9CK,EAAQH,KAAKI,IAAIL,EAAU,GAG3BM,EAAI5B,EAAYuB,KAAKC,IAAIV,EAAYK,EAAIH,GAASU,EAExDb,EAAIgB,OAAOV,EAAGN,EAAIO,OAAOU,OAAS,EAAIF,EACvC,CAEDf,EAAIkB,QACL,GACD,IAiHF,OA7GAtB,EAAAA,WAAU,WACR,IAAIuB,EACEZ,EAASb,EAAUG,QACnBG,EAAMO,EAAOa,WAAW,MACxBC,EAASd,EAAOe,cAClBD,IAAQd,EAAOC,MAAQa,EAAOE,aAElC,IAAMC,EAAU,WACd,IAjFQC,EAAW3C,EAiFb4C,EAAoB,MAAbC,KAAKC,MAElBpC,EAAaK,SAnFL4B,EAoFNjC,EAAaK,QApFIf,EAqFjBa,EAAmBE,QApFlB4B,EAqFD,IArFU3C,EAAI2C,IAyFhB,IAAMI,EACJrC,EAAaK,SAAW,EAAqB,IAAjBa,KAAKC,IAAIe,IAEvC1B,EAAI8B,UAAU,EAAG,EAAGvB,EAAOC,MAAOD,EAAOU,QAyBzC,IAtBA,eAsBWc,GACT,IAAMC,EAAWhC,EAAIiC,qBACnB,EACA,EACA1B,EAAOC,MACPD,EAAOU,QAEHiB,EAAgB7C,EAAO8C,OAAS,EAAI,GAAK9C,EAAO8C,OAAS,GAAK,EACpE9C,EAAO+C,SAAQ,SAAClC,EAAOmC,GACrBL,EAASM,aACPJ,EAAgBG,EAChB9D,EAAU2B,EAAO6B,EAAQtD,OAE7B,IAEAqB,EACEE,EACA+B,EAAQ5C,UACR4C,EAAQ9B,UACR+B,EACAL,KAAKC,MAAQG,EAAQQ,OAIvB,mBAASjC,GACP,IAAMkC,EAAMT,EAAQ5C,UAAgB,GAAJmB,EAC1BmC,EAAOV,EAAQ9B,UAAgB,MAAJK,EAC3B7B,EAAwB,GAAhBsD,EAAQtD,MAAkB,IAAJ6B,EAC9BoC,EAAW1C,EAAIiC,qBACnB,EACA,EACA1B,EAAOC,MACPD,EAAOU,QAEH0B,EAAgBtD,EAAO8C,OAAS,EAAI,GAAK9C,EAAO8C,OAAS,GAAK,EACpE9C,EAAO+C,SAAQ,SAAClC,EAAOmC,GACrBK,EAASJ,aACPK,EAAgBN,EAChB9D,EAAU2B,EAAOzB,GAErB,IAEAqB,EACEE,EACAwC,EACAC,EACAC,EACAf,KAAKC,MAAQG,EAAQQ,MAAY,KAAJjC,IAvBxBA,EAAI,EAAGA,EAAI,GAAIA,MAAfA,QAxBWsC,EAtBG,CACvB,CACEzD,UAAW0C,EACX5B,UAAW,IACXxB,MAAO,GACP8D,MAAO,MAET,CACEpD,UAAkC,GAAvB0C,EACX5B,UAAW,IACXxB,MAAO,GACP8D,MAAO,MAET,CACEpD,UAAkC,GAAvB0C,EACX5B,UAAW,IACXxB,MAAO,GACP8D,MAAO,OAKWM,EAAAD,EAAAT,OAAAU,IAAgB,GAApBD,EAAAC,GAkDjB,CAED1B,EAAmB2B,sBAAsBtB,EAC3C,EAKA,OAHAA,IAGO,WACLuB,qBAAqB5B,EACvB,CACF,GAAG,CAAC9B,EAAQS,IAIVkD,EAAQC,cAAA,SAAAC,EAAA,CAAAC,IAAKzD,EAAWc,MAAM,OAAOS,OAAO,QAAW3B,GAE3D"}
|
|
1
|
+
{"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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"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-animated-waves",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A React component for creating beautiful audio visualizations or UI loading states using animated waves",
|
|
5
5
|
"main": "dist/index.min.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"reactjs",
|
|
10
|
+
"audio-visualization",
|
|
11
|
+
"loader-animation",
|
|
12
|
+
"animated-wave"
|
|
13
|
+
],
|
|
8
14
|
"files": [
|
|
9
15
|
"dist"
|
|
10
16
|
],
|