react-animated-waves 1.0.8 → 1.0.10
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 +2 -2
- package/dist/index.d.ts +1 -3
- package/dist/index.js.map +1 -1
- package/package.json +19 -18
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
6
|
<p align="center" style="width: 80%; margin: auto">
|
|
7
|
-
<a href="https://github.com/agrawal-rohit/
|
|
7
|
+
<a href="https://github.com/agrawal-rohit/yehle"><img alt="Made with Yehle" src="https://img.shields.io/badge/made_with-yehle-FEA624"></a>
|
|
8
8
|
<img alt="Status" src="https://img.shields.io/github/actions/workflow/status/agrawal-rohit/react-animated-waves/ci.yml">
|
|
9
9
|
<img alt="Sonar Coverage" src="https://img.shields.io/sonar/coverage/agrawal-rohit_react-animated-waves?server=https%3A%2F%2Fsonarcloud.io">
|
|
10
10
|
<img alt="Downloads" src="https://img.shields.io/npm/dt/react-animated-waves">
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
<br />
|
|
17
17
|
|
|
18
|
-
<img src="https://cdn.rohit.
|
|
18
|
+
<img src="https://cdn.rohit-agrawal.com/work/react-animated-waves/github-readme-preview.gif" alt="Preview" style="width: 80%; margin: auto" />
|
|
19
19
|
|
|
20
20
|
</div>
|
|
21
21
|
|
package/dist/index.d.ts
CHANGED
|
@@ -2,9 +2,7 @@ import * as react0 from "react";
|
|
|
2
2
|
|
|
3
3
|
//#region src/waves.d.ts
|
|
4
4
|
type WavesProps = React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement> & {
|
|
5
|
-
/** The colors for the waveform */
|
|
6
|
-
colors?: string[];
|
|
7
|
-
/** The amplitude of the waveform */
|
|
5
|
+
/** The colors for the waveform */colors?: string[]; /** The amplitude of the waveform */
|
|
8
6
|
amplitude?: number;
|
|
9
7
|
};
|
|
10
8
|
declare const Waves: react0.NamedExoticComponent<WavesProps>;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"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\t// Convert milliseconds to seconds and increase speed\n\t\t\t\tconst time = Date.now() * 0.0015;\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\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
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-animated-waves",
|
|
3
|
-
"
|
|
3
|
+
"description": "Canvas-based animated waves for ReactJS",
|
|
4
|
+
"version": "1.0.10",
|
|
4
5
|
"type": "module",
|
|
5
6
|
"private": false,
|
|
6
7
|
"license": "MIT",
|
|
@@ -15,36 +16,36 @@
|
|
|
15
16
|
"module": "./dist/index.js",
|
|
16
17
|
"types": "./dist/index.d.ts",
|
|
17
18
|
"dependencies": {
|
|
18
|
-
"@tailwindcss/vite": "^4.1.
|
|
19
|
-
"tailwindcss": "^4.1.
|
|
19
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
20
|
+
"tailwindcss": "^4.1.18"
|
|
20
21
|
},
|
|
21
22
|
"peerDependencies": {
|
|
22
23
|
"react": "^19.1.0",
|
|
23
24
|
"react-dom": "^19.1.0"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
|
-
"@biomejs/biome": "2.3.
|
|
27
|
-
"@commitlint/cli": "^20.
|
|
28
|
-
"@commitlint/config-conventional": "^20.
|
|
27
|
+
"@biomejs/biome": "2.3.13",
|
|
28
|
+
"@commitlint/cli": "^20.4.0",
|
|
29
|
+
"@commitlint/config-conventional": "^20.4.0",
|
|
29
30
|
"@fontsource/geist-sans": "^5.2.5",
|
|
30
|
-
"@stryker-mutator/core": "^9.
|
|
31
|
-
"@stryker-mutator/typescript-checker": "^9.
|
|
32
|
-
"@stryker-mutator/vitest-runner": "^9.
|
|
31
|
+
"@stryker-mutator/core": "^9.5.0",
|
|
32
|
+
"@stryker-mutator/typescript-checker": "^9.5.0",
|
|
33
|
+
"@stryker-mutator/vitest-runner": "^9.5.0",
|
|
33
34
|
"@testing-library/jest-dom": "^6.6.3",
|
|
34
|
-
"@testing-library/react": "^16.3.
|
|
35
|
-
"@types/node": "^25.0
|
|
36
|
-
"@types/react": "^19.
|
|
35
|
+
"@testing-library/react": "^16.3.2",
|
|
36
|
+
"@types/node": "^25.2.0",
|
|
37
|
+
"@types/react": "^19.2.10",
|
|
37
38
|
"@types/react-dom": "^19.1.4",
|
|
38
39
|
"@vitejs/plugin-react": "^5.1.2",
|
|
39
|
-
"@vitest/coverage-v8": "4.0.
|
|
40
|
-
"git-cliff": "^2.
|
|
41
|
-
"happy-dom": "^20.0
|
|
40
|
+
"@vitest/coverage-v8": "4.0.18",
|
|
41
|
+
"git-cliff": "^2.12.0",
|
|
42
|
+
"happy-dom": "^20.4.0",
|
|
42
43
|
"husky": "^9.1.7",
|
|
43
44
|
"lint-staged": "^16.1.6",
|
|
44
|
-
"tsdown": "^0.
|
|
45
|
+
"tsdown": "^0.20.1",
|
|
45
46
|
"typescript": "^5.9.2",
|
|
46
|
-
"vite": "^7.3.
|
|
47
|
-
"vitest": "^4.0.
|
|
47
|
+
"vite": "^7.3.1",
|
|
48
|
+
"vitest": "^4.0.18"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "tsdown",
|