@liiift-studio/magnettype 1.1.0 → 1.1.1
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.cjs +1 -1
- package/dist/index.js +134 -135
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),K=require("react/jsx-runtime"),G={i:3,l:3,1:3,I:3,r:2,n:1,m:1,0:2,O:2,o:1,b:1,d:1,p:1,q:1,c:1,e:1},R={word:"mt-word",char:"mt-char",probe:"mt-probe"}
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),K=require("react/jsx-runtime"),G={i:3,l:3,1:3,I:3,r:2,n:1,m:1,0:2,O:2,o:1,b:1,d:1,p:1,q:1,c:1,e:1},R={word:"mt-word",char:"mt-char",probe:"mt-probe"},$={axes:{wght:[300,500]},radius:120,falloff:"quadratic",magnetMode:"attract",wdthBoost:6,scope:"document"};function _(t,o=[]){return t.nodeType===Node.TEXT_NODE?o.push(t):t.childNodes.forEach(r=>_(r,o)),o}function H(t,o,r){if(!t||t==="normal")return`"${o}" ${r}`;const l=new RegExp(`(["'])${o}\\1\\s+[\\d.eE+-]+`),c=`"${o}" ${r}`;return l.test(t)?t.replace(l,c):`${t}, ${c}`}function J(t,o){let r=t;for(const[l,c]of Object.entries(o))r=H(r,l,c);return r}function U(t,o,r){if(o.opacity!==void 0){const[l,c]=o.opacity;t.style.opacity=String(l+(c-l)*r)}o.italic===!0&&(t.style.fontStyle=r>.5?"italic":"")}function P(t,o){o.opacity!==void 0&&(t.style.opacity=String(o.opacity[0])),o.italic===!0&&(t.style.fontStyle="")}function z(t){const o=t.cloneNode(!0),r=o.querySelectorAll(`.${R.word}, .${R.char}`);return Array.from(r).reverse().forEach(c=>{const a=c.parentNode;if(a){for(;c.firstChild;)a.insertBefore(c.firstChild,c);a.removeChild(c)}}),o.innerHTML}function ot(t,o){t.innerHTML=o}function Q(t,o,r={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.innerHTML=o,()=>{};const l=r.wdthBoost??$.wdthBoost,c=r.radius??$.radius,a=r.falloff??$.falloff,T=r.scope??$.scope,v=r.props,d=r.transitionMs??0,S=window.scrollY;t.innerHTML=o;const L=getComputedStyle(t).fontVariationSettings,b=L.match(/"wdth"\s+([\d.eE+-]+)/),y=b?parseFloat(b[1]):100,A=_(t),w=[];for(const n of A){const e=n.textContent??"";if(!e||!e.split("").some(m=>m in G))continue;const h=document.createDocumentFragment();for(const m of e){const B=G[m];if(B===void 0){const E=h.lastChild;E&&E.nodeType===Node.TEXT_NODE?E.textContent+=m:h.appendChild(document.createTextNode(m))}else{const E=document.createElement("span");E.className=R.char,E.style.fontVariationSettings=H(L,"wdth",y),E.textContent=m,h.appendChild(E),w.push({span:E,riskLevel:B})}}n.parentNode.replaceChild(h,n)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-S)>2&&window.scrollTo({top:S,behavior:"instant"})}),w.length===0)return()=>{};v&&w.forEach(({span:n})=>P(n,v));let p=-9999,q=-9999,g=!1,i=0,V=!0,s=null;function f(){if(!V)return;if(!g){w.forEach(({span:e})=>{d>0&&(e.style.transition=`font-variation-settings ${d}ms ease`),e.style.fontVariationSettings=H(L,"wdth",y),v&&P(e,v)}),d>0&&(s!==null&&clearTimeout(s),s=setTimeout(()=>{w.forEach(({span:e})=>{e.style.transition=""}),s=null},d)),i=0;return}const n=w.map(({span:e})=>e.getBoundingClientRect());w.forEach(({span:e,riskLevel:x},h)=>{e.style.transition="";const m=n[h],B=m.left+m.width/2,E=m.top+m.height/2,j=Math.sqrt((p-B)**2+(q-E)**2),O=Math.max(0,1-j/c),Y=a==="quadratic"?O*O:O,X=l*(x/3)*Y;e.style.fontVariationSettings=H(L,"wdth",y+X),v&&U(e,v,Y)}),i=requestAnimationFrame(f)}function N(n){p=n.clientX,q=n.clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(f))}function C(){g=!1,i===0&&(i=requestAnimationFrame(f))}function F(n){n.touches.length!==0&&(p=n.touches[0].clientX,q=n.touches[0].clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(f)))}function k(){g=!1,i===0&&(i=requestAnimationFrame(f))}const u=T==="document"?document:t;return u.addEventListener("mousemove",N),u.addEventListener("mouseleave",C),u.addEventListener("touchmove",F,{passive:!0}),u.addEventListener("touchend",k),()=>{V=!1,cancelAnimationFrame(i),s!==null&&clearTimeout(s),u.removeEventListener("mousemove",N),u.removeEventListener("mouseleave",C),u.removeEventListener("touchmove",F),u.removeEventListener("touchend",k),t.innerHTML=o}}function Z(t,o,r={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.innerHTML=o,()=>{};const l=r.axes??$.axes,c=r.radius??$.radius,a=r.falloff??$.falloff,T=r.magnetMode??$.magnetMode,v=r.scope??$.scope,d=r.props,S=r.transitionMs??0,L=window.scrollY;t.innerHTML=o;const b=_(t),y=[];for(const n of b){const e=n.textContent??"";if(!e.trim())continue;const x=e.split(/(\S+)/),h=document.createDocumentFragment();for(let m=0;m<x.length;m+=2){const B=x[m],E=x[m+1];if(!E)continue;const O=x[m+3]===void 0?x[m+2]??"":"",Y=document.createElement("span");Y.className=R.word,Y.textContent=B+E+O,h.appendChild(Y),y.push(Y)}n.parentNode.replaceChild(h,n)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-L)>2&&window.scrollTo({top:L,behavior:"instant"})}),y.length===0)return()=>{};const A=getComputedStyle(t).fontVariationSettings,w=J(A,Object.fromEntries(Object.entries(l).map(([n,[e]])=>[n,e])));y.forEach(n=>{n.style.fontVariationSettings=w,d&&P(n,d)});let p=-9999,q=-9999,g=!1,i=0,V=!0,s=null;function f(){if(!V)return;if(!g){y.forEach(e=>{S>0&&(e.style.transition=`font-variation-settings ${S}ms ease`),e.style.fontVariationSettings=w,d&&P(e,d)}),S>0&&(s!==null&&clearTimeout(s),s=setTimeout(()=>{y.forEach(e=>{e.style.transition=""}),s=null},S)),i=0;return}const n=y.map(e=>e.getBoundingClientRect());y.forEach((e,x)=>{e.style.transition="";const h=n[x],m=h.left+h.width/2,B=h.top+h.height/2,E=Math.sqrt((p-m)**2+(q-B)**2),j=Math.max(0,1-E/c),O=a==="quadratic"?j*j:j,Y=T==="repel"?1-O:O,X={};for(const D of Object.keys(l)){const[I,nt]=l[D]??[300,500];X[D]=I+(nt-I)*Y}e.style.fontVariationSettings=J(A,X),d&&U(e,d,O)}),i=requestAnimationFrame(f)}function N(n){p=n.clientX,q=n.clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(f))}function C(){g=!1,i===0&&(i=requestAnimationFrame(f))}function F(n){n.touches.length!==0&&(p=n.touches[0].clientX,q=n.touches[0].clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(f)))}function k(){g=!1,i===0&&(i=requestAnimationFrame(f))}const u=v==="document"?document:t;return u.addEventListener("mousemove",N),u.addEventListener("mouseleave",C),u.addEventListener("touchmove",F,{passive:!0}),u.addEventListener("touchend",k),()=>{V=!1,cancelAnimationFrame(i),s!==null&&clearTimeout(s),u.removeEventListener("mousemove",N),u.removeEventListener("mouseleave",C),u.removeEventListener("touchmove",F),u.removeEventListener("touchend",k),t.innerHTML=o}}function W(t){const o=M.useRef(null),r=M.useRef(null),l=M.useRef(t);l.current=t;const c=M.useRef(null),a=t.mode??"field",{axes:T,radius:v,falloff:d,magnetMode:S,wdthBoost:L,scope:b}=t,y=T?JSON.stringify(T):void 0,A=t.props?JSON.stringify(t.props):void 0,w=M.useCallback(()=>{const p=o.current;if(!p)return;r.current===null&&(r.current=z(p)),c.current&&(c.current(),c.current=null),(l.current.mode??"field")==="field"?c.current=Z(p,r.current,l.current):c.current=Q(p,r.current,l.current)},[a,y,v,d,S,L,b,A]);return M.useLayoutEffect(()=>(w(),()=>{c.current&&(c.current(),c.current=null)}),[w]),M.useEffect(()=>{document.fonts.ready.then(w)},[w]),o}const tt=M.forwardRef(function({children:o,as:r="p",className:l,style:c,...a},T){const v=W(a),d=M.useCallback(S=>{v.current=S,typeof T=="function"?T(S):T&&(T.current=S)},[T]);return K.jsx(r,{ref:d,className:l,style:c,children:o})});tt.displayName="MagnetTypeText";const et=M.forwardRef(function({children:o,as:r="p",className:l,style:c,minWeight:a=300,maxWeight:T=600,proximityRadius:v,spreadRadius:d,fixedAxes:S={}},L){const b=M.useRef(null),y=M.useRef(null),A=M.useRef([]),w=M.useCallback(s=>{b.current=s,typeof L=="function"?L(s):L&&(L.current=s)},[L]);function p(s){const f=[`'wght' ${s.toFixed(0)}`];for(const[N,C]of Object.entries(S))f.push(`'${N}' ${C}`);return f.join(", ")}M.useEffect(()=>{var k;if(!d)return;const s=b.current;if(!s)return;const f=[],N=document.createTreeWalker(s,NodeFilter.SHOW_TEXT),C=[];let F;for(;F=N.nextNode();)C.push(F);for(const u of C){const n=u.textContent??"";if(!n)continue;const e=document.createDocumentFragment();for(const x of n)if(/\s/.test(x))e.appendChild(document.createTextNode(x));else{const h=document.createElement("span");h.style.fontVariationSettings=p(a),h.textContent=x,f.push(h),e.appendChild(h)}(k=u.parentNode)==null||k.replaceChild(e,u)}A.current=f},[]);function q(s,f){const N=b.current;if(!N)return;const C=N.getBoundingClientRect(),F=Math.max(C.left-s,0,s-C.right),k=Math.max(C.top-f,0,f-C.bottom),u=Math.sqrt(F*F+k*k);if(v!==void 0&&!d){const e=1-(1-Math.max(0,1-u/v))**2;N.style.fontVariationSettings=p(a+(T-a)*e);return}if(d){if(v!==void 0&&u>v){N.style.fontVariationSettings=p(a);for(const n of A.current)n.style.fontVariationSettings=p(a);return}for(const n of A.current){const e=n.getBoundingClientRect(),x=(e.left+e.right)/2,h=(e.top+e.bottom)/2,m=Math.sqrt((s-x)**2+(f-h)**2),E=1-(1-Math.max(0,1-m/d))**2;n.style.fontVariationSettings=p(a+(T-a)*E)}}}const g=M.useCallback(s=>{y.current={x:s.clientX,y:s.clientY},q(s.clientX,s.clientY)},[a,T,v,d]),i=M.useCallback(()=>{y.current&&q(y.current.x,y.current.y)},[a,T,v,d]),V=M.useCallback(()=>{y.current=null;const s=b.current;s&&(s.style.fontVariationSettings=p(a));for(const f of A.current)f.style.fontVariationSettings=p(a)},[a]);return M.useEffect(()=>(window.addEventListener("mousemove",g,{passive:!0}),window.addEventListener("scroll",i,{passive:!0,capture:!0}),document.documentElement.addEventListener("mouseleave",V),()=>{window.removeEventListener("mousemove",g),window.removeEventListener("scroll",i,{capture:!0}),document.documentElement.removeEventListener("mouseleave",V)}),[g,i,V]),K.jsx(r,{ref:w,className:l,style:{fontVariationSettings:p(a),...c},children:o})});et.displayName="MagnetBlock";exports.MAGNET_TYPE_CLASSES=R;exports.MagnetBlock=et;exports.MagnetTypeText=tt;exports.applyMagnetType=Q;exports.getCleanHTML=z;exports.removeMagnetType=ot;exports.startMagnetType=Z;exports.useMagnetType=W;
|
package/dist/index.js
CHANGED
|
@@ -42,19 +42,19 @@ function J(t, o = []) {
|
|
|
42
42
|
}
|
|
43
43
|
function D(t, o, r) {
|
|
44
44
|
if (!t || t === "normal") return `"${o}" ${r}`;
|
|
45
|
-
const
|
|
46
|
-
return
|
|
45
|
+
const f = new RegExp(`(["'])${o}\\1\\s+[\\d.eE+-]+`), c = `"${o}" ${r}`;
|
|
46
|
+
return f.test(t) ? t.replace(f, c) : `${t}, ${c}`;
|
|
47
47
|
}
|
|
48
48
|
function R(t, o) {
|
|
49
49
|
let r = t;
|
|
50
|
-
for (const [
|
|
51
|
-
r = D(r,
|
|
50
|
+
for (const [f, c] of Object.entries(o))
|
|
51
|
+
r = D(r, f, c);
|
|
52
52
|
return r;
|
|
53
53
|
}
|
|
54
54
|
function Z(t, o, r) {
|
|
55
55
|
if (o.opacity !== void 0) {
|
|
56
|
-
const [
|
|
57
|
-
t.style.opacity = String(
|
|
56
|
+
const [f, c] = o.opacity;
|
|
57
|
+
t.style.opacity = String(f + (c - f) * r);
|
|
58
58
|
}
|
|
59
59
|
o.italic === !0 && (t.style.fontStyle = r > 0.5 ? "italic" : "");
|
|
60
60
|
}
|
|
@@ -66,10 +66,10 @@ function et(t) {
|
|
|
66
66
|
`.${I.word}, .${I.char}`
|
|
67
67
|
);
|
|
68
68
|
return Array.from(r).reverse().forEach((c) => {
|
|
69
|
-
const
|
|
70
|
-
if (
|
|
71
|
-
for (; c.firstChild; )
|
|
72
|
-
|
|
69
|
+
const a = c.parentNode;
|
|
70
|
+
if (a) {
|
|
71
|
+
for (; c.firstChild; ) a.insertBefore(c.firstChild, c);
|
|
72
|
+
a.removeChild(c);
|
|
73
73
|
}
|
|
74
74
|
}), o.innerHTML;
|
|
75
75
|
}
|
|
@@ -82,65 +82,65 @@ function nt(t, o, r = {}) {
|
|
|
82
82
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
|
|
83
83
|
return t.innerHTML = o, () => {
|
|
84
84
|
};
|
|
85
|
-
const
|
|
85
|
+
const f = r.wdthBoost ?? Y.wdthBoost, c = r.radius ?? Y.radius, a = r.falloff ?? Y.falloff, w = r.scope ?? Y.scope, v = r.props, d = r.transitionMs ?? 0, x = window.scrollY;
|
|
86
86
|
t.innerHTML = o;
|
|
87
87
|
const L = getComputedStyle(t).fontVariationSettings, N = L.match(/"wdth"\s+([\d.eE+-]+)/), y = N ? parseFloat(N[1]) : 100, A = J(t), M = [];
|
|
88
|
-
for (const
|
|
89
|
-
const
|
|
90
|
-
if (!
|
|
91
|
-
const
|
|
92
|
-
for (const
|
|
93
|
-
const
|
|
94
|
-
if (
|
|
95
|
-
const E =
|
|
96
|
-
E && E.nodeType === Node.TEXT_NODE ? E.textContent +=
|
|
88
|
+
for (const n of A) {
|
|
89
|
+
const e = n.textContent ?? "";
|
|
90
|
+
if (!e || !e.split("").some((m) => m in G)) continue;
|
|
91
|
+
const p = document.createDocumentFragment();
|
|
92
|
+
for (const m of e) {
|
|
93
|
+
const B = G[m];
|
|
94
|
+
if (B === void 0) {
|
|
95
|
+
const E = p.lastChild;
|
|
96
|
+
E && E.nodeType === Node.TEXT_NODE ? E.textContent += m : p.appendChild(document.createTextNode(m));
|
|
97
97
|
} else {
|
|
98
98
|
const E = document.createElement("span");
|
|
99
|
-
E.className = I.char, E.style.fontVariationSettings = D(L, "wdth", y), E.textContent =
|
|
99
|
+
E.className = I.char, E.style.fontVariationSettings = D(L, "wdth", y), E.textContent = m, p.appendChild(E), M.push({ span: E, riskLevel: B });
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
|
|
102
|
+
n.parentNode.replaceChild(p, n);
|
|
103
103
|
}
|
|
104
104
|
if (requestAnimationFrame(() => {
|
|
105
105
|
typeof window < "u" && Math.abs(window.scrollY - x) > 2 && window.scrollTo({ top: x, behavior: "instant" });
|
|
106
106
|
}), M.length === 0) return () => {
|
|
107
107
|
};
|
|
108
|
-
v && M.forEach(({ span:
|
|
109
|
-
let
|
|
110
|
-
function
|
|
108
|
+
v && M.forEach(({ span: n }) => P(n, v));
|
|
109
|
+
let h = -9999, q = -9999, g = !1, i = 0, V = !0, s = null;
|
|
110
|
+
function l() {
|
|
111
111
|
if (!V) return;
|
|
112
112
|
if (!g) {
|
|
113
|
-
M.forEach(({ span:
|
|
114
|
-
|
|
115
|
-
}),
|
|
116
|
-
M.forEach(({ span:
|
|
117
|
-
|
|
113
|
+
M.forEach(({ span: e }) => {
|
|
114
|
+
d > 0 && (e.style.transition = `font-variation-settings ${d}ms ease`), e.style.fontVariationSettings = D(L, "wdth", y), v && P(e, v);
|
|
115
|
+
}), d > 0 && (s !== null && clearTimeout(s), s = setTimeout(() => {
|
|
116
|
+
M.forEach(({ span: e }) => {
|
|
117
|
+
e.style.transition = "";
|
|
118
118
|
}), s = null;
|
|
119
|
-
},
|
|
119
|
+
}, d)), i = 0;
|
|
120
120
|
return;
|
|
121
121
|
}
|
|
122
|
-
const
|
|
123
|
-
M.forEach(({ span:
|
|
124
|
-
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
}), i = requestAnimationFrame(
|
|
122
|
+
const n = M.map(({ span: e }) => e.getBoundingClientRect());
|
|
123
|
+
M.forEach(({ span: e, riskLevel: T }, p) => {
|
|
124
|
+
e.style.transition = "";
|
|
125
|
+
const m = n[p], B = m.left + m.width / 2, E = m.top + m.height / 2, X = Math.sqrt((h - B) ** 2 + (q - E) ** 2), O = Math.max(0, 1 - X / c), $ = a === "quadratic" ? O * O : O, H = f * (T / 3) * $;
|
|
126
|
+
e.style.fontVariationSettings = D(L, "wdth", y + H), v && Z(e, v, $);
|
|
127
|
+
}), i = requestAnimationFrame(l);
|
|
128
128
|
}
|
|
129
|
-
function C(
|
|
130
|
-
|
|
129
|
+
function C(n) {
|
|
130
|
+
h = n.clientX, q = n.clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l));
|
|
131
131
|
}
|
|
132
132
|
function S() {
|
|
133
|
-
g = !1, i === 0 && (i = requestAnimationFrame(
|
|
133
|
+
g = !1, i === 0 && (i = requestAnimationFrame(l));
|
|
134
134
|
}
|
|
135
|
-
function F(
|
|
136
|
-
|
|
135
|
+
function F(n) {
|
|
136
|
+
n.touches.length !== 0 && (h = n.touches[0].clientX, q = n.touches[0].clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l)));
|
|
137
137
|
}
|
|
138
138
|
function b() {
|
|
139
|
-
g = !1, i === 0 && (i = requestAnimationFrame(
|
|
139
|
+
g = !1, i === 0 && (i = requestAnimationFrame(l));
|
|
140
140
|
}
|
|
141
|
-
const
|
|
142
|
-
return
|
|
143
|
-
V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s),
|
|
141
|
+
const u = w === "document" ? document : t;
|
|
142
|
+
return u.addEventListener("mousemove", C), u.addEventListener("mouseleave", S), u.addEventListener("touchmove", F, { passive: !0 }), u.addEventListener("touchend", b), () => {
|
|
143
|
+
V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s), u.removeEventListener("mousemove", C), u.removeEventListener("mouseleave", S), u.removeEventListener("touchmove", F), u.removeEventListener("touchend", b), t.innerHTML = o;
|
|
144
144
|
};
|
|
145
145
|
}
|
|
146
146
|
function ot(t, o, r = {}) {
|
|
@@ -149,20 +149,20 @@ function ot(t, o, r = {}) {
|
|
|
149
149
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
|
|
150
150
|
return t.innerHTML = o, () => {
|
|
151
151
|
};
|
|
152
|
-
const
|
|
152
|
+
const f = r.axes ?? Y.axes, c = r.radius ?? Y.radius, a = r.falloff ?? Y.falloff, w = r.magnetMode ?? Y.magnetMode, v = r.scope ?? Y.scope, d = r.props, x = r.transitionMs ?? 0, L = window.scrollY;
|
|
153
153
|
t.innerHTML = o;
|
|
154
154
|
const N = J(t), y = [];
|
|
155
|
-
for (const
|
|
156
|
-
const
|
|
157
|
-
if (!
|
|
158
|
-
const T =
|
|
159
|
-
for (let
|
|
160
|
-
const
|
|
155
|
+
for (const n of N) {
|
|
156
|
+
const e = n.textContent ?? "";
|
|
157
|
+
if (!e.trim()) continue;
|
|
158
|
+
const T = e.split(/(\S+)/), p = document.createDocumentFragment();
|
|
159
|
+
for (let m = 0; m < T.length; m += 2) {
|
|
160
|
+
const B = T[m], E = T[m + 1];
|
|
161
161
|
if (!E) continue;
|
|
162
|
-
const
|
|
163
|
-
|
|
162
|
+
const O = T[m + 3] === void 0 ? T[m + 2] ?? "" : "", $ = document.createElement("span");
|
|
163
|
+
$.className = I.word, $.textContent = B + E + O, p.appendChild($), y.push($);
|
|
164
164
|
}
|
|
165
|
-
|
|
165
|
+
n.parentNode.replaceChild(p, n);
|
|
166
166
|
}
|
|
167
167
|
if (requestAnimationFrame(() => {
|
|
168
168
|
typeof window < "u" && Math.abs(window.scrollY - L) > 2 && window.scrollTo({ top: L, behavior: "instant" });
|
|
@@ -170,60 +170,60 @@ function ot(t, o, r = {}) {
|
|
|
170
170
|
};
|
|
171
171
|
const A = getComputedStyle(t).fontVariationSettings, M = R(
|
|
172
172
|
A,
|
|
173
|
-
Object.fromEntries(Object.entries(
|
|
173
|
+
Object.fromEntries(Object.entries(f).map(([n, [e]]) => [n, e]))
|
|
174
174
|
);
|
|
175
|
-
y.forEach((
|
|
176
|
-
|
|
175
|
+
y.forEach((n) => {
|
|
176
|
+
n.style.fontVariationSettings = M, d && P(n, d);
|
|
177
177
|
});
|
|
178
|
-
let
|
|
179
|
-
function
|
|
178
|
+
let h = -9999, q = -9999, g = !1, i = 0, V = !0, s = null;
|
|
179
|
+
function l() {
|
|
180
180
|
if (!V) return;
|
|
181
181
|
if (!g) {
|
|
182
|
-
y.forEach((
|
|
183
|
-
x > 0 && (
|
|
182
|
+
y.forEach((e) => {
|
|
183
|
+
x > 0 && (e.style.transition = `font-variation-settings ${x}ms ease`), e.style.fontVariationSettings = M, d && P(e, d);
|
|
184
184
|
}), x > 0 && (s !== null && clearTimeout(s), s = setTimeout(() => {
|
|
185
|
-
y.forEach((
|
|
186
|
-
|
|
185
|
+
y.forEach((e) => {
|
|
186
|
+
e.style.transition = "";
|
|
187
187
|
}), s = null;
|
|
188
188
|
}, x)), i = 0;
|
|
189
189
|
return;
|
|
190
190
|
}
|
|
191
|
-
const
|
|
192
|
-
y.forEach((
|
|
193
|
-
|
|
194
|
-
const
|
|
195
|
-
for (const K of Object.keys(
|
|
196
|
-
const [U, W] =
|
|
197
|
-
H[K] = U + (W - U) *
|
|
191
|
+
const n = y.map((e) => e.getBoundingClientRect());
|
|
192
|
+
y.forEach((e, T) => {
|
|
193
|
+
e.style.transition = "";
|
|
194
|
+
const p = n[T], m = p.left + p.width / 2, B = p.top + p.height / 2, E = Math.sqrt((h - m) ** 2 + (q - B) ** 2), X = Math.max(0, 1 - E / c), O = a === "quadratic" ? X * X : X, $ = w === "repel" ? 1 - O : O, H = {};
|
|
195
|
+
for (const K of Object.keys(f)) {
|
|
196
|
+
const [U, W] = f[K] ?? [300, 500];
|
|
197
|
+
H[K] = U + (W - U) * $;
|
|
198
198
|
}
|
|
199
|
-
|
|
200
|
-
}), i = requestAnimationFrame(
|
|
199
|
+
e.style.fontVariationSettings = R(A, H), d && Z(e, d, O);
|
|
200
|
+
}), i = requestAnimationFrame(l);
|
|
201
201
|
}
|
|
202
|
-
function C(
|
|
203
|
-
|
|
202
|
+
function C(n) {
|
|
203
|
+
h = n.clientX, q = n.clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l));
|
|
204
204
|
}
|
|
205
205
|
function S() {
|
|
206
|
-
g = !1, i === 0 && (i = requestAnimationFrame(
|
|
206
|
+
g = !1, i === 0 && (i = requestAnimationFrame(l));
|
|
207
207
|
}
|
|
208
|
-
function F(
|
|
209
|
-
|
|
208
|
+
function F(n) {
|
|
209
|
+
n.touches.length !== 0 && (h = n.touches[0].clientX, q = n.touches[0].clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l)));
|
|
210
210
|
}
|
|
211
211
|
function b() {
|
|
212
|
-
g = !1, i === 0 && (i = requestAnimationFrame(
|
|
212
|
+
g = !1, i === 0 && (i = requestAnimationFrame(l));
|
|
213
213
|
}
|
|
214
|
-
const
|
|
215
|
-
return
|
|
216
|
-
V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s),
|
|
214
|
+
const u = v === "document" ? document : t;
|
|
215
|
+
return u.addEventListener("mousemove", C), u.addEventListener("mouseleave", S), u.addEventListener("touchmove", F, { passive: !0 }), u.addEventListener("touchend", b), () => {
|
|
216
|
+
V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s), u.removeEventListener("mousemove", C), u.removeEventListener("mouseleave", S), u.removeEventListener("touchmove", F), u.removeEventListener("touchend", b), t.innerHTML = o;
|
|
217
217
|
};
|
|
218
218
|
}
|
|
219
219
|
function rt(t) {
|
|
220
|
-
const o = k(null), r = k(null),
|
|
221
|
-
|
|
222
|
-
const c = k(null),
|
|
223
|
-
const
|
|
224
|
-
if (!
|
|
225
|
-
r.current === null && (r.current = et(
|
|
226
|
-
}, [
|
|
220
|
+
const o = k(null), r = k(null), f = k(t);
|
|
221
|
+
f.current = t;
|
|
222
|
+
const c = k(null), a = t.mode ?? "field", { axes: w, radius: v, falloff: d, magnetMode: x, wdthBoost: L, scope: N } = t, y = w ? JSON.stringify(w) : void 0, A = t.props ? JSON.stringify(t.props) : void 0, M = j(() => {
|
|
223
|
+
const h = o.current;
|
|
224
|
+
if (!h) return;
|
|
225
|
+
r.current === null && (r.current = et(h)), c.current && (c.current(), c.current = null), (f.current.mode ?? "field") === "field" ? c.current = ot(h, r.current, f.current) : c.current = nt(h, r.current, f.current);
|
|
226
|
+
}, [a, y, v, d, x, L, N, A]);
|
|
227
227
|
return tt(() => (M(), () => {
|
|
228
228
|
c.current && (c.current(), c.current = null);
|
|
229
229
|
}), [M]), _(() => {
|
|
@@ -231,15 +231,15 @@ function rt(t) {
|
|
|
231
231
|
}, [M]), o;
|
|
232
232
|
}
|
|
233
233
|
const st = z(
|
|
234
|
-
function({ children: o, as: r = "p", className:
|
|
235
|
-
const v = rt(
|
|
234
|
+
function({ children: o, as: r = "p", className: f, style: c, ...a }, w) {
|
|
235
|
+
const v = rt(a), d = j(
|
|
236
236
|
(x) => {
|
|
237
237
|
v.current = x, typeof w == "function" ? w(x) : w && (w.current = x);
|
|
238
238
|
},
|
|
239
239
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
240
240
|
[w]
|
|
241
241
|
);
|
|
242
|
-
return /* @__PURE__ */ Q(r, { ref:
|
|
242
|
+
return /* @__PURE__ */ Q(r, { ref: d, className: f, style: c, children: o });
|
|
243
243
|
}
|
|
244
244
|
);
|
|
245
245
|
st.displayName = "MagnetTypeText";
|
|
@@ -247,12 +247,12 @@ const ct = z(
|
|
|
247
247
|
function({
|
|
248
248
|
children: o,
|
|
249
249
|
as: r = "p",
|
|
250
|
-
className:
|
|
250
|
+
className: f,
|
|
251
251
|
style: c,
|
|
252
|
-
minWeight:
|
|
252
|
+
minWeight: a = 300,
|
|
253
253
|
maxWeight: w = 600,
|
|
254
254
|
proximityRadius: v,
|
|
255
|
-
spreadRadius:
|
|
255
|
+
spreadRadius: d,
|
|
256
256
|
fixedAxes: x = {}
|
|
257
257
|
}, L) {
|
|
258
258
|
const N = k(null), y = k(null), A = k([]), M = j(
|
|
@@ -262,53 +262,52 @@ const ct = z(
|
|
|
262
262
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
263
263
|
[L]
|
|
264
264
|
);
|
|
265
|
-
function
|
|
266
|
-
const
|
|
267
|
-
for (const [C, S] of Object.entries(x))
|
|
268
|
-
return
|
|
265
|
+
function h(s) {
|
|
266
|
+
const l = [`'wght' ${s.toFixed(0)}`];
|
|
267
|
+
for (const [C, S] of Object.entries(x)) l.push(`'${C}' ${S}`);
|
|
268
|
+
return l.join(", ");
|
|
269
269
|
}
|
|
270
270
|
_(() => {
|
|
271
271
|
var b;
|
|
272
|
-
if (!
|
|
272
|
+
if (!d) return;
|
|
273
273
|
const s = N.current;
|
|
274
274
|
if (!s) return;
|
|
275
|
-
const
|
|
275
|
+
const l = [], C = document.createTreeWalker(s, NodeFilter.SHOW_TEXT), S = [];
|
|
276
276
|
let F;
|
|
277
277
|
for (; F = C.nextNode(); ) S.push(F);
|
|
278
|
-
for (const
|
|
279
|
-
const
|
|
280
|
-
if (
|
|
281
|
-
const
|
|
282
|
-
for (const
|
|
283
|
-
if (
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
(b = f.parentNode) == null || b.replaceChild(T, f);
|
|
278
|
+
for (const u of S) {
|
|
279
|
+
const n = u.textContent ?? "";
|
|
280
|
+
if (!n) continue;
|
|
281
|
+
const e = document.createDocumentFragment();
|
|
282
|
+
for (const T of n)
|
|
283
|
+
if (/\s/.test(T))
|
|
284
|
+
e.appendChild(document.createTextNode(T));
|
|
285
|
+
else {
|
|
286
|
+
const p = document.createElement("span");
|
|
287
|
+
p.style.fontVariationSettings = h(a), p.textContent = T, l.push(p), e.appendChild(p);
|
|
288
|
+
}
|
|
289
|
+
(b = u.parentNode) == null || b.replaceChild(e, u);
|
|
291
290
|
}
|
|
292
|
-
A.current =
|
|
291
|
+
A.current = l;
|
|
293
292
|
}, []);
|
|
294
|
-
function q(s,
|
|
293
|
+
function q(s, l) {
|
|
295
294
|
const C = N.current;
|
|
296
295
|
if (!C) return;
|
|
297
|
-
const S = C.getBoundingClientRect(), F = Math.max(S.left - s, 0, s - S.right), b = Math.max(S.top -
|
|
298
|
-
if (v !== void 0 && !
|
|
299
|
-
const
|
|
300
|
-
C.style.fontVariationSettings =
|
|
296
|
+
const S = C.getBoundingClientRect(), F = Math.max(S.left - s, 0, s - S.right), b = Math.max(S.top - l, 0, l - S.bottom), u = Math.sqrt(F * F + b * b);
|
|
297
|
+
if (v !== void 0 && !d) {
|
|
298
|
+
const e = 1 - (1 - Math.max(0, 1 - u / v)) ** 2;
|
|
299
|
+
C.style.fontVariationSettings = h(a + (w - a) * e);
|
|
301
300
|
return;
|
|
302
301
|
}
|
|
303
|
-
if (
|
|
304
|
-
if (v !== void 0 &&
|
|
305
|
-
C.style.fontVariationSettings =
|
|
306
|
-
for (const
|
|
302
|
+
if (d) {
|
|
303
|
+
if (v !== void 0 && u > v) {
|
|
304
|
+
C.style.fontVariationSettings = h(a);
|
|
305
|
+
for (const n of A.current) n.style.fontVariationSettings = h(a);
|
|
307
306
|
return;
|
|
308
307
|
}
|
|
309
|
-
for (const
|
|
310
|
-
const
|
|
311
|
-
|
|
308
|
+
for (const n of A.current) {
|
|
309
|
+
const e = n.getBoundingClientRect(), T = (e.left + e.right) / 2, p = (e.top + e.bottom) / 2, m = Math.sqrt((s - T) ** 2 + (l - p) ** 2), E = 1 - (1 - Math.max(0, 1 - m / d)) ** 2;
|
|
310
|
+
n.style.fontVariationSettings = h(a + (w - a) * E);
|
|
312
311
|
}
|
|
313
312
|
}
|
|
314
313
|
}
|
|
@@ -316,20 +315,20 @@ const ct = z(
|
|
|
316
315
|
(s) => {
|
|
317
316
|
y.current = { x: s.clientX, y: s.clientY }, q(s.clientX, s.clientY);
|
|
318
317
|
},
|
|
319
|
-
[
|
|
318
|
+
[a, w, v, d]
|
|
320
319
|
), i = j(
|
|
321
320
|
() => {
|
|
322
321
|
y.current && q(y.current.x, y.current.y);
|
|
323
322
|
},
|
|
324
|
-
[
|
|
323
|
+
[a, w, v, d]
|
|
325
324
|
), V = j(
|
|
326
325
|
() => {
|
|
327
326
|
y.current = null;
|
|
328
327
|
const s = N.current;
|
|
329
|
-
s && (s.style.fontVariationSettings =
|
|
330
|
-
for (const
|
|
328
|
+
s && (s.style.fontVariationSettings = h(a));
|
|
329
|
+
for (const l of A.current) l.style.fontVariationSettings = h(a);
|
|
331
330
|
},
|
|
332
|
-
[
|
|
331
|
+
[a]
|
|
333
332
|
);
|
|
334
333
|
return _(() => (window.addEventListener("mousemove", g, { passive: !0 }), window.addEventListener("scroll", i, { passive: !0, capture: !0 }), document.documentElement.addEventListener("mouseleave", V), () => {
|
|
335
334
|
window.removeEventListener("mousemove", g), window.removeEventListener("scroll", i, { capture: !0 }), document.documentElement.removeEventListener("mouseleave", V);
|
|
@@ -337,8 +336,8 @@ const ct = z(
|
|
|
337
336
|
r,
|
|
338
337
|
{
|
|
339
338
|
ref: M,
|
|
340
|
-
className:
|
|
341
|
-
style: { fontVariationSettings:
|
|
339
|
+
className: f,
|
|
340
|
+
style: { fontVariationSettings: h(a), ...c },
|
|
342
341
|
children: o
|
|
343
342
|
}
|
|
344
343
|
);
|