@raex-ui/ink-bloom 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.
- package/dist/index.d.mts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +90 -0
- package/dist/index.mjs +64 -0
- package/package.json +33 -0
package/dist/index.d.mts
ADDED
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
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
|
+
InkBloom: () => InkBloom
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(index_exports);
|
|
27
|
+
|
|
28
|
+
// src/ink-bloom.tsx
|
|
29
|
+
var import_react = require("react");
|
|
30
|
+
var import_framer_motion = require("framer-motion");
|
|
31
|
+
|
|
32
|
+
// src/digit-paths.ts
|
|
33
|
+
var DIGIT_PATHS = {
|
|
34
|
+
0: "M32.5,6 L32.5,6 Q40,6 45.7,11.1 Q51.4,16.1 54.7,25.3 Q58,34.4 58,46.7 L58,46.7 Q58,59 54.7,68.8 Q51.4,78.6 45.4,84.3 Q39.5,90 31.5,90 L31.5,90 Q24.2,90 18.4,84.9 Q12.6,79.9 9.3,70.7 Q6,61.4 6,49.2 L6,49.2 Q6,37 9.3,27.3 Q12.6,17.5 18.5,11.8 Q24.5,6 32.5,6 Z M31.7,8.8 L31.7,8.8 Q27.7,8.8 25,19.4 Q22.3,30 22.3,48.7 L22.3,48.7 Q22.3,62.5 23.7,71 Q25.1,79.6 27.4,83.4 Q29.7,87.2 32.3,87.2 L32.3,87.2 Q36.4,87.2 39,76.6 Q41.7,65.9 41.7,47.2 L41.7,47.2 Q41.7,33.3 40.3,24.9 Q38.9,16.4 36.6,12.6 Q34.4,8.8 31.7,8.8 Z",
|
|
35
|
+
1: "M48.6,6 L48.6,6 L48.6,75.3 Q48.6,81.9 50.6,84.3 Q52.6,86.7 57.5,86.7 L57.5,86.7 L57.5,90 Q54.3,89.8 48.2,89.6 Q42.1,89.4 35.6,89.4 L35.6,89.4 Q26.9,89.4 18.9,89.6 Q10.9,89.8 6.5,90 L6.5,90 L6.5,86.7 Q13,86.7 16.5,84.1 Q20.1,81.4 20.1,73.7 L20.1,73.7 L20.1,34.7 Q20.1,27.1 18.9,23.4 Q17.7,19.8 14.7,18.7 Q11.7,17.6 6.5,17.6 L6.5,17.6 L6.5,14.1 Q21.5,13.8 31.4,12 Q41.2,10.3 48.6,6 Z",
|
|
36
|
+
2: "M34.2,6 L34.2,6 Q43.2,6 48.4,11.2 Q53.6,16.5 53.6,26 L53.6,26 Q53.6,31.9 51.4,36.6 Q49.2,41.3 45.6,45.3 Q42,49.2 37.9,52.7 Q33.7,56.1 29.9,59.4 Q26,62.7 23.2,66.3 L23.2,66.3 L47.8,66.3 Q52.2,66.3 53.4,64.9 Q54.6,63.5 55.1,59.9 L55.1,59.9 L57.6,59.9 Q57.6,71.7 57.7,78.4 Q57.8,85 58,90 L58,90 Q57,89.7 54.4,89.5 Q51.8,89.4 48.4,89.3 Q45.1,89.2 41.8,89.2 L41.8,89.2 L6,89.2 L6,85.9 Q8.9,81.7 13.3,76.3 Q17.7,70.8 22,64 Q26.3,57.2 29.3,49.2 Q32.2,41.3 32.2,32.2 L32.2,32.2 Q32.2,24.3 29.8,20.6 Q27.4,16.9 22.5,16.9 L22.5,16.9 Q17.7,16.9 14.3,19.7 Q10.8,22.4 8,27.4 L8,27.4 L6.1,25.5 Q8.7,20.1 12.4,15.6 Q16,11.2 21.3,8.6 Q26.7,6 34.2,6 Z",
|
|
37
|
+
3: "M32.6,6 L32.6,6 Q38.7,6 43.5,7.7 Q48.4,9.4 51.2,12.6 Q53.9,15.7 53.9,20.2 L53.9,20.2 Q53.9,24.8 50.9,28.9 Q47.8,33 41.8,36.1 Q35.8,39.2 26.9,40.5 L26.9,40.5 Q36.2,39.9 43.2,42 Q50.2,44.1 54.1,48.5 Q58,52.9 58,59.3 L58,59.3 Q58,64.9 54.9,69.7 Q51.9,74.5 46.7,78.3 Q41.5,82 34.8,84.7 Q28,87.3 20.7,88.6 Q13.3,90 6,90 L6,90 L6,87.4 Q11,87.2 16.4,85.3 Q21.8,83.5 26.5,80 Q31.2,76.5 34.1,71.3 Q37.1,66.2 37.1,59.4 L37.1,59.4 Q37.1,52.2 34,47.6 Q30.9,43 25.3,42.5 L25.3,42.5 Q23.6,43.3 22.2,43.9 Q20.7,44.6 19.1,44.6 L19.1,44.6 Q18.1,44.6 17.5,44.2 Q16.9,43.8 16.9,42.6 L16.9,42.6 Q16.9,41 18.1,40.4 Q19.3,39.8 20.9,39.8 L20.9,39.8 Q21.8,39.8 22.8,39.9 Q23.7,40 24.9,40.1 L24.9,40.1 Q29.9,36.6 31.7,32.6 Q33.6,28.6 33.6,24.5 L33.6,24.5 Q33.6,19.1 30.9,16.5 Q28.2,13.9 23.4,13.9 L23.4,13.9 Q19.1,13.9 15.3,16.1 Q11.4,18.3 8.8,22.6 L8.8,22.6 L6.8,21.4 Q9.1,17.3 12.3,13.8 Q15.5,10.3 20.4,8.1 Q25.3,6 32.6,6 Z",
|
|
38
|
+
4: "M6,66.8 L46.4,6 L46.8,9.2 L13.7,59.3 L16,53.6 L48.6,53.6 Q52.7,53.6 53.8,52.5 Q54.9,51.4 55.3,48.5 L55.3,48.5 L57.6,48.5 Q57.6,57 57.7,61.7 Q57.8,66.4 58,70.1 L58,70.1 Q57.3,69.8 55.2,69.7 Q53,69.7 50.1,69.6 Q47.2,69.4 44.3,69.4 Q41.4,69.4 39.1,69.4 L39.1,69.4 L6,69.4 L6,66.8 Z M46.4,6 L48,6 L48,90 L34,90 L34,26.6 L46.4,6 Z",
|
|
39
|
+
5: "M50.4,6 L53.2,6 Q53.2,14.7 53.3,19.5 Q53.4,24.3 53.6,28.1 L53.6,28.1 Q52.7,27.8 50,27.7 Q47.4,27.6 43.9,27.5 Q40.5,27.5 37.2,27.5 L37.2,27.5 L15.2,27.5 L13,46.3 Q16,43.8 21.2,42.3 Q26.4,40.7 33.5,40.7 L33.5,40.7 Q41.9,40.7 47.4,43.3 Q52.8,45.9 55.4,50.3 Q58,54.7 58,60 L58,60 Q58,67 53.5,72.5 Q48.9,78.1 41.3,82 Q33.8,85.9 24.6,88 Q15.3,90 6,90 L6,90 L6,87.8 Q11.7,87.8 17.1,86 Q22.4,84.1 26.7,80.6 Q31.1,77.1 33.6,72 Q36.1,67 36.1,60.5 L36.1,60.5 Q36.1,53 32.9,49 Q29.8,45 23.5,45 L23.5,45 Q19.8,45 17.2,46.3 Q14.5,47.5 12.1,49.5 L12.1,49.5 L10.3,48.2 L15,9.3 Q16.3,9.5 18,9.6 Q19.7,9.7 21.4,9.7 L21.4,9.7 L44.9,9.7 Q47.5,9.7 48.8,8.9 Q50.2,8 50.4,6 L50.4,6 Z",
|
|
40
|
+
6: "M49.6,6 L49.6,6 L50,8.3 Q46.2,9.6 42.5,11.6 Q38.8,13.6 35.6,17 Q32.3,20.4 29.8,25.7 Q27.3,31.1 25.9,39.1 Q24.6,47.1 24.6,58.7 L24.6,58.7 Q24.6,69.5 25.7,75.9 Q26.9,82.2 28.8,85 Q30.6,87.7 32.4,87.7 L32.4,87.7 Q34.2,87.7 35.8,85.3 Q37.5,82.9 38.5,77.6 Q39.4,72.3 39.4,63.7 L39.4,63.7 Q39.4,55.5 38.5,50.6 Q37.6,45.7 36,43.5 Q34.5,41.3 32.5,41.3 L32.5,41.3 Q31.2,41.3 29.4,42.5 Q27.6,43.6 26.1,46.1 Q24.7,48.5 24,52.7 L24,52.7 L23.1,51.6 Q23.7,46.7 25.7,43.7 Q27.7,40.8 30.8,39.4 Q33.9,38 37.5,38 L37.5,38 Q43.2,38 47.8,41 Q52.4,44.1 55.2,49.5 Q58,55 58,62.6 L58,62.6 Q58,71.4 54.3,77.6 Q50.7,83.7 44.6,86.9 Q38.5,90 31.3,90 L31.3,90 Q19.5,90 12.7,81.5 Q6,73 6,57.5 L6,57.5 Q6,47.3 8.8,39.3 Q11.7,31.3 16.3,25.4 Q21,19.6 26.7,15.6 Q32.5,11.6 38.5,9.2 Q44.4,6.9 49.6,6 Z",
|
|
41
|
+
7: "M6,6 L6,6 Q7,6.3 9.6,6.4 Q12.3,6.5 15.7,6.6 Q19.1,6.6 22.5,6.6 L22.5,6.6 L58,6.6 L58,9.3 Q55.9,14.4 52.6,20.7 Q49.4,27 46.1,34.5 Q42.8,41.9 40.6,50.5 Q38.3,59.1 38.3,68.7 L38.3,68.7 Q38.3,68.7 38.5,70.8 Q38.7,73 38.8,75.4 Q38.9,77.9 38.9,79 L38.9,79 Q38.9,83 36.5,86.5 Q34.2,90 28.9,90 L28.9,90 Q23.8,90 21.3,86.2 Q18.8,82.5 18.8,76.4 L18.8,76.4 Q18.8,70.5 21.2,64.5 Q23.6,58.5 27.4,52.4 Q31.3,46.4 35.6,40.7 Q40,35 44.1,29.9 Q48.3,24.8 51,20.5 L51,20.5 L48.9,25 L16.4,25 Q11.9,25 10.6,26.2 Q9.4,27.3 9,30.2 L9,30.2 L6.4,30.2 Q6.4,20.6 6.3,15.3 Q6.2,10 6,6 Z",
|
|
42
|
+
8: "M32.6,6 L32.6,6 Q39.2,6 44.1,8.1 Q48.9,10.2 51.7,13.9 Q54.4,17.5 54.4,22.2 L54.4,22.2 Q54.4,27.8 50.4,31.7 Q46.4,35.7 39,39.3 L39,39.3 L38.2,37.7 Q39.1,35.7 39.5,32.8 Q40,30 40.1,27.2 Q40.3,24.5 40.3,22.8 L40.3,22.8 Q40.3,15.7 38,11.9 Q35.8,8.1 31.9,8.1 L31.9,8.1 Q29,8.1 27.6,10.2 Q26.2,12.4 26.2,15.7 L26.2,15.7 Q26.2,20.3 28.5,24.6 Q30.8,28.9 34.5,33 Q38.1,37.2 42.1,41.3 Q46.1,45.5 49.8,49.8 Q53.4,54.2 55.7,58.8 Q58,63.4 58,68.7 L58,68.7 Q58,74.8 54.5,79.6 Q51.1,84.4 45.1,87.2 Q39.1,90 31.3,90 L31.3,90 Q24.6,90 18.8,87.8 Q13,85.5 9.5,81.1 Q6,76.6 6,70.3 L6,70.3 Q6,65 8.3,61.1 Q10.6,57.1 14.6,54.2 Q18.6,51.3 23.5,49.1 L23.5,49.1 L24.3,50.7 Q22.3,54.3 21.6,59 Q20.9,63.6 20.9,68 L20.9,68 Q20.9,73.5 21.9,78 Q22.9,82.6 25.3,85.3 Q27.6,87.9 31.8,87.9 L31.8,87.9 Q36.5,87.9 38.4,84.8 Q40.4,81.7 40.4,77.4 L40.4,77.4 Q40.4,72.3 38.1,68 Q35.9,63.6 32.4,59.7 Q28.8,55.8 24.9,51.9 Q20.9,48 17.4,43.9 Q13.8,39.9 11.6,35.3 Q9.3,30.7 9.3,25.1 L9.3,25.1 Q9.3,18.3 12.6,14.1 Q16,9.9 21.3,7.9 Q26.6,6 32.6,6 Z",
|
|
43
|
+
9: "M32.7,6 L32.7,6 Q44.5,6 51.3,15.1 Q58,24.2 58,40.8 L58,40.8 Q58,50.5 55.3,58.1 Q52.5,65.8 47.9,71.4 Q43.3,77 37.7,80.9 Q32.1,84.7 26.3,87 Q20.5,89.3 15.4,90 L15.4,90 L15,87.6 Q19.6,86 23.9,83.3 Q28.2,80.6 31.8,75.5 Q35.3,70.4 37.4,61.8 Q39.4,53.2 39.4,39.6 L39.4,39.6 Q39.4,27.9 38.3,21.1 Q37.1,14.3 35.3,11.4 Q33.5,8.4 31.6,8.4 L31.6,8.4 Q29.8,8.4 28.2,11 Q26.6,13.6 25.6,19.3 Q24.6,25 24.6,34.2 L24.6,34.2 Q24.6,42.9 25.5,48.2 Q26.4,53.6 28,55.9 Q29.6,58.2 31.5,58.2 L31.5,58.2 Q32.9,58.2 34.6,57 Q36.4,55.8 37.9,53.1 Q39.4,50.4 40,46 L40,46 L40.9,47.2 Q40.4,52.5 38.4,55.6 Q36.3,58.8 33.2,60.3 Q30.1,61.8 26.5,61.8 L26.5,61.8 Q20.9,61.8 16.2,58.5 Q11.6,55.3 8.8,49.3 Q6,43.4 6,35.3 L6,35.3 Q6,25.8 9.7,19.3 Q13.4,12.7 19.5,9.4 Q25.5,6 32.7,6 Z"
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
// src/ink-bloom.tsx
|
|
47
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
48
|
+
function InkBloom({ value, size }) {
|
|
49
|
+
const width = size;
|
|
50
|
+
const height = size * 1.5;
|
|
51
|
+
const [key, setKey] = (0, import_react.useState)(0);
|
|
52
|
+
const prevValue = (0, import_react.useRef)(value);
|
|
53
|
+
(0, import_react.useEffect)(() => {
|
|
54
|
+
if (prevValue.current !== value) {
|
|
55
|
+
prevValue.current = value;
|
|
56
|
+
setKey((k) => k + 1);
|
|
57
|
+
}
|
|
58
|
+
}, [value]);
|
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width, height, viewBox: "0 0 64 96", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
|
+
import_framer_motion.motion.g,
|
|
61
|
+
{
|
|
62
|
+
initial: {
|
|
63
|
+
opacity: 0,
|
|
64
|
+
filter: "blur(12px)",
|
|
65
|
+
scale: 1.3
|
|
66
|
+
},
|
|
67
|
+
animate: {
|
|
68
|
+
opacity: 1,
|
|
69
|
+
filter: "blur(0px)",
|
|
70
|
+
scale: 1
|
|
71
|
+
},
|
|
72
|
+
exit: {
|
|
73
|
+
opacity: 0,
|
|
74
|
+
filter: "blur(16px)",
|
|
75
|
+
scale: 1.5
|
|
76
|
+
},
|
|
77
|
+
transition: {
|
|
78
|
+
duration: 0.5,
|
|
79
|
+
ease: [0.22, 1, 0.36, 1]
|
|
80
|
+
},
|
|
81
|
+
style: { transformOrigin: "32px 48px" },
|
|
82
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: DIGIT_PATHS[value], fill: "#c084fc" })
|
|
83
|
+
},
|
|
84
|
+
`${value}-${key}`
|
|
85
|
+
) }) });
|
|
86
|
+
}
|
|
87
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
88
|
+
0 && (module.exports = {
|
|
89
|
+
InkBloom
|
|
90
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/ink-bloom.tsx
|
|
4
|
+
import { useEffect, useRef, useState } from "react";
|
|
5
|
+
import { motion, AnimatePresence } from "framer-motion";
|
|
6
|
+
|
|
7
|
+
// src/digit-paths.ts
|
|
8
|
+
var DIGIT_PATHS = {
|
|
9
|
+
0: "M32.5,6 L32.5,6 Q40,6 45.7,11.1 Q51.4,16.1 54.7,25.3 Q58,34.4 58,46.7 L58,46.7 Q58,59 54.7,68.8 Q51.4,78.6 45.4,84.3 Q39.5,90 31.5,90 L31.5,90 Q24.2,90 18.4,84.9 Q12.6,79.9 9.3,70.7 Q6,61.4 6,49.2 L6,49.2 Q6,37 9.3,27.3 Q12.6,17.5 18.5,11.8 Q24.5,6 32.5,6 Z M31.7,8.8 L31.7,8.8 Q27.7,8.8 25,19.4 Q22.3,30 22.3,48.7 L22.3,48.7 Q22.3,62.5 23.7,71 Q25.1,79.6 27.4,83.4 Q29.7,87.2 32.3,87.2 L32.3,87.2 Q36.4,87.2 39,76.6 Q41.7,65.9 41.7,47.2 L41.7,47.2 Q41.7,33.3 40.3,24.9 Q38.9,16.4 36.6,12.6 Q34.4,8.8 31.7,8.8 Z",
|
|
10
|
+
1: "M48.6,6 L48.6,6 L48.6,75.3 Q48.6,81.9 50.6,84.3 Q52.6,86.7 57.5,86.7 L57.5,86.7 L57.5,90 Q54.3,89.8 48.2,89.6 Q42.1,89.4 35.6,89.4 L35.6,89.4 Q26.9,89.4 18.9,89.6 Q10.9,89.8 6.5,90 L6.5,90 L6.5,86.7 Q13,86.7 16.5,84.1 Q20.1,81.4 20.1,73.7 L20.1,73.7 L20.1,34.7 Q20.1,27.1 18.9,23.4 Q17.7,19.8 14.7,18.7 Q11.7,17.6 6.5,17.6 L6.5,17.6 L6.5,14.1 Q21.5,13.8 31.4,12 Q41.2,10.3 48.6,6 Z",
|
|
11
|
+
2: "M34.2,6 L34.2,6 Q43.2,6 48.4,11.2 Q53.6,16.5 53.6,26 L53.6,26 Q53.6,31.9 51.4,36.6 Q49.2,41.3 45.6,45.3 Q42,49.2 37.9,52.7 Q33.7,56.1 29.9,59.4 Q26,62.7 23.2,66.3 L23.2,66.3 L47.8,66.3 Q52.2,66.3 53.4,64.9 Q54.6,63.5 55.1,59.9 L55.1,59.9 L57.6,59.9 Q57.6,71.7 57.7,78.4 Q57.8,85 58,90 L58,90 Q57,89.7 54.4,89.5 Q51.8,89.4 48.4,89.3 Q45.1,89.2 41.8,89.2 L41.8,89.2 L6,89.2 L6,85.9 Q8.9,81.7 13.3,76.3 Q17.7,70.8 22,64 Q26.3,57.2 29.3,49.2 Q32.2,41.3 32.2,32.2 L32.2,32.2 Q32.2,24.3 29.8,20.6 Q27.4,16.9 22.5,16.9 L22.5,16.9 Q17.7,16.9 14.3,19.7 Q10.8,22.4 8,27.4 L8,27.4 L6.1,25.5 Q8.7,20.1 12.4,15.6 Q16,11.2 21.3,8.6 Q26.7,6 34.2,6 Z",
|
|
12
|
+
3: "M32.6,6 L32.6,6 Q38.7,6 43.5,7.7 Q48.4,9.4 51.2,12.6 Q53.9,15.7 53.9,20.2 L53.9,20.2 Q53.9,24.8 50.9,28.9 Q47.8,33 41.8,36.1 Q35.8,39.2 26.9,40.5 L26.9,40.5 Q36.2,39.9 43.2,42 Q50.2,44.1 54.1,48.5 Q58,52.9 58,59.3 L58,59.3 Q58,64.9 54.9,69.7 Q51.9,74.5 46.7,78.3 Q41.5,82 34.8,84.7 Q28,87.3 20.7,88.6 Q13.3,90 6,90 L6,90 L6,87.4 Q11,87.2 16.4,85.3 Q21.8,83.5 26.5,80 Q31.2,76.5 34.1,71.3 Q37.1,66.2 37.1,59.4 L37.1,59.4 Q37.1,52.2 34,47.6 Q30.9,43 25.3,42.5 L25.3,42.5 Q23.6,43.3 22.2,43.9 Q20.7,44.6 19.1,44.6 L19.1,44.6 Q18.1,44.6 17.5,44.2 Q16.9,43.8 16.9,42.6 L16.9,42.6 Q16.9,41 18.1,40.4 Q19.3,39.8 20.9,39.8 L20.9,39.8 Q21.8,39.8 22.8,39.9 Q23.7,40 24.9,40.1 L24.9,40.1 Q29.9,36.6 31.7,32.6 Q33.6,28.6 33.6,24.5 L33.6,24.5 Q33.6,19.1 30.9,16.5 Q28.2,13.9 23.4,13.9 L23.4,13.9 Q19.1,13.9 15.3,16.1 Q11.4,18.3 8.8,22.6 L8.8,22.6 L6.8,21.4 Q9.1,17.3 12.3,13.8 Q15.5,10.3 20.4,8.1 Q25.3,6 32.6,6 Z",
|
|
13
|
+
4: "M6,66.8 L46.4,6 L46.8,9.2 L13.7,59.3 L16,53.6 L48.6,53.6 Q52.7,53.6 53.8,52.5 Q54.9,51.4 55.3,48.5 L55.3,48.5 L57.6,48.5 Q57.6,57 57.7,61.7 Q57.8,66.4 58,70.1 L58,70.1 Q57.3,69.8 55.2,69.7 Q53,69.7 50.1,69.6 Q47.2,69.4 44.3,69.4 Q41.4,69.4 39.1,69.4 L39.1,69.4 L6,69.4 L6,66.8 Z M46.4,6 L48,6 L48,90 L34,90 L34,26.6 L46.4,6 Z",
|
|
14
|
+
5: "M50.4,6 L53.2,6 Q53.2,14.7 53.3,19.5 Q53.4,24.3 53.6,28.1 L53.6,28.1 Q52.7,27.8 50,27.7 Q47.4,27.6 43.9,27.5 Q40.5,27.5 37.2,27.5 L37.2,27.5 L15.2,27.5 L13,46.3 Q16,43.8 21.2,42.3 Q26.4,40.7 33.5,40.7 L33.5,40.7 Q41.9,40.7 47.4,43.3 Q52.8,45.9 55.4,50.3 Q58,54.7 58,60 L58,60 Q58,67 53.5,72.5 Q48.9,78.1 41.3,82 Q33.8,85.9 24.6,88 Q15.3,90 6,90 L6,90 L6,87.8 Q11.7,87.8 17.1,86 Q22.4,84.1 26.7,80.6 Q31.1,77.1 33.6,72 Q36.1,67 36.1,60.5 L36.1,60.5 Q36.1,53 32.9,49 Q29.8,45 23.5,45 L23.5,45 Q19.8,45 17.2,46.3 Q14.5,47.5 12.1,49.5 L12.1,49.5 L10.3,48.2 L15,9.3 Q16.3,9.5 18,9.6 Q19.7,9.7 21.4,9.7 L21.4,9.7 L44.9,9.7 Q47.5,9.7 48.8,8.9 Q50.2,8 50.4,6 L50.4,6 Z",
|
|
15
|
+
6: "M49.6,6 L49.6,6 L50,8.3 Q46.2,9.6 42.5,11.6 Q38.8,13.6 35.6,17 Q32.3,20.4 29.8,25.7 Q27.3,31.1 25.9,39.1 Q24.6,47.1 24.6,58.7 L24.6,58.7 Q24.6,69.5 25.7,75.9 Q26.9,82.2 28.8,85 Q30.6,87.7 32.4,87.7 L32.4,87.7 Q34.2,87.7 35.8,85.3 Q37.5,82.9 38.5,77.6 Q39.4,72.3 39.4,63.7 L39.4,63.7 Q39.4,55.5 38.5,50.6 Q37.6,45.7 36,43.5 Q34.5,41.3 32.5,41.3 L32.5,41.3 Q31.2,41.3 29.4,42.5 Q27.6,43.6 26.1,46.1 Q24.7,48.5 24,52.7 L24,52.7 L23.1,51.6 Q23.7,46.7 25.7,43.7 Q27.7,40.8 30.8,39.4 Q33.9,38 37.5,38 L37.5,38 Q43.2,38 47.8,41 Q52.4,44.1 55.2,49.5 Q58,55 58,62.6 L58,62.6 Q58,71.4 54.3,77.6 Q50.7,83.7 44.6,86.9 Q38.5,90 31.3,90 L31.3,90 Q19.5,90 12.7,81.5 Q6,73 6,57.5 L6,57.5 Q6,47.3 8.8,39.3 Q11.7,31.3 16.3,25.4 Q21,19.6 26.7,15.6 Q32.5,11.6 38.5,9.2 Q44.4,6.9 49.6,6 Z",
|
|
16
|
+
7: "M6,6 L6,6 Q7,6.3 9.6,6.4 Q12.3,6.5 15.7,6.6 Q19.1,6.6 22.5,6.6 L22.5,6.6 L58,6.6 L58,9.3 Q55.9,14.4 52.6,20.7 Q49.4,27 46.1,34.5 Q42.8,41.9 40.6,50.5 Q38.3,59.1 38.3,68.7 L38.3,68.7 Q38.3,68.7 38.5,70.8 Q38.7,73 38.8,75.4 Q38.9,77.9 38.9,79 L38.9,79 Q38.9,83 36.5,86.5 Q34.2,90 28.9,90 L28.9,90 Q23.8,90 21.3,86.2 Q18.8,82.5 18.8,76.4 L18.8,76.4 Q18.8,70.5 21.2,64.5 Q23.6,58.5 27.4,52.4 Q31.3,46.4 35.6,40.7 Q40,35 44.1,29.9 Q48.3,24.8 51,20.5 L51,20.5 L48.9,25 L16.4,25 Q11.9,25 10.6,26.2 Q9.4,27.3 9,30.2 L9,30.2 L6.4,30.2 Q6.4,20.6 6.3,15.3 Q6.2,10 6,6 Z",
|
|
17
|
+
8: "M32.6,6 L32.6,6 Q39.2,6 44.1,8.1 Q48.9,10.2 51.7,13.9 Q54.4,17.5 54.4,22.2 L54.4,22.2 Q54.4,27.8 50.4,31.7 Q46.4,35.7 39,39.3 L39,39.3 L38.2,37.7 Q39.1,35.7 39.5,32.8 Q40,30 40.1,27.2 Q40.3,24.5 40.3,22.8 L40.3,22.8 Q40.3,15.7 38,11.9 Q35.8,8.1 31.9,8.1 L31.9,8.1 Q29,8.1 27.6,10.2 Q26.2,12.4 26.2,15.7 L26.2,15.7 Q26.2,20.3 28.5,24.6 Q30.8,28.9 34.5,33 Q38.1,37.2 42.1,41.3 Q46.1,45.5 49.8,49.8 Q53.4,54.2 55.7,58.8 Q58,63.4 58,68.7 L58,68.7 Q58,74.8 54.5,79.6 Q51.1,84.4 45.1,87.2 Q39.1,90 31.3,90 L31.3,90 Q24.6,90 18.8,87.8 Q13,85.5 9.5,81.1 Q6,76.6 6,70.3 L6,70.3 Q6,65 8.3,61.1 Q10.6,57.1 14.6,54.2 Q18.6,51.3 23.5,49.1 L23.5,49.1 L24.3,50.7 Q22.3,54.3 21.6,59 Q20.9,63.6 20.9,68 L20.9,68 Q20.9,73.5 21.9,78 Q22.9,82.6 25.3,85.3 Q27.6,87.9 31.8,87.9 L31.8,87.9 Q36.5,87.9 38.4,84.8 Q40.4,81.7 40.4,77.4 L40.4,77.4 Q40.4,72.3 38.1,68 Q35.9,63.6 32.4,59.7 Q28.8,55.8 24.9,51.9 Q20.9,48 17.4,43.9 Q13.8,39.9 11.6,35.3 Q9.3,30.7 9.3,25.1 L9.3,25.1 Q9.3,18.3 12.6,14.1 Q16,9.9 21.3,7.9 Q26.6,6 32.6,6 Z",
|
|
18
|
+
9: "M32.7,6 L32.7,6 Q44.5,6 51.3,15.1 Q58,24.2 58,40.8 L58,40.8 Q58,50.5 55.3,58.1 Q52.5,65.8 47.9,71.4 Q43.3,77 37.7,80.9 Q32.1,84.7 26.3,87 Q20.5,89.3 15.4,90 L15.4,90 L15,87.6 Q19.6,86 23.9,83.3 Q28.2,80.6 31.8,75.5 Q35.3,70.4 37.4,61.8 Q39.4,53.2 39.4,39.6 L39.4,39.6 Q39.4,27.9 38.3,21.1 Q37.1,14.3 35.3,11.4 Q33.5,8.4 31.6,8.4 L31.6,8.4 Q29.8,8.4 28.2,11 Q26.6,13.6 25.6,19.3 Q24.6,25 24.6,34.2 L24.6,34.2 Q24.6,42.9 25.5,48.2 Q26.4,53.6 28,55.9 Q29.6,58.2 31.5,58.2 L31.5,58.2 Q32.9,58.2 34.6,57 Q36.4,55.8 37.9,53.1 Q39.4,50.4 40,46 L40,46 L40.9,47.2 Q40.4,52.5 38.4,55.6 Q36.3,58.8 33.2,60.3 Q30.1,61.8 26.5,61.8 L26.5,61.8 Q20.9,61.8 16.2,58.5 Q11.6,55.3 8.8,49.3 Q6,43.4 6,35.3 L6,35.3 Q6,25.8 9.7,19.3 Q13.4,12.7 19.5,9.4 Q25.5,6 32.7,6 Z"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// src/ink-bloom.tsx
|
|
22
|
+
import { jsx } from "react/jsx-runtime";
|
|
23
|
+
function InkBloom({ value, size }) {
|
|
24
|
+
const width = size;
|
|
25
|
+
const height = size * 1.5;
|
|
26
|
+
const [key, setKey] = useState(0);
|
|
27
|
+
const prevValue = useRef(value);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (prevValue.current !== value) {
|
|
30
|
+
prevValue.current = value;
|
|
31
|
+
setKey((k) => k + 1);
|
|
32
|
+
}
|
|
33
|
+
}, [value]);
|
|
34
|
+
return /* @__PURE__ */ jsx("svg", { width, height, viewBox: "0 0 64 96", style: { overflow: "visible" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
|
|
35
|
+
motion.g,
|
|
36
|
+
{
|
|
37
|
+
initial: {
|
|
38
|
+
opacity: 0,
|
|
39
|
+
filter: "blur(12px)",
|
|
40
|
+
scale: 1.3
|
|
41
|
+
},
|
|
42
|
+
animate: {
|
|
43
|
+
opacity: 1,
|
|
44
|
+
filter: "blur(0px)",
|
|
45
|
+
scale: 1
|
|
46
|
+
},
|
|
47
|
+
exit: {
|
|
48
|
+
opacity: 0,
|
|
49
|
+
filter: "blur(16px)",
|
|
50
|
+
scale: 1.5
|
|
51
|
+
},
|
|
52
|
+
transition: {
|
|
53
|
+
duration: 0.5,
|
|
54
|
+
ease: [0.22, 1, 0.36, 1]
|
|
55
|
+
},
|
|
56
|
+
style: { transformOrigin: "32px 48px" },
|
|
57
|
+
children: /* @__PURE__ */ jsx("path", { d: DIGIT_PATHS[value], fill: "#c084fc" })
|
|
58
|
+
},
|
|
59
|
+
`${value}-${key}`
|
|
60
|
+
) }) });
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
InkBloom
|
|
64
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@raex-ui/ink-bloom",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Ink-in-water dissolve effect where digits bloom in with blur and scale. 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", "ink", "bloom"],
|
|
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
|
+
}
|