@supermousejs/labs 2.3.0 → 2.4.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/README.md +86 -15
- package/dist/index.d.ts +11 -4
- package/dist/index.mjs +269 -162
- package/dist/index.umd.js +9 -9
- package/package.json +9 -5
- package/CHANGELOG.md +0 -103
- package/meta.json +0 -148
- package/src/SmartIcon.ts +0 -200
- package/src/SmartRing.ts +0 -105
- package/src/Sparkles.ts +0 -168
- package/src/TextRing.ts +0 -159
- package/src/index.ts +0 -4
- package/tsconfig.json +0 -4
- package/vite.config.ts +0 -24
package/dist/index.mjs
CHANGED
|
@@ -1,27 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (a.pointer)
|
|
1
|
+
import { normalizeAll as X, definePlugin as N, css as x, math as M, createActor as j, Layers as U, injectStyles as tt, damp as V, effects as et, lerpAngle as rt, setTransform as D, createCircle as _, normalize as nt, circlePath as st, circumference as ot, createSVGElement as G, path as it, text as at, textPath as lt } from "@supermousejs/utils";
|
|
2
|
+
function ct(t, e) {
|
|
3
|
+
const f = t.tagName.toLowerCase();
|
|
4
|
+
if (f === "input" || f === "textarea" || t.isContentEditable) {
|
|
5
|
+
const a = t.type;
|
|
6
|
+
if (["button", "submit", "checkbox", "radio", "range", "color"].includes(a)) {
|
|
7
|
+
if (e.pointer)
|
|
9
8
|
return "pointer";
|
|
10
|
-
} else if (
|
|
11
|
-
} else if ((
|
|
9
|
+
} else if (e.text) return "text";
|
|
10
|
+
} else if ((f === "a" || f === "button" || t.closest("a") || t.closest("button")) && e.pointer)
|
|
12
11
|
return "pointer";
|
|
12
|
+
if (e.text && ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6", "li", "blockquote", "code", "pre"].includes(
|
|
13
|
+
f
|
|
14
|
+
))
|
|
15
|
+
return "text";
|
|
16
|
+
if (e.text || e.grab) {
|
|
17
|
+
const a = window.getComputedStyle(t).cursor;
|
|
18
|
+
if (e.text && a === "text") return "text";
|
|
19
|
+
if (e.grab && a === "grab") return "grab";
|
|
20
|
+
}
|
|
13
21
|
return null;
|
|
14
22
|
}
|
|
15
|
-
const
|
|
16
|
-
let
|
|
17
|
-
const
|
|
23
|
+
const xt = (t) => {
|
|
24
|
+
let e, f = t.defaultState ?? "default", a = null, i, g = "idle", c = 0, C = f, u = null, n = 0, o = 0, z = 0;
|
|
25
|
+
const d = X(t, {
|
|
26
|
+
size: 24,
|
|
27
|
+
color: "",
|
|
28
|
+
followStrategy: "smooth",
|
|
29
|
+
anchor: "center",
|
|
30
|
+
rotateWithVelocity: !1
|
|
31
|
+
}), p = t.useSemanticTags ?? !0, m = t.transitionDuration ?? 200, r = t.switchDelay ?? 80, h = t.offset?.[0] ?? 0, y = t.offset?.[1] ?? 0, A = t.defaultState ?? "default", b = m / 2;
|
|
32
|
+
function v(s) {
|
|
33
|
+
x(e, { transform: `scale(${s})` });
|
|
34
|
+
}
|
|
35
|
+
function S(s) {
|
|
36
|
+
f = s, e.innerHTML = t.icons[s] ?? "";
|
|
37
|
+
}
|
|
38
|
+
let l;
|
|
18
39
|
return N(
|
|
19
40
|
{
|
|
20
|
-
name: t.name
|
|
41
|
+
name: t.name ?? "smart-icon",
|
|
21
42
|
selector: "[data-supermouse-icon]",
|
|
22
|
-
create: () => {
|
|
23
|
-
const
|
|
24
|
-
return
|
|
43
|
+
create: (s) => {
|
|
44
|
+
const w = j("div");
|
|
45
|
+
return x(w, { zIndex: U.CURSOR }), p && s.registerHoverTarget("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre"), e = j("div"), x(e, {
|
|
25
46
|
width: "100%",
|
|
26
47
|
height: "100%",
|
|
27
48
|
display: "flex",
|
|
@@ -29,120 +50,169 @@ const q = (t) => {
|
|
|
29
50
|
justifyContent: "center",
|
|
30
51
|
transformOrigin: "center center",
|
|
31
52
|
transform: "scale(1)",
|
|
32
|
-
transition: `transform ${
|
|
33
|
-
}),
|
|
53
|
+
transition: `transform ${b}ms cubic-bezier(0.16, 1, 0.3, 1)`
|
|
54
|
+
}), e.innerHTML = t.icons[f] ?? "", tt(
|
|
34
55
|
"supermouse-smart-icon-styles",
|
|
35
56
|
`
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
), l.appendChild(
|
|
45
|
-
},
|
|
46
|
-
styles: {
|
|
47
|
-
color: "color"
|
|
57
|
+
@keyframes sm {
|
|
58
|
+
0% { transform: rotate(0deg); }
|
|
59
|
+
100% { transform: rotate(360deg); }
|
|
60
|
+
}
|
|
61
|
+
.supermouse-spin {
|
|
62
|
+
animation: sm 1s linear infinite;
|
|
63
|
+
}
|
|
64
|
+
`
|
|
65
|
+
), l = s.state.cursorMode, s.setCursor("custom"), w.appendChild(e), w;
|
|
48
66
|
},
|
|
49
|
-
update: (
|
|
50
|
-
const
|
|
51
|
-
let
|
|
52
|
-
if (
|
|
53
|
-
|
|
54
|
-
const L =
|
|
55
|
-
L &&
|
|
56
|
-
} else
|
|
57
|
-
d = null, T = null;
|
|
58
|
-
f !== o && !A && (e[f] || f === (t.defaultState || "default")) && (i = f, A = !0, clearTimeout(x), a.style.transform = "scale(0)", x = setTimeout(() => {
|
|
59
|
-
o = i, a.innerHTML = e[o] || "", a.style.transform = "scale(1)", x = setTimeout(() => {
|
|
60
|
-
A = !1;
|
|
61
|
-
}, c / 2);
|
|
62
|
-
}, c / 2));
|
|
63
|
-
const b = E(l.state);
|
|
64
|
-
n.setStyle(y, "width", `${b}px`), n.setStyle(y, "height", `${b}px`);
|
|
65
|
-
let u = 0, z = 0;
|
|
66
|
-
const $ = b / 2, O = S(l.state);
|
|
67
|
-
O !== "center" && (O.includes("left") && (u = $), O.includes("right") && (u = -$), O.includes("top") && (z = $), O.includes("bottom") && (z = -$));
|
|
68
|
-
const P = o === "pointer" || o === "text";
|
|
69
|
-
if (v(l.state) && !P && !l.state.reducedMotion) {
|
|
70
|
-
const { x: L, y: I } = l.state.velocity;
|
|
71
|
-
w.dist(L, I) > 1 && (C = w.angle(L, I)), h = w.lerpAngle(h, C, 0.15);
|
|
67
|
+
update: (s, w, $) => {
|
|
68
|
+
const T = performance.now(), F = $ / 1e3, O = t.icons, k = s.state.hoverTarget, H = !!k, I = H && k !== a;
|
|
69
|
+
let R = A;
|
|
70
|
+
if (H) {
|
|
71
|
+
I && (a = k, i = p ? ct(k, O) : null);
|
|
72
|
+
const L = s.state.interaction?.icon;
|
|
73
|
+
L && O[L] ? R = L : i && (R = i);
|
|
72
74
|
} else
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
);
|
|
75
|
+
a && (a = null, i = null);
|
|
76
|
+
R !== f && g === "idle" ? !!O[R] || R === A ? I ? (S(R), v(1), u = null, n = 0) : R !== u ? (u = R, n = 0) : (n += $, n >= r && (C = R, g = "out", c = T, v(0), u = null, n = 0)) : (u = null, n = 0) : R === f && (u = null, n = 0), g === "out" && T - c >= b && (S(C), g = "in", c = T, v(0)), g === "in" && T - c >= b && (g = "idle", v(1));
|
|
77
|
+
const E = d.size(s.state), J = d.color(s.state);
|
|
78
|
+
x(w, {
|
|
79
|
+
width: `${E}px`,
|
|
80
|
+
height: `${E}px`,
|
|
81
|
+
color: J || "inherit"
|
|
82
|
+
});
|
|
83
|
+
let P = 0, W = 0;
|
|
84
|
+
const Y = E / 2;
|
|
85
|
+
switch (d.anchor(s.state)) {
|
|
86
|
+
case "center":
|
|
87
|
+
P = -Y, W = -Y;
|
|
88
|
+
break;
|
|
89
|
+
case "top-left":
|
|
90
|
+
P = 0, W = 0;
|
|
91
|
+
break;
|
|
92
|
+
case "top-right":
|
|
93
|
+
P = -E, W = 0;
|
|
94
|
+
break;
|
|
95
|
+
case "bottom-left":
|
|
96
|
+
P = 0, W = -E;
|
|
97
|
+
break;
|
|
98
|
+
case "bottom-right":
|
|
99
|
+
P = -E, W = -E;
|
|
100
|
+
break;
|
|
101
|
+
}
|
|
102
|
+
const K = f === "pointer" || f === "text";
|
|
103
|
+
if (d.rotateWithVelocity(s.state) && !K && !s.state.reducedMotion) {
|
|
104
|
+
const { x: L, y: B } = s.state.velocity;
|
|
105
|
+
M.dist(L, B) > 1 && (z = M.angle(L, B));
|
|
106
|
+
const Z = 1 - Math.exp(-20 * F);
|
|
107
|
+
o = M.lerpAngle(o, z, Z);
|
|
108
|
+
} else {
|
|
109
|
+
const L = 1 - Math.exp(-20 * F);
|
|
110
|
+
o = M.lerpAngle(o, 0, L);
|
|
111
|
+
}
|
|
112
|
+
const q = d.followStrategy(s.state) === "raw" ? s.state.pointer : s.state.smooth, Q = `translate3d(${q.x + h + P}px, ${q.y + y + W}px, 0) rotate(${o}deg)`;
|
|
113
|
+
w.style.transform = Q;
|
|
81
114
|
},
|
|
82
|
-
cleanup() {
|
|
83
|
-
|
|
115
|
+
cleanup(s) {
|
|
116
|
+
s.setCursor(l);
|
|
84
117
|
}
|
|
85
118
|
},
|
|
86
119
|
t
|
|
87
120
|
);
|
|
88
|
-
},
|
|
89
|
-
const
|
|
90
|
-
|
|
121
|
+
}, gt = (t = {}) => {
|
|
122
|
+
const e = X(t, {
|
|
123
|
+
size: 20,
|
|
124
|
+
hoverSize: 40,
|
|
125
|
+
color: "#ffffff",
|
|
126
|
+
fill: "transparent",
|
|
127
|
+
borderWidth: 2
|
|
128
|
+
});
|
|
129
|
+
let f = 20, a = 20, i = 0, g = 1, c = 1;
|
|
130
|
+
const C = 150;
|
|
131
|
+
let u = null;
|
|
91
132
|
return N(
|
|
92
133
|
{
|
|
93
|
-
name: t.name
|
|
134
|
+
name: t.name ?? "smart-ring",
|
|
94
135
|
selector: "[data-supermouse-color]",
|
|
95
|
-
create: (
|
|
96
|
-
const
|
|
97
|
-
return
|
|
98
|
-
zIndex:
|
|
99
|
-
mixBlendMode: t.mixBlendMode
|
|
100
|
-
transition: "
|
|
101
|
-
borderStyle: "solid"
|
|
102
|
-
|
|
136
|
+
create: (n) => {
|
|
137
|
+
const o = _(e.size(n.state), e.fill(n.state));
|
|
138
|
+
return x(o, {
|
|
139
|
+
zIndex: U.FOLLOWER,
|
|
140
|
+
mixBlendMode: t.mixBlendMode ?? "difference",
|
|
141
|
+
transition: "border-radius 0.2s ease",
|
|
142
|
+
borderStyle: "solid",
|
|
143
|
+
opacity: "0"
|
|
144
|
+
}), o;
|
|
145
|
+
},
|
|
146
|
+
onEnable(n, o) {
|
|
147
|
+
const z = e.size(n.state);
|
|
148
|
+
f = z * 0.5, a = z * 0.5, i = 0, g = 1, c = 1, clearTimeout(u ?? void 0), o.style.display = "block", o.style.opacity = "1", o.style.transition = "border-radius 0.2s ease";
|
|
149
|
+
},
|
|
150
|
+
beforeDisable(n, o) {
|
|
151
|
+
const { x: z, y: d } = n.state.smooth;
|
|
152
|
+
return o.style.transition = `opacity ${C}ms ease, transform ${C}ms ease`, o.style.opacity = "0", D(o, z, d, 0, 0.2, 0.2), new Promise((p) => {
|
|
153
|
+
u = setTimeout(() => {
|
|
154
|
+
o.style.transition = "border-radius 0.2s ease", p();
|
|
155
|
+
}, C);
|
|
156
|
+
});
|
|
103
157
|
},
|
|
104
|
-
update: (
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
158
|
+
update: (n, o, z) => {
|
|
159
|
+
if (o.style.display === "none") return;
|
|
160
|
+
const d = z / 1e3, p = e.size(n.state), m = n.state.shape;
|
|
161
|
+
let r = p, h = p, y = "50%", A = e.color(n.state);
|
|
162
|
+
m ? (r = m.width, h = m.height, y = `${m.borderRadius}px`) : (n.state.isHover && (r = e.hoverSize(n.state), h = e.hoverSize(n.state)), n.state.isDown && (r *= 0.9, h *= 0.9)), n.state.interaction.color && (A = n.state.interaction.color), f = V(f, r, 20, d), a = V(a, h, 20, d), x(o, {
|
|
163
|
+
width: `${f}px`,
|
|
164
|
+
height: `${a}px`,
|
|
165
|
+
borderRadius: y,
|
|
166
|
+
borderColor: A,
|
|
167
|
+
backgroundColor: e.fill(n.state),
|
|
168
|
+
borderWidth: `${e.borderWidth(n.state)}px`,
|
|
169
|
+
opacity: "1"
|
|
170
|
+
});
|
|
171
|
+
let b = 0, v = 1, S = 1;
|
|
172
|
+
if (!m && t.enableSkew && !n.state.reducedMotion) {
|
|
173
|
+
const { displacement: w } = n.state, $ = et.getVelocityDistortion(w.x, w.y);
|
|
174
|
+
b = $.rotation, v = $.scaleX, S = $.scaleY;
|
|
175
|
+
const T = 1 - Math.exp(-20 * d);
|
|
176
|
+
i = rt(i, b, T);
|
|
112
177
|
} else
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
const { x:
|
|
116
|
-
|
|
178
|
+
i = 0;
|
|
179
|
+
g = V(g, v, 20, d), c = V(c, S, 20, d);
|
|
180
|
+
const { x: l, y: s } = n.state.smooth;
|
|
181
|
+
D(o, l, s, i, g, c);
|
|
117
182
|
}
|
|
118
183
|
},
|
|
119
184
|
t
|
|
120
185
|
);
|
|
121
|
-
},
|
|
122
|
-
const
|
|
123
|
-
let
|
|
124
|
-
const
|
|
125
|
-
const
|
|
126
|
-
if (!
|
|
127
|
-
|
|
128
|
-
const
|
|
129
|
-
|
|
130
|
-
const
|
|
131
|
-
|
|
186
|
+
}, yt = (t = {}) => {
|
|
187
|
+
const e = t.count ?? 30, f = t.decay ?? 2.5, a = t.frequency ?? 10, i = t.scatter ?? 5, g = nt(t.color, "#ff00ff"), c = [];
|
|
188
|
+
let C = 0, u = 0, n = !1, o = 0;
|
|
189
|
+
const z = (d, p, m) => {
|
|
190
|
+
const r = c.find((b) => !b.isActive);
|
|
191
|
+
if (!r) return;
|
|
192
|
+
r.isActive = !0, r.life = 1, r.x = d + M.random(-i, i), r.y = p + M.random(-i, i);
|
|
193
|
+
const h = M.random(0, Math.PI * 2), y = M.random(0.5, 1.5);
|
|
194
|
+
r.vx = Math.cos(h) * y, r.vy = Math.sin(h) * y, r.scale = M.random(0.5, 1.2), r.color = m;
|
|
195
|
+
const A = M.random(2, 5);
|
|
196
|
+
x(r.el, {
|
|
197
|
+
width: `${A}px`,
|
|
198
|
+
height: `${A}px`,
|
|
199
|
+
backgroundColor: m,
|
|
200
|
+
opacity: "1"
|
|
201
|
+
}), D(r.el, r.x, r.y, 0, r.scale, r.scale);
|
|
132
202
|
};
|
|
133
203
|
return N(
|
|
134
204
|
{
|
|
135
|
-
name: t.name
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
205
|
+
name: t.name ?? "sparkles",
|
|
206
|
+
create: () => {
|
|
207
|
+
const d = j("div");
|
|
208
|
+
x(d, { zIndex: U.TRACE });
|
|
209
|
+
for (let p = 0; p < e; p++) {
|
|
210
|
+
const m = _(0, "transparent");
|
|
211
|
+
x(m, {
|
|
141
212
|
opacity: "0",
|
|
142
|
-
willChange: "transform, opacity"
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
el: c,
|
|
213
|
+
willChange: "transform, opacity"
|
|
214
|
+
}), d.appendChild(m), c.push({
|
|
215
|
+
el: m,
|
|
146
216
|
isActive: !1,
|
|
147
217
|
x: 0,
|
|
148
218
|
y: 0,
|
|
@@ -153,52 +223,62 @@ const q = (t) => {
|
|
|
153
223
|
color: ""
|
|
154
224
|
});
|
|
155
225
|
}
|
|
226
|
+
return d;
|
|
156
227
|
},
|
|
157
|
-
update(
|
|
158
|
-
const { x:
|
|
159
|
-
|
|
160
|
-
const
|
|
161
|
-
if (
|
|
162
|
-
const
|
|
163
|
-
for (let
|
|
164
|
-
const
|
|
165
|
-
|
|
228
|
+
update: (d, p, m) => {
|
|
229
|
+
const r = m / 1e3, { x: h, y } = d.state.pointer;
|
|
230
|
+
n || (C = h, u = y, n = !0);
|
|
231
|
+
const A = h - C, b = y - u, v = Math.hypot(A, b);
|
|
232
|
+
if (o += v, o > a) {
|
|
233
|
+
const S = g(d.state), l = Math.floor(o / a);
|
|
234
|
+
for (let s = 0; s < l; s++) {
|
|
235
|
+
const w = s / l;
|
|
236
|
+
z(C + A * w, u + b * w, S);
|
|
166
237
|
}
|
|
167
|
-
|
|
238
|
+
o = o % a;
|
|
168
239
|
}
|
|
169
|
-
|
|
170
|
-
for (let
|
|
171
|
-
const
|
|
172
|
-
if (
|
|
173
|
-
if (
|
|
174
|
-
|
|
240
|
+
C = h, u = y;
|
|
241
|
+
for (let S = 0; S < e; S++) {
|
|
242
|
+
const l = c[S];
|
|
243
|
+
if (l.isActive)
|
|
244
|
+
if (l.x += l.vx * r * 60, l.y += l.vy * r * 60, l.life -= f * r, l.life <= 0)
|
|
245
|
+
l.isActive = !1, x(l.el, { opacity: "0" });
|
|
175
246
|
else {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
n.setTransform(e.el, e.x, e.y, 0, g, g);
|
|
247
|
+
const s = l.scale * l.life;
|
|
248
|
+
x(l.el, { opacity: String(l.life) }), D(l.el, l.x, l.y, 0, s, s);
|
|
179
249
|
}
|
|
180
250
|
}
|
|
181
251
|
},
|
|
182
|
-
destroy() {
|
|
183
|
-
|
|
252
|
+
destroy: () => {
|
|
253
|
+
c.length = 0;
|
|
184
254
|
}
|
|
185
255
|
},
|
|
186
256
|
t
|
|
187
257
|
);
|
|
188
258
|
};
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
259
|
+
function dt(t, e) {
|
|
260
|
+
return e ? t + " " : t;
|
|
261
|
+
}
|
|
262
|
+
let ft = 0;
|
|
263
|
+
const pt = (t = {}) => {
|
|
264
|
+
let e, f, a, i, g, c;
|
|
265
|
+
const C = `supermouse-text-ring-path-${ft++}`, u = X(t, {
|
|
266
|
+
text: "SUPERMOUSE • SUPERMOUSE • ",
|
|
267
|
+
radius: 60,
|
|
268
|
+
fontSize: 12,
|
|
269
|
+
speed: 30,
|
|
270
|
+
opacity: 1,
|
|
271
|
+
color: "currentColor"
|
|
272
|
+
}), n = t.className ?? "", o = t.spread ?? !0;
|
|
273
|
+
let z = 0, d = "", p = 0, m = 0;
|
|
194
274
|
return N(
|
|
195
275
|
{
|
|
196
|
-
name: "text-ring",
|
|
276
|
+
name: t.name ?? "text-ring",
|
|
197
277
|
selector: "[data-supermouse-text-ring]",
|
|
198
|
-
create: (
|
|
199
|
-
const
|
|
200
|
-
|
|
201
|
-
zIndex:
|
|
278
|
+
create: (r) => {
|
|
279
|
+
const h = j("div");
|
|
280
|
+
x(h, {
|
|
281
|
+
zIndex: U.FOLLOWER,
|
|
202
282
|
transition: "opacity 0.2s ease",
|
|
203
283
|
opacity: "1",
|
|
204
284
|
width: "0px",
|
|
@@ -207,34 +287,61 @@ const J = (t = {}) => {
|
|
|
207
287
|
display: "flex",
|
|
208
288
|
alignItems: "center",
|
|
209
289
|
justifyContent: "center"
|
|
210
|
-
}),
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
290
|
+
}), n && h.classList.add(...n.split(" ").filter(Boolean)), e = G("svg"), x(e, {
|
|
291
|
+
overflow: "visible",
|
|
292
|
+
position: "absolute",
|
|
293
|
+
left: "0",
|
|
294
|
+
top: "0"
|
|
295
|
+
}), f = it(void 0, { id: C, fill: "none" });
|
|
296
|
+
const y = u.fontSize(r.state);
|
|
297
|
+
return m = y, i = at({ "font-size": `${y}px`, fill: "currentColor" }), x(i, {
|
|
298
|
+
textTransform: "uppercase",
|
|
299
|
+
letterSpacing: "2px"
|
|
300
|
+
}), a = lt(`#${C}`, { startOffset: "0%" }), g = document.createTextNode(""), a.appendChild(g), i.appendChild(a), e.appendChild(f), e.appendChild(i), c = G("text"), x(c, {
|
|
301
|
+
visibility: "hidden",
|
|
302
|
+
position: "absolute",
|
|
303
|
+
pointerEvents: "none",
|
|
304
|
+
whiteSpace: "nowrap"
|
|
305
|
+
}), c.setAttribute("font-size", `${y}px`), c.setAttribute("font-family", getComputedStyle(i).fontFamily || "sans-serif"), c.setAttribute("font-weight", getComputedStyle(i).fontWeight || "normal"), c.setAttribute("font-style", getComputedStyle(i).fontStyle || "normal"), e.appendChild(c), h.appendChild(e), h;
|
|
216
306
|
},
|
|
217
|
-
update: (
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
307
|
+
update: (r, h, y) => {
|
|
308
|
+
const A = y / 1e3;
|
|
309
|
+
let b = u.text(r.state);
|
|
310
|
+
const v = u.radius(r.state), S = u.fontSize(r.state), l = u.speed(r.state), s = u.opacity(r.state), w = u.color(r.state);
|
|
311
|
+
x(h, { color: w, opacity: String(s) });
|
|
312
|
+
const $ = r.state.interaction;
|
|
313
|
+
if ($.textRing && typeof $.textRing == "string" ? b = $.textRing : $.text && typeof $.text == "string" && (b = $.text), v !== p) {
|
|
314
|
+
f.setAttribute("d", st(v));
|
|
315
|
+
const k = v * 2;
|
|
316
|
+
x(e, {
|
|
317
|
+
width: `${k}px`,
|
|
318
|
+
height: `${k}px`
|
|
319
|
+
}), p = v;
|
|
320
|
+
}
|
|
321
|
+
const T = dt(b, o);
|
|
322
|
+
if (S !== m && (i.setAttribute("font-size", `${S}px`), c.setAttribute("font-size", `${S}px`), m = S), T !== d && (g.textContent = T, d = T), o) {
|
|
323
|
+
const k = ot(v);
|
|
324
|
+
c.textContent = T;
|
|
325
|
+
const H = c.getComputedTextLength(), I = T.length;
|
|
326
|
+
if (I > 1) {
|
|
327
|
+
const E = (k - H) / (I - 1);
|
|
328
|
+
x(i, { letterSpacing: `${E}px` });
|
|
329
|
+
} else
|
|
330
|
+
x(i, { letterSpacing: "0px" });
|
|
331
|
+
i.removeAttribute("textLength"), a.removeAttribute("textLength"), a.removeAttribute("lengthAdjust");
|
|
225
332
|
} else
|
|
226
|
-
i.removeAttribute("textLength"),
|
|
227
|
-
|
|
228
|
-
const { x:
|
|
229
|
-
|
|
333
|
+
x(i, { letterSpacing: "2px" }), i.removeAttribute("textLength"), a.removeAttribute("textLength"), a.removeAttribute("lengthAdjust");
|
|
334
|
+
z += l * A;
|
|
335
|
+
const { x: F, y: O } = r.state.smooth;
|
|
336
|
+
D(h, F, O, z);
|
|
230
337
|
}
|
|
231
338
|
},
|
|
232
339
|
t
|
|
233
340
|
);
|
|
234
341
|
};
|
|
235
342
|
export {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
343
|
+
xt as SmartIcon,
|
|
344
|
+
gt as SmartRing,
|
|
345
|
+
yt as Sparkles,
|
|
346
|
+
pt as TextRing
|
|
240
347
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
(function(L,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.SupermouseLabs={},L.SupermouseUtils))})(this,(function(L,e){"use strict";function U(t,r){const m=t.tagName.toLowerCase();if(m==="input"||m==="textarea"||t.isContentEditable){const i=t.type;if(["button","submit","checkbox","radio","range","color"].includes(i)){if(r.pointer)return"pointer"}else if(r.text)return"text"}else if((m==="a"||m==="button"||t.closest("a")||t.closest("button"))&&r.pointer)return"pointer";if(r.text&&["p","span","h1","h2","h3","h4","h5","h6","li","blockquote","code","pre"].includes(m))return"text";if(r.text||r.grab){const i=window.getComputedStyle(t).cursor;if(r.text&&i==="text")return"text";if(r.grab&&i==="grab")return"grab"}return null}const q=t=>{let r,m=t.defaultState??"default",i=null,c,x="idle",d=0,C=m,h=null,o=0,a=0,z=0;const f=e.normalizeAll(t,{size:24,color:"",followStrategy:"smooth",anchor:"center",rotateWithVelocity:!1}),p=t.useSemanticTags??!0,g=t.transitionDuration??200,n=t.switchDelay??80,u=t.offset?.[0]??0,y=t.offset?.[1]??0,T=t.defaultState??"default",b=g/2;function v(s){e.css(r,{transform:`scale(${s})`})}function S(s){m=s,r.innerHTML=t.icons[s]??""}let l;return e.definePlugin({name:t.name??"smart-icon",selector:"[data-supermouse-icon]",create:s=>{const A=e.createActor("div");return e.css(A,{zIndex:e.Layers.CURSOR}),p&&s.registerHoverTarget("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre"),r=e.createActor("div"),e.css(r,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",transformOrigin:"center center",transform:"scale(1)",transition:`transform ${b}ms cubic-bezier(0.16, 1, 0.3, 1)`}),r.innerHTML=t.icons[m]??"",e.injectStyles("supermouse-smart-icon-styles",`
|
|
2
|
+
@keyframes sm {
|
|
3
|
+
0% { transform: rotate(0deg); }
|
|
4
|
+
100% { transform: rotate(360deg); }
|
|
5
|
+
}
|
|
6
|
+
.supermouse-spin {
|
|
7
|
+
animation: sm 1s linear infinite;
|
|
8
|
+
}
|
|
9
|
+
`),l=s.state.cursorMode,s.setCursor("custom"),A.appendChild(r),A},update:(s,A,w)=>{const $=performance.now(),j=w/1e3,W=t.icons,M=s.state.hoverTarget,D=!!M,I=D&&M!==i;let R=T;if(D){I&&(i=M,c=p?U(M,W):null);const E=s.state.interaction?.icon;E&&W[E]?R=E:c&&(R=c)}else i&&(i=null,c=null);R!==m&&x==="idle"?!!W[R]||R===T?I?(S(R),v(1),h=null,o=0):R!==h?(h=R,o=0):(o+=w,o>=n&&(C=R,x="out",d=$,v(0),h=null,o=0)):(h=null,o=0):R===m&&(h=null,o=0),x==="out"&&$-d>=b&&(S(C),x="in",d=$,v(0)),x==="in"&&$-d>=b&&(x="idle",v(1));const k=f.size(s.state),_=f.color(s.state);e.css(A,{width:`${k}px`,height:`${k}px`,color:_||"inherit"});let P=0,O=0;const F=k/2;switch(f.anchor(s.state)){case"center":P=-F,O=-F;break;case"top-left":P=0,O=0;break;case"top-right":P=-k,O=0;break;case"bottom-left":P=0,O=-k;break;case"bottom-right":P=-k,O=-k;break}const J=m==="pointer"||m==="text";if(f.rotateWithVelocity(s.state)&&!J&&!s.state.reducedMotion){const{x:E,y:H}=s.state.velocity;e.math.dist(E,H)>1&&(z=e.math.angle(E,H));const Q=1-Math.exp(-20*j);a=e.math.lerpAngle(a,z,Q)}else{const E=1-Math.exp(-20*j);a=e.math.lerpAngle(a,0,E)}const V=f.followStrategy(s.state)==="raw"?s.state.pointer:s.state.smooth,K=`translate3d(${V.x+u+P}px, ${V.y+y+O}px, 0) rotate(${a}deg)`;A.style.transform=K},cleanup(s){s.setCursor(l)}},t)},N=(t={})=>{const r=e.normalizeAll(t,{size:20,hoverSize:40,color:"#ffffff",fill:"transparent",borderWidth:2});let m=20,i=20,c=0,x=1,d=1;const C=150;let h=null;return e.definePlugin({name:t.name??"smart-ring",selector:"[data-supermouse-color]",create:o=>{const a=e.createCircle(r.size(o.state),r.fill(o.state));return e.css(a,{zIndex:e.Layers.FOLLOWER,mixBlendMode:t.mixBlendMode??"difference",transition:"border-radius 0.2s ease",borderStyle:"solid",opacity:"0"}),a},onEnable(o,a){const z=r.size(o.state);m=z*.5,i=z*.5,c=0,x=1,d=1,clearTimeout(h??void 0),a.style.display="block",a.style.opacity="1",a.style.transition="border-radius 0.2s ease"},beforeDisable(o,a){const{x:z,y:f}=o.state.smooth;return a.style.transition=`opacity ${C}ms ease, transform ${C}ms ease`,a.style.opacity="0",e.setTransform(a,z,f,0,.2,.2),new Promise(p=>{h=setTimeout(()=>{a.style.transition="border-radius 0.2s ease",p()},C)})},update:(o,a,z)=>{if(a.style.display==="none")return;const f=z/1e3,p=r.size(o.state),g=o.state.shape;let n=p,u=p,y="50%",T=r.color(o.state);g?(n=g.width,u=g.height,y=`${g.borderRadius}px`):(o.state.isHover&&(n=r.hoverSize(o.state),u=r.hoverSize(o.state)),o.state.isDown&&(n*=.9,u*=.9)),o.state.interaction.color&&(T=o.state.interaction.color),m=e.damp(m,n,20,f),i=e.damp(i,u,20,f),e.css(a,{width:`${m}px`,height:`${i}px`,borderRadius:y,borderColor:T,backgroundColor:r.fill(o.state),borderWidth:`${r.borderWidth(o.state)}px`,opacity:"1"});let b=0,v=1,S=1;if(!g&&t.enableSkew&&!o.state.reducedMotion){const{displacement:A}=o.state,w=e.effects.getVelocityDistortion(A.x,A.y);b=w.rotation,v=w.scaleX,S=w.scaleY;const $=1-Math.exp(-20*f);c=e.lerpAngle(c,b,$)}else c=0;x=e.damp(x,v,20,f),d=e.damp(d,S,20,f);const{x:l,y:s}=o.state.smooth;e.setTransform(a,l,s,c,x,d)}},t)},X=(t={})=>{const r=t.count??30,m=t.decay??2.5,i=t.frequency??10,c=t.scatter??5,x=e.normalize(t.color,"#ff00ff"),d=[];let C=0,h=0,o=!1,a=0;const z=(f,p,g)=>{const n=d.find(b=>!b.isActive);if(!n)return;n.isActive=!0,n.life=1,n.x=f+e.math.random(-c,c),n.y=p+e.math.random(-c,c);const u=e.math.random(0,Math.PI*2),y=e.math.random(.5,1.5);n.vx=Math.cos(u)*y,n.vy=Math.sin(u)*y,n.scale=e.math.random(.5,1.2),n.color=g;const T=e.math.random(2,5);e.css(n.el,{width:`${T}px`,height:`${T}px`,backgroundColor:g,opacity:"1"}),e.setTransform(n.el,n.x,n.y,0,n.scale,n.scale)};return e.definePlugin({name:t.name??"sparkles",create:()=>{const f=e.createActor("div");e.css(f,{zIndex:e.Layers.TRACE});for(let p=0;p<r;p++){const g=e.createCircle(0,"transparent");e.css(g,{opacity:"0",willChange:"transform, opacity"}),f.appendChild(g),d.push({el:g,isActive:!1,x:0,y:0,vx:0,vy:0,life:0,scale:1,color:""})}return f},update:(f,p,g)=>{const n=g/1e3,{x:u,y}=f.state.pointer;o||(C=u,h=y,o=!0);const T=u-C,b=y-h,v=Math.hypot(T,b);if(a+=v,a>i){const S=x(f.state),l=Math.floor(a/i);for(let s=0;s<l;s++){const A=s/l;z(C+T*A,h+b*A,S)}a=a%i}C=u,h=y;for(let S=0;S<r;S++){const l=d[S];if(l.isActive)if(l.x+=l.vx*n*60,l.y+=l.vy*n*60,l.life-=m*n,l.life<=0)l.isActive=!1,e.css(l.el,{opacity:"0"});else{const s=l.scale*l.life;e.css(l.el,{opacity:String(l.life)}),e.setTransform(l.el,l.x,l.y,0,s,s)}}},destroy:()=>{d.length=0}},t)};function Y(t,r){return r?t+" ":t}let B=0;const G=(t={})=>{let r,m,i,c,x,d;const C=`supermouse-text-ring-path-${B++}`,h=e.normalizeAll(t,{text:"SUPERMOUSE • SUPERMOUSE • ",radius:60,fontSize:12,speed:30,opacity:1,color:"currentColor"}),o=t.className??"",a=t.spread??!0;let z=0,f="",p=0,g=0;return e.definePlugin({name:t.name??"text-ring",selector:"[data-supermouse-text-ring]",create:n=>{const u=e.createActor("div");e.css(u,{zIndex:e.Layers.FOLLOWER,transition:"opacity 0.2s ease",opacity:"1",width:"0px",height:"0px",overflow:"visible",display:"flex",alignItems:"center",justifyContent:"center"}),o&&u.classList.add(...o.split(" ").filter(Boolean)),r=e.createSVGElement("svg"),e.css(r,{overflow:"visible",position:"absolute",left:"0",top:"0"}),m=e.path(void 0,{id:C,fill:"none"});const y=h.fontSize(n.state);return g=y,c=e.text({"font-size":`${y}px`,fill:"currentColor"}),e.css(c,{textTransform:"uppercase",letterSpacing:"2px"}),i=e.textPath(`#${C}`,{startOffset:"0%"}),x=document.createTextNode(""),i.appendChild(x),c.appendChild(i),r.appendChild(m),r.appendChild(c),d=e.createSVGElement("text"),e.css(d,{visibility:"hidden",position:"absolute",pointerEvents:"none",whiteSpace:"nowrap"}),d.setAttribute("font-size",`${y}px`),d.setAttribute("font-family",getComputedStyle(c).fontFamily||"sans-serif"),d.setAttribute("font-weight",getComputedStyle(c).fontWeight||"normal"),d.setAttribute("font-style",getComputedStyle(c).fontStyle||"normal"),r.appendChild(d),u.appendChild(r),u},update:(n,u,y)=>{const T=y/1e3;let b=h.text(n.state);const v=h.radius(n.state),S=h.fontSize(n.state),l=h.speed(n.state),s=h.opacity(n.state),A=h.color(n.state);e.css(u,{color:A,opacity:String(s)});const w=n.state.interaction;if(w.textRing&&typeof w.textRing=="string"?b=w.textRing:w.text&&typeof w.text=="string"&&(b=w.text),v!==p){m.setAttribute("d",e.circlePath(v));const M=v*2;e.css(r,{width:`${M}px`,height:`${M}px`}),p=v}const $=Y(b,a);if(S!==g&&(c.setAttribute("font-size",`${S}px`),d.setAttribute("font-size",`${S}px`),g=S),$!==f&&(x.textContent=$,f=$),a){const M=e.circumference(v);d.textContent=$;const D=d.getComputedTextLength(),I=$.length;if(I>1){const k=(M-D)/(I-1);e.css(c,{letterSpacing:`${k}px`})}else e.css(c,{letterSpacing:"0px"});c.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust")}else e.css(c,{letterSpacing:"2px"}),c.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust");z+=l*T;const{x:j,y:W}=n.state.smooth;e.setTransform(u,j,W,z)}},t)};L.SmartIcon=q,L.SmartRing=N,L.Sparkles=X,L.TextRing=G,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));
|