@raex-ui/particle-scatter 0.1.0

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +9 -0
  2. package/dist/index.d.ts +9 -0
  3. package/dist/index.js +177 -0
  4. package/dist/index.mjs +151 -0
  5. package/package.json +33 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ interface Props {
4
+ value: number;
5
+ size: number;
6
+ }
7
+ declare function ParticleScatter({ value, size }: Props): react_jsx_runtime.JSX.Element;
8
+
9
+ export { ParticleScatter };
package/dist/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ interface Props {
4
+ value: number;
5
+ size: number;
6
+ }
7
+ declare function ParticleScatter({ value, size }: Props): react_jsx_runtime.JSX.Element;
8
+
9
+ export { ParticleScatter };
package/dist/index.js ADDED
@@ -0,0 +1,177 @@
1
+ "use client";
2
+ "use strict";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/index.ts
22
+ var index_exports = {};
23
+ __export(index_exports, {
24
+ ParticleScatter: () => ParticleScatter
25
+ });
26
+ module.exports = __toCommonJS(index_exports);
27
+
28
+ // src/particle-scatter.tsx
29
+ var import_react = require("react");
30
+ var import_framer_motion = require("framer-motion");
31
+
32
+ // src/digit-paths.ts
33
+ var DIGIT_MATRIX = {
34
+ 0: [
35
+ [0, 1, 1, 1, 0],
36
+ [1, 0, 0, 0, 1],
37
+ [1, 0, 0, 1, 1],
38
+ [1, 0, 1, 0, 1],
39
+ [1, 1, 0, 0, 1],
40
+ [1, 0, 0, 0, 1],
41
+ [0, 1, 1, 1, 0]
42
+ ],
43
+ 1: [
44
+ [0, 0, 1, 0, 0],
45
+ [0, 1, 1, 0, 0],
46
+ [1, 0, 1, 0, 0],
47
+ [0, 0, 1, 0, 0],
48
+ [0, 0, 1, 0, 0],
49
+ [0, 0, 1, 0, 0],
50
+ [1, 1, 1, 1, 1]
51
+ ],
52
+ 2: [
53
+ [0, 1, 1, 1, 0],
54
+ [1, 0, 0, 0, 1],
55
+ [0, 0, 0, 0, 1],
56
+ [0, 0, 1, 1, 0],
57
+ [0, 1, 0, 0, 0],
58
+ [1, 0, 0, 0, 0],
59
+ [1, 1, 1, 1, 1]
60
+ ],
61
+ 3: [
62
+ [0, 1, 1, 1, 0],
63
+ [1, 0, 0, 0, 1],
64
+ [0, 0, 0, 0, 1],
65
+ [0, 0, 1, 1, 0],
66
+ [0, 0, 0, 0, 1],
67
+ [1, 0, 0, 0, 1],
68
+ [0, 1, 1, 1, 0]
69
+ ],
70
+ 4: [
71
+ [0, 0, 0, 1, 0],
72
+ [0, 0, 1, 1, 0],
73
+ [0, 1, 0, 1, 0],
74
+ [1, 0, 0, 1, 0],
75
+ [1, 1, 1, 1, 1],
76
+ [0, 0, 0, 1, 0],
77
+ [0, 0, 0, 1, 0]
78
+ ],
79
+ 5: [
80
+ [1, 1, 1, 1, 1],
81
+ [1, 0, 0, 0, 0],
82
+ [1, 1, 1, 1, 0],
83
+ [0, 0, 0, 0, 1],
84
+ [0, 0, 0, 0, 1],
85
+ [1, 0, 0, 0, 1],
86
+ [0, 1, 1, 1, 0]
87
+ ],
88
+ 6: [
89
+ [0, 1, 1, 1, 0],
90
+ [1, 0, 0, 0, 0],
91
+ [1, 0, 0, 0, 0],
92
+ [1, 1, 1, 1, 0],
93
+ [1, 0, 0, 0, 1],
94
+ [1, 0, 0, 0, 1],
95
+ [0, 1, 1, 1, 0]
96
+ ],
97
+ 7: [
98
+ [1, 1, 1, 1, 1],
99
+ [0, 0, 0, 0, 1],
100
+ [0, 0, 0, 1, 0],
101
+ [0, 0, 1, 0, 0],
102
+ [0, 0, 1, 0, 0],
103
+ [0, 0, 1, 0, 0],
104
+ [0, 0, 1, 0, 0]
105
+ ],
106
+ 8: [
107
+ [0, 1, 1, 1, 0],
108
+ [1, 0, 0, 0, 1],
109
+ [1, 0, 0, 0, 1],
110
+ [0, 1, 1, 1, 0],
111
+ [1, 0, 0, 0, 1],
112
+ [1, 0, 0, 0, 1],
113
+ [0, 1, 1, 1, 0]
114
+ ],
115
+ 9: [
116
+ [0, 1, 1, 1, 0],
117
+ [1, 0, 0, 0, 1],
118
+ [1, 0, 0, 0, 1],
119
+ [0, 1, 1, 1, 1],
120
+ [0, 0, 0, 0, 1],
121
+ [0, 0, 0, 0, 1],
122
+ [0, 1, 1, 1, 0]
123
+ ]
124
+ };
125
+
126
+ // src/particle-scatter.tsx
127
+ var import_jsx_runtime = require("react/jsx-runtime");
128
+ var ROWS = 7;
129
+ var COLS = 5;
130
+ function getTargets(digit, cellW, cellH) {
131
+ const matrix = DIGIT_MATRIX[digit];
132
+ const targets = [];
133
+ for (let r = 0; r < ROWS; r++) {
134
+ for (let c = 0; c < COLS; c++) {
135
+ targets.push({
136
+ x: c * cellW + cellW / 2,
137
+ y: r * cellH + cellH / 2,
138
+ active: matrix[r][c] === 1
139
+ });
140
+ }
141
+ }
142
+ return targets;
143
+ }
144
+ function ParticleScatter({ value, size }) {
145
+ const width = size;
146
+ const height = size * 1.5;
147
+ const cellW = width / COLS;
148
+ const cellH = height / ROWS;
149
+ const dotRadius = Math.min(cellW, cellH) * 0.3;
150
+ const targets = (0, import_react.useMemo)(() => getTargets(value, cellW, cellH), [value, cellW, cellH]);
151
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width, height, viewBox: `0 0 ${width} ${height}`, children: targets.map((target, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
152
+ import_framer_motion.motion.circle,
153
+ {
154
+ r: dotRadius,
155
+ fill: "#a3e635",
156
+ initial: false,
157
+ animate: {
158
+ cx: target.x,
159
+ cy: target.y,
160
+ opacity: target.active ? 1 : 0,
161
+ scale: target.active ? 1 : 0
162
+ },
163
+ transition: {
164
+ type: "spring",
165
+ stiffness: 200,
166
+ damping: 20,
167
+ mass: 0.8,
168
+ delay: i * 8e-3
169
+ }
170
+ },
171
+ i
172
+ )) });
173
+ }
174
+ // Annotate the CommonJS export names for ESM import in node:
175
+ 0 && (module.exports = {
176
+ ParticleScatter
177
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,151 @@
1
+ "use client";
2
+
3
+ // src/particle-scatter.tsx
4
+ import { useMemo } from "react";
5
+ import { motion } from "framer-motion";
6
+
7
+ // src/digit-paths.ts
8
+ var DIGIT_MATRIX = {
9
+ 0: [
10
+ [0, 1, 1, 1, 0],
11
+ [1, 0, 0, 0, 1],
12
+ [1, 0, 0, 1, 1],
13
+ [1, 0, 1, 0, 1],
14
+ [1, 1, 0, 0, 1],
15
+ [1, 0, 0, 0, 1],
16
+ [0, 1, 1, 1, 0]
17
+ ],
18
+ 1: [
19
+ [0, 0, 1, 0, 0],
20
+ [0, 1, 1, 0, 0],
21
+ [1, 0, 1, 0, 0],
22
+ [0, 0, 1, 0, 0],
23
+ [0, 0, 1, 0, 0],
24
+ [0, 0, 1, 0, 0],
25
+ [1, 1, 1, 1, 1]
26
+ ],
27
+ 2: [
28
+ [0, 1, 1, 1, 0],
29
+ [1, 0, 0, 0, 1],
30
+ [0, 0, 0, 0, 1],
31
+ [0, 0, 1, 1, 0],
32
+ [0, 1, 0, 0, 0],
33
+ [1, 0, 0, 0, 0],
34
+ [1, 1, 1, 1, 1]
35
+ ],
36
+ 3: [
37
+ [0, 1, 1, 1, 0],
38
+ [1, 0, 0, 0, 1],
39
+ [0, 0, 0, 0, 1],
40
+ [0, 0, 1, 1, 0],
41
+ [0, 0, 0, 0, 1],
42
+ [1, 0, 0, 0, 1],
43
+ [0, 1, 1, 1, 0]
44
+ ],
45
+ 4: [
46
+ [0, 0, 0, 1, 0],
47
+ [0, 0, 1, 1, 0],
48
+ [0, 1, 0, 1, 0],
49
+ [1, 0, 0, 1, 0],
50
+ [1, 1, 1, 1, 1],
51
+ [0, 0, 0, 1, 0],
52
+ [0, 0, 0, 1, 0]
53
+ ],
54
+ 5: [
55
+ [1, 1, 1, 1, 1],
56
+ [1, 0, 0, 0, 0],
57
+ [1, 1, 1, 1, 0],
58
+ [0, 0, 0, 0, 1],
59
+ [0, 0, 0, 0, 1],
60
+ [1, 0, 0, 0, 1],
61
+ [0, 1, 1, 1, 0]
62
+ ],
63
+ 6: [
64
+ [0, 1, 1, 1, 0],
65
+ [1, 0, 0, 0, 0],
66
+ [1, 0, 0, 0, 0],
67
+ [1, 1, 1, 1, 0],
68
+ [1, 0, 0, 0, 1],
69
+ [1, 0, 0, 0, 1],
70
+ [0, 1, 1, 1, 0]
71
+ ],
72
+ 7: [
73
+ [1, 1, 1, 1, 1],
74
+ [0, 0, 0, 0, 1],
75
+ [0, 0, 0, 1, 0],
76
+ [0, 0, 1, 0, 0],
77
+ [0, 0, 1, 0, 0],
78
+ [0, 0, 1, 0, 0],
79
+ [0, 0, 1, 0, 0]
80
+ ],
81
+ 8: [
82
+ [0, 1, 1, 1, 0],
83
+ [1, 0, 0, 0, 1],
84
+ [1, 0, 0, 0, 1],
85
+ [0, 1, 1, 1, 0],
86
+ [1, 0, 0, 0, 1],
87
+ [1, 0, 0, 0, 1],
88
+ [0, 1, 1, 1, 0]
89
+ ],
90
+ 9: [
91
+ [0, 1, 1, 1, 0],
92
+ [1, 0, 0, 0, 1],
93
+ [1, 0, 0, 0, 1],
94
+ [0, 1, 1, 1, 1],
95
+ [0, 0, 0, 0, 1],
96
+ [0, 0, 0, 0, 1],
97
+ [0, 1, 1, 1, 0]
98
+ ]
99
+ };
100
+
101
+ // src/particle-scatter.tsx
102
+ import { jsx } from "react/jsx-runtime";
103
+ var ROWS = 7;
104
+ var COLS = 5;
105
+ function getTargets(digit, cellW, cellH) {
106
+ const matrix = DIGIT_MATRIX[digit];
107
+ const targets = [];
108
+ for (let r = 0; r < ROWS; r++) {
109
+ for (let c = 0; c < COLS; c++) {
110
+ targets.push({
111
+ x: c * cellW + cellW / 2,
112
+ y: r * cellH + cellH / 2,
113
+ active: matrix[r][c] === 1
114
+ });
115
+ }
116
+ }
117
+ return targets;
118
+ }
119
+ function ParticleScatter({ value, size }) {
120
+ const width = size;
121
+ const height = size * 1.5;
122
+ const cellW = width / COLS;
123
+ const cellH = height / ROWS;
124
+ const dotRadius = Math.min(cellW, cellH) * 0.3;
125
+ const targets = useMemo(() => getTargets(value, cellW, cellH), [value, cellW, cellH]);
126
+ return /* @__PURE__ */ jsx("svg", { width, height, viewBox: `0 0 ${width} ${height}`, children: targets.map((target, i) => /* @__PURE__ */ jsx(
127
+ motion.circle,
128
+ {
129
+ r: dotRadius,
130
+ fill: "#a3e635",
131
+ initial: false,
132
+ animate: {
133
+ cx: target.x,
134
+ cy: target.y,
135
+ opacity: target.active ? 1 : 0,
136
+ scale: target.active ? 1 : 0
137
+ },
138
+ transition: {
139
+ type: "spring",
140
+ stiffness: 200,
141
+ damping: 20,
142
+ mass: 0.8,
143
+ delay: i * 8e-3
144
+ }
145
+ },
146
+ i
147
+ )) });
148
+ }
149
+ export {
150
+ ParticleScatter
151
+ };
package/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "@raex-ui/particle-scatter",
3
+ "version": "0.1.0",
4
+ "description": "Firefly dots scatter and reform into digits using spring physics. Animated digit transition component for React.",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.js",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.js",
12
+ "require": "./dist/index.cjs"
13
+ }
14
+ },
15
+ "files": ["dist"],
16
+ "sideEffects": false,
17
+ "license": "MIT",
18
+ "keywords": ["react", "animation", "digit", "transition", "framer-motion", "svg", "particle"],
19
+ "peerDependencies": {
20
+ "react": ">=18",
21
+ "react-dom": ">=18",
22
+ "framer-motion": ">=10"
23
+ },
24
+ "devDependencies": {
25
+ "tsup": "^8.5.1",
26
+ "typescript": "^5",
27
+ "react": "^19",
28
+ "@types/react": "^19"
29
+ },
30
+ "scripts": {
31
+ "build": "tsup"
32
+ }
33
+ }