@liiift-studio/magnettype 1.0.7 → 1.1.0

package/README.md

@@ -1,5 +1,7 @@
 # magnetType
 
+[![npm](https://img.shields.io/npm/v/%40liiift-studio%2Fmagnettype.svg)](https://www.npmjs.com/package/@liiift-studio/magnettype) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![part of liiift type-tools](https://img.shields.io/badge/liiift-type--tools-blueviolet)](https://github.com/Liiift-Studio/type-tools)
+
 CSS `font-variation-settings` applies a single value to the whole element — there is no native way to drive axis values per word from cursor proximity, or to selectively widen visually confusable characters for legibility. magnetType adds both.
 
 **[magnettype.com](https://magnettype.com)** · [npm](https://www.npmjs.com/package/@liiift-studio/magnettype) · [GitHub](https://github.com/Liiift-Studio/MagnetType)
@@ -138,6 +140,7 @@ const legibilityOpts: MagnetTypeOptions = {
 | `falloff` | `'quadratic'` | *(field mode only)* Falloff curve. `'linear'` — strength decreases linearly with distance. `'quadratic'` — strength decreases as distance², giving a tighter hot zone and a sharper peak feel |
 | `magnetMode` | `'attract'` | *(field mode only)* `'attract'` — words near the cursor approach `peakValue`. `'repel'` — words near the cursor stay at `restValue`; words farther away approach `peakValue` |
 | `wdthBoost` | `6` | *(legibility mode only)* `wdth` axis units added to confusable characters, scaled by risk level. Risk 3 characters (`i l 1 I`) receive the full boost; risk 2 characters (`r 0 O`) receive ⅔; risk 1 characters (`n m o b d p q c e`) receive ⅓ |
+| `transitionMs` | `0` | Duration in milliseconds for the CSS transition back to rest values when the cursor leaves (or a touch ends). `0` preserves the existing instant snap. When > 0, `font-variation-settings` animates back over the given duration using `ease` easing. The transition is cleared immediately on the next `mousemove`/`touchmove` so live tracking is not delayed |
 | `as` | `'p'` | HTML element to render, e.g. `'h1'`, `'div'`, `'span'`. Accepts any valid React element type. *(React component only)* |
 
 ---
@@ -185,12 +188,10 @@ The package itself has zero runtime dependencies. Do not remove this entry.
 
 ## Future improvements
 
-- **Touch support** — `touchmove` events for mobile field mode; currently `mousemove`-only, so the effect is desktop-exclusive
-- **Smooth transition on stop** — animate axis values back to `restValue` over a short duration when the cursor leaves, rather than snapping on the next rAF tick
 - **Custom confusable table** — allow callers to pass their own `Record<string, number>` to override or extend the built-in character risk map for language- or font-specific tuning
 - **Axis clamping** — optional per-axis min/max clamp to prevent axis values from exceeding a font's supported range, avoiding undefined browser rendering behaviour
 - **SSR hydration** — pre-render legibility mode markup on the server so boosted characters are present from first paint without a client-side flash
 
 ---
 
-Current version: v1.0.7
+Current version: 0.1.3

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),z=require("react/jsx-runtime"),_={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},B={word:"mt-word",char:"mt-char",probe:"mt-probe"},L={axes:{wght:[300,500]},radius:120,falloff:"quadratic",magnetMode:"attract",wdthBoost:6,scope:"document"};function k(e,t=[]){return e.nodeType===Node.TEXT_NODE?t.push(e):e.childNodes.forEach(n=>k(n,t)),t}function j(e,t,n){if(!e||e==="normal")return`"${t}" ${n}`;const c=new RegExp(`(["'])${t}\\1\\s+[\\d.eE+-]+`),o=`"${t}" ${n}`;return c.test(e)?e.replace(c,o):`${e}, ${o}`}function D(e,t){let n=e;for(const[c,o]of Object.entries(t))n=j(n,c,o);return n}function I(e,t,n){if(t.opacity!==void 0){const[c,o]=t.opacity;e.style.opacity=String(c+(o-c)*n)}t.italic===!0&&(e.style.fontStyle=n>.5?"italic":"")}function V(e,t){t.opacity!==void 0&&(e.style.opacity=String(t.opacity[0])),t.italic===!0&&(e.style.fontStyle="")}function P(e){const t=e.cloneNode(!0),n=t.querySelectorAll(`.${B.word}, .${B.char}`);return Array.from(n).reverse().forEach(o=>{const y=o.parentNode;if(y){for(;o.firstChild;)y.insertBefore(o.firstChild,o);y.removeChild(o)}}),t.innerHTML}function Q(e,t){e.innerHTML=t}function W(e,t,n={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return e.innerHTML=t,()=>{};const c=n.wdthBoost??L.wdthBoost,o=n.radius??L.radius,y=n.falloff??L.falloff,m=n.scope??L.scope,p=n.props,d=window.scrollY;e.innerHTML=t;const l=getComputedStyle(e).fontVariationSettings,b=l.match(/"wdth"\s+([\d.eE+-]+)/),h=b?parseFloat(b[1]):100,q=k(e),g=[];for(const r of q){const s=r.textContent??"";if(!s||!s.split("").some(i=>i in _))continue;const u=document.createDocumentFragment();for(const i of s){const N=_[i];if(N===void 0){const a=u.lastChild;a&&a.nodeType===Node.TEXT_NODE?a.textContent+=i:u.appendChild(document.createTextNode(i))}else{const a=document.createElement("span");a.className=B.char,a.style.fontVariationSettings=j(l,"wdth",h),a.textContent=i,u.appendChild(a),g.push({span:a,riskLevel:N})}}r.parentNode.replaceChild(u,r)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-d)>2&&window.scrollTo({top:d,behavior:"instant"})}),g.length===0)return()=>{};p&&g.forEach(({span:r})=>V(r,p));let w=-9999,v=-9999,M=!1,f=0,R=!0;function A(){if(!R)return;if(!M){g.forEach(({span:s})=>{s.style.fontVariationSettings=j(l,"wdth",h),p&&V(s,p)}),f=0;return}const r=g.map(({span:s})=>s.getBoundingClientRect());g.forEach(({span:s,riskLevel:T},u)=>{const i=r[u],N=i.left+i.width/2,a=i.top+i.height/2,F=Math.sqrt((w-N)**2+(v-a)**2),x=Math.max(0,1-F/o),S=y==="quadratic"?x*x:x,$=c*(T/3)*S;s.style.fontVariationSettings=j(l,"wdth",h+$),p&&I(s,p,S)}),f=requestAnimationFrame(A)}function O(r){w=r.clientX,v=r.clientY,M||(M=!0),f===0&&(f=requestAnimationFrame(A))}function Y(){M=!1,f===0&&(f=requestAnimationFrame(A))}const E=m==="document"?document:e;return E.addEventListener("mousemove",O),E.addEventListener("mouseleave",Y),()=>{R=!1,cancelAnimationFrame(f),E.removeEventListener("mousemove",O),E.removeEventListener("mouseleave",Y),e.innerHTML=t}}function G(e,t,n={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return e.innerHTML=t,()=>{};const c=n.axes??L.axes,o=n.radius??L.radius,y=n.falloff??L.falloff,m=n.magnetMode??L.magnetMode,p=n.scope??L.scope,d=n.props,l=window.scrollY;e.innerHTML=t;const b=k(e),h=[];for(const r of b){const s=r.textContent??"";if(!s.trim())continue;const T=s.split(/(\S+)/),u=document.createDocumentFragment();for(let i=0;i<T.length;i+=2){const N=T[i],a=T[i+1];if(!a)continue;const x=T[i+3]===void 0?T[i+2]??"":"",S=document.createElement("span");S.className=B.word,S.textContent=N+a+x,u.appendChild(S),h.push(S)}r.parentNode.replaceChild(u,r)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-l)>2&&window.scrollTo({top:l,behavior:"instant"})}),h.length===0)return()=>{};const q=getComputedStyle(e).fontVariationSettings,g=D(q,Object.fromEntries(Object.entries(c).map(([r,[s]])=>[r,s])));h.forEach(r=>{r.style.fontVariationSettings=g,d&&V(r,d)});let w=-9999,v=-9999,M=!1,f=0,R=!0;function A(){if(!R)return;if(!M){h.forEach(s=>{s.style.fontVariationSettings=g,d&&V(s,d)}),f=0;return}const r=h.map(s=>s.getBoundingClientRect());h.forEach((s,T)=>{const u=r[T],i=u.left+u.width/2,N=u.top+u.height/2,a=Math.sqrt((w-i)**2+(v-N)**2),F=Math.max(0,1-a/o),x=y==="quadratic"?F*F:F,S=m==="repel"?1-x:x,$={};for(const H of Object.keys(c)){const[X,U]=c[H]??[300,500];$[H]=X+(U-X)*S}s.style.fontVariationSettings=D(q,$),d&&I(s,d,x)}),f=requestAnimationFrame(A)}function O(r){w=r.clientX,v=r.clientY,M||(M=!0),f===0&&(f=requestAnimationFrame(A))}function Y(){M=!1,f===0&&(f=requestAnimationFrame(A))}const E=p==="document"?document:e;return E.addEventListener("mousemove",O),E.addEventListener("mouseleave",Y),()=>{R=!1,cancelAnimationFrame(f),E.removeEventListener("mousemove",O),E.removeEventListener("mouseleave",Y),e.innerHTML=t}}function J(e){const t=C.useRef(null),n=C.useRef(null),c=C.useRef(e);c.current=e;const o=C.useRef(null),y=e.mode??"field",{axes:m,radius:p,falloff:d,magnetMode:l,wdthBoost:b,scope:h}=e,q=m?JSON.stringify(m):void 0,g=e.props?JSON.stringify(e.props):void 0,w=C.useCallback(()=>{const v=t.current;if(!v)return;n.current===null&&(n.current=P(v)),o.current&&(o.current(),o.current=null),(c.current.mode??"field")==="field"?o.current=G(v,n.current,c.current):o.current=W(v,n.current,c.current)},[y,q,p,d,l,b,h,g]);return C.useLayoutEffect(()=>(w(),()=>{o.current&&(o.current(),o.current=null)}),[w]),C.useEffect(()=>{document.fonts.ready.then(w)},[w]),t}const K=C.forwardRef(function({children:t,as:n="p",className:c,style:o,...y},m){const p=J(y),d=C.useCallback(l=>{p.current=l,typeof m=="function"?m(l):m&&(m.current=l)},[m]);return z.jsx(n,{ref:d,className:c,style:o,children:t})});K.displayName="MagnetTypeText";exports.MAGNET_TYPE_CLASSES=B;exports.MagnetTypeText=K;exports.applyMagnetType=W;exports.getCleanHTML=P;exports.removeMagnetType=Q;exports.startMagnetType=G;exports.useMagnetType=J;
+"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"},Y={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 f=new RegExp(`(["'])${o}\\1\\s+[\\d.eE+-]+`),c=`"${o}" ${r}`;return f.test(t)?t.replace(f,c):`${t}, ${c}`}function J(t,o){let r=t;for(const[f,c]of Object.entries(o))r=H(r,f,c);return r}function U(t,o,r){if(o.opacity!==void 0){const[f,c]=o.opacity;t.style.opacity=String(f+(c-f)*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 u=c.parentNode;if(u){for(;c.firstChild;)u.insertBefore(c.firstChild,c);u.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 f=r.wdthBoost??Y.wdthBoost,c=r.radius??Y.radius,u=r.falloff??Y.falloff,T=r.scope??Y.scope,v=r.props,m=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 e of A){const n=e.textContent??"";if(!n||!n.split("").some(a=>a in G))continue;const h=document.createDocumentFragment();for(const a of n){const B=G[a];if(B===void 0){const E=h.lastChild;E&&E.nodeType===Node.TEXT_NODE?E.textContent+=a:h.appendChild(document.createTextNode(a))}else{const E=document.createElement("span");E.className=R.char,E.style.fontVariationSettings=H(L,"wdth",y),E.textContent=a,h.appendChild(E),w.push({span:E,riskLevel:B})}}e.parentNode.replaceChild(h,e)}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:e})=>P(e,v));let p=-9999,q=-9999,g=!1,i=0,V=!0,s=null;function d(){if(!V)return;if(!g){w.forEach(({span:n})=>{m>0&&(n.style.transition=`font-variation-settings ${m}ms ease`),n.style.fontVariationSettings=H(L,"wdth",y),v&&P(n,v)}),m>0&&(s!==null&&clearTimeout(s),s=setTimeout(()=>{w.forEach(({span:n})=>{n.style.transition=""}),s=null},m)),i=0;return}const e=w.map(({span:n})=>n.getBoundingClientRect());w.forEach(({span:n,riskLevel:x},h)=>{n.style.transition="";const a=e[h],B=a.left+a.width/2,E=a.top+a.height/2,j=Math.sqrt((p-B)**2+(q-E)**2),O=Math.max(0,1-j/c),$=u==="quadratic"?O*O:O,X=f*(x/3)*$;n.style.fontVariationSettings=H(L,"wdth",y+X),v&&U(n,v,$)}),i=requestAnimationFrame(d)}function N(e){p=e.clientX,q=e.clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(d))}function C(){g=!1,i===0&&(i=requestAnimationFrame(d))}function F(e){e.touches.length!==0&&(p=e.touches[0].clientX,q=e.touches[0].clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(d)))}function k(){g=!1,i===0&&(i=requestAnimationFrame(d))}const l=T==="document"?document:t;return l.addEventListener("mousemove",N),l.addEventListener("mouseleave",C),l.addEventListener("touchmove",F,{passive:!0}),l.addEventListener("touchend",k),()=>{V=!1,cancelAnimationFrame(i),s!==null&&clearTimeout(s),l.removeEventListener("mousemove",N),l.removeEventListener("mouseleave",C),l.removeEventListener("touchmove",F),l.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 f=r.axes??Y.axes,c=r.radius??Y.radius,u=r.falloff??Y.falloff,T=r.magnetMode??Y.magnetMode,v=r.scope??Y.scope,m=r.props,S=r.transitionMs??0,L=window.scrollY;t.innerHTML=o;const b=_(t),y=[];for(const e of b){const n=e.textContent??"";if(!n.trim())continue;const x=n.split(/(\S+)/),h=document.createDocumentFragment();for(let a=0;a<x.length;a+=2){const B=x[a],E=x[a+1];if(!E)continue;const O=x[a+3]===void 0?x[a+2]??"":"",$=document.createElement("span");$.className=R.word,$.textContent=B+E+O,h.appendChild($),y.push($)}e.parentNode.replaceChild(h,e)}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(f).map(([e,[n]])=>[e,n])));y.forEach(e=>{e.style.fontVariationSettings=w,m&&P(e,m)});let p=-9999,q=-9999,g=!1,i=0,V=!0,s=null;function d(){if(!V)return;if(!g){y.forEach(n=>{S>0&&(n.style.transition=`font-variation-settings ${S}ms ease`),n.style.fontVariationSettings=w,m&&P(n,m)}),S>0&&(s!==null&&clearTimeout(s),s=setTimeout(()=>{y.forEach(n=>{n.style.transition=""}),s=null},S)),i=0;return}const e=y.map(n=>n.getBoundingClientRect());y.forEach((n,x)=>{n.style.transition="";const h=e[x],a=h.left+h.width/2,B=h.top+h.height/2,E=Math.sqrt((p-a)**2+(q-B)**2),j=Math.max(0,1-E/c),O=u==="quadratic"?j*j:j,$=T==="repel"?1-O:O,X={};for(const D of Object.keys(f)){const[I,nt]=f[D]??[300,500];X[D]=I+(nt-I)*$}n.style.fontVariationSettings=J(A,X),m&&U(n,m,O)}),i=requestAnimationFrame(d)}function N(e){p=e.clientX,q=e.clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(d))}function C(){g=!1,i===0&&(i=requestAnimationFrame(d))}function F(e){e.touches.length!==0&&(p=e.touches[0].clientX,q=e.touches[0].clientY,g||(g=!0),i===0&&(i=requestAnimationFrame(d)))}function k(){g=!1,i===0&&(i=requestAnimationFrame(d))}const l=v==="document"?document:t;return l.addEventListener("mousemove",N),l.addEventListener("mouseleave",C),l.addEventListener("touchmove",F,{passive:!0}),l.addEventListener("touchend",k),()=>{V=!1,cancelAnimationFrame(i),s!==null&&clearTimeout(s),l.removeEventListener("mousemove",N),l.removeEventListener("mouseleave",C),l.removeEventListener("touchmove",F),l.removeEventListener("touchend",k),t.innerHTML=o}}function W(t){const o=M.useRef(null),r=M.useRef(null),f=M.useRef(t);f.current=t;const c=M.useRef(null),u=t.mode??"field",{axes:T,radius:v,falloff:m,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),(f.current.mode??"field")==="field"?c.current=Z(p,r.current,f.current):c.current=Q(p,r.current,f.current)},[u,y,v,m,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:f,style:c,...u},T){const v=W(u),m=M.useCallback(S=>{v.current=S,typeof T=="function"?T(S):T&&(T.current=S)},[T]);return K.jsx(r,{ref:m,className:f,style:c,children:o})});tt.displayName="MagnetTypeText";const et=M.forwardRef(function({children:o,as:r="p",className:f,style:c,minWeight:u=300,maxWeight:T=600,proximityRadius:v,spreadRadius:m,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 d=[`'wght' ${s.toFixed(0)}`];for(const[N,C]of Object.entries(S))d.push(`'${N}' ${C}`);return d.join(", ")}M.useEffect(()=>{var k;if(!m)return;const s=b.current;if(!s)return;const d=[],N=document.createTreeWalker(s,NodeFilter.SHOW_TEXT),C=[];let F;for(;F=N.nextNode();)C.push(F);for(const l of C){const e=l.textContent??"";if(!/\S/.test(e))continue;const n=e.split(/(\s+)/),x=document.createDocumentFragment();for(const h of n)if(h!=="")if(/^\s+$/.test(h))x.appendChild(document.createTextNode(h));else{const a=document.createElement("span");a.style.fontVariationSettings=p(u),a.textContent=h,d.push(a),x.appendChild(a)}(k=l.parentNode)==null||k.replaceChild(x,l)}A.current=d},[]);function q(s,d){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-d,0,d-C.bottom),l=Math.sqrt(F*F+k*k);if(v!==void 0&&!m){const n=1-(1-Math.max(0,1-l/v))**2;N.style.fontVariationSettings=p(u+(T-u)*n);return}if(m){if(v!==void 0&&l>v){N.style.fontVariationSettings=p(u);for(const e of A.current)e.style.fontVariationSettings=p(u);return}for(const e of A.current){const n=e.getBoundingClientRect(),x=(n.left+n.right)/2,h=(n.top+n.bottom)/2,a=Math.sqrt((s-x)**2+(d-h)**2),E=1-(1-Math.max(0,1-a/m))**2;e.style.fontVariationSettings=p(u+(T-u)*E)}}}const g=M.useCallback(s=>{y.current={x:s.clientX,y:s.clientY},q(s.clientX,s.clientY)},[u,T,v,m]),i=M.useCallback(()=>{y.current&&q(y.current.x,y.current.y)},[u,T,v,m]),V=M.useCallback(()=>{y.current=null;const s=b.current;s&&(s.style.fontVariationSettings=p(u));for(const d of A.current)d.style.fontVariationSettings=p(u)},[u]);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:f,style:{fontVariationSettings:p(u),...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.d.ts

@@ -1,4 +1,6 @@
 import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 
 /**
@@ -38,6 +40,28 @@ export declare const MAGNET_TYPE_CLASSES: {
     readonly probe: "mt-probe";
 };
 
+/**
+ * Drop-in block element with cursor-proximity variable font weight variation.
+ * Accepts any ReactNode — use spreadRadius for per-word spread, proximityRadius
+ * for a whole-element proximity gate, or combine both.
+ */
+export declare const MagnetBlock: ForwardRefExoticComponent<MagnetBlockProps & RefAttributes<HTMLElement>>;
+
+export declare interface MagnetBlockProps {
+    children: React.ReactNode;
+    /** HTML element to render. Default: 'p' */
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    minWeight?: number;
+    maxWeight?: number;
+    /** Pixel distance from the element edge within which the whole-element effect activates */
+    proximityRadius?: number;
+    /** Pixel distance from the cursor within which each word's weight rises to max */
+    spreadRadius?: number;
+    fixedAxes?: Record<string, number>;
+}
+
 /** Whether cursor proximity attracts toward peak or repels toward rest */
 export declare type MagnetModeType = 'attract' | 'repel';
 
@@ -104,6 +128,15 @@ export declare interface MagnetTypeOptions {
      * Risk 3 characters receive wdthBoost × (3/3) = full boost at peak.
      */
     wdthBoost?: number;
+    /**
+     * Duration in milliseconds for the CSS transition back to rest values when the
+     * cursor leaves (mouseleave / touchend). Default: 0 (instant snap, no transition).
+     *
+     * When > 0, sets `transition: font-variation-settings <transitionMs>ms ease` on
+     * each span at leave time, then removes the transition property after the duration.
+     * On mousemove / touchmove the transition is cleared so live tracking is not delayed.
+     */
+    transitionMs?: number;
 }
 
 /**

package/dist/index.js

@@ -1,6 +1,6 @@
-import { useRef as B, useCallback as _, useLayoutEffect as J, useEffect as K, forwardRef as U } from "react";
-import { jsx as G } from "react/jsx-runtime";
-const D = {
+import { useRef as k, useCallback as j, useLayoutEffect as tt, useEffect as _, forwardRef as z } from "react";
+import { jsx as Q } from "react/jsx-runtime";
+const G = {
   i: 3,
   l: 3,
   1: 3,
@@ -22,14 +22,14 @@ const D = {
   c: 1,
   e: 1
   // similar bowls
-}, V = {
+}, I = {
   /** Applied to each word span in field mode */
   word: "mt-word",
   /** Applied to each character span in legibility mode */
   char: "mt-char",
   /** Applied to measurement probe spans (never in final output) */
   probe: "mt-probe"
-}, C = {
+}, Y = {
   axes: { wght: [300, 500] },
   radius: 120,
   falloff: "quadratic",
@@ -37,196 +37,321 @@ const D = {
   wdthBoost: 6,
   scope: "document"
 };
-function k(t, e = []) {
-  return t.nodeType === Node.TEXT_NODE ? e.push(t) : t.childNodes.forEach((n) => k(n, e)), e;
+function J(t, o = []) {
+  return t.nodeType === Node.TEXT_NODE ? o.push(t) : t.childNodes.forEach((r) => J(r, o)), o;
 }
-function $(t, e, n) {
-  if (!t || t === "normal") return `"${e}" ${n}`;
-  const c = new RegExp(`(["'])${e}\\1\\s+[\\d.eE+-]+`), o = `"${e}" ${n}`;
-  return c.test(t) ? t.replace(c, o) : `${t}, ${o}`;
+function D(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 I(t, e) {
-  let n = t;
-  for (const [c, o] of Object.entries(e))
-    n = $(n, c, o);
-  return n;
+function R(t, o) {
+  let r = t;
+  for (const [l, c] of Object.entries(o))
+    r = D(r, l, c);
+  return r;
 }
-function P(t, e, n) {
-  if (e.opacity !== void 0) {
-    const [c, o] = e.opacity;
-    t.style.opacity = String(c + (o - c) * n);
+function Z(t, o, r) {
+  if (o.opacity !== void 0) {
+    const [l, c] = o.opacity;
+    t.style.opacity = String(l + (c - l) * r);
   }
-  e.italic === !0 && (t.style.fontStyle = n > 0.5 ? "italic" : "");
+  o.italic === !0 && (t.style.fontStyle = r > 0.5 ? "italic" : "");
 }
-function j(t, e) {
-  e.opacity !== void 0 && (t.style.opacity = String(e.opacity[0])), e.italic === !0 && (t.style.fontStyle = "");
+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 e = t.cloneNode(!0), n = e.querySelectorAll(
-    `.${V.word}, .${V.char}`
+function et(t) {
+  const o = t.cloneNode(!0), r = o.querySelectorAll(
+    `.${I.word}, .${I.char}`
   );
-  return Array.from(n).reverse().forEach((o) => {
-    const y = o.parentNode;
-    if (y) {
-      for (; o.firstChild; ) y.insertBefore(o.firstChild, o);
-      y.removeChild(o);
+  return Array.from(r).reverse().forEach((c) => {
+    const u = c.parentNode;
+    if (u) {
+      for (; c.firstChild; ) u.insertBefore(c.firstChild, c);
+      u.removeChild(c);
     }
-  }), e.innerHTML;
+  }), o.innerHTML;
 }
-function rt(t, e) {
-  t.innerHTML = e;
+function ut(t, o) {
+  t.innerHTML = o;
 }
-function Q(t, e, n = {}) {
+function nt(t, o, r = {}) {
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return t.innerHTML = e, () => {
+    return t.innerHTML = o, () => {
     };
-  const c = n.wdthBoost ?? C.wdthBoost, o = n.radius ?? C.radius, y = n.falloff ?? C.falloff, m = n.scope ?? C.scope, p = n.props, d = window.scrollY;
-  t.innerHTML = e;
-  const l = getComputedStyle(t).fontVariationSettings, A = l.match(/"wdth"\s+([\d.eE+-]+)/), h = A ? parseFloat(A[1]) : 100, q = k(t), w = [];
-  for (const r of q) {
-    const s = r.textContent ?? "";
-    if (!s || !s.split("").some((i) => i in D)) continue;
-    const u = document.createDocumentFragment();
-    for (const i of s) {
-      const L = D[i];
-      if (L === void 0) {
-        const a = u.lastChild;
-        a && a.nodeType === Node.TEXT_NODE ? a.textContent += i : u.appendChild(document.createTextNode(i));
+  const l = r.wdthBoost ?? Y.wdthBoost, c = r.radius ?? Y.radius, u = r.falloff ?? Y.falloff, w = r.scope ?? Y.scope, v = r.props, m = r.transitionMs ?? 0, x = window.scrollY;
+  t.innerHTML = o;
+  const L = getComputedStyle(t).fontVariationSettings, N = L.match(/"wdth"\s+([\d.eE+-]+)/), y = N ? parseFloat(N[1]) : 100, A = J(t), M = [];
+  for (const e of A) {
+    const n = e.textContent ?? "";
+    if (!n || !n.split("").some((a) => a in G)) continue;
+    const h = document.createDocumentFragment();
+    for (const a of n) {
+      const $ = G[a];
+      if ($ === void 0) {
+        const E = h.lastChild;
+        E && E.nodeType === Node.TEXT_NODE ? E.textContent += a : h.appendChild(document.createTextNode(a));
       } else {
-        const a = document.createElement("span");
-        a.className = V.char, a.style.fontVariationSettings = $(l, "wdth", h), a.textContent = i, u.appendChild(a), w.push({ span: a, riskLevel: L });
+        const E = document.createElement("span");
+        E.className = I.char, E.style.fontVariationSettings = D(L, "wdth", y), E.textContent = a, h.appendChild(E), M.push({ span: E, riskLevel: $ });
       }
     }
-    r.parentNode.replaceChild(u, r);
+    e.parentNode.replaceChild(h, e);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - d) > 2 && window.scrollTo({ top: d, behavior: "instant" });
-  }), w.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - x) > 2 && window.scrollTo({ top: x, behavior: "instant" });
+  }), M.length === 0) return () => {
   };
-  p && w.forEach(({ span: r }) => j(r, p));
-  let g = -9999, v = -9999, M = !1, f = 0, F = !0;
-  function N() {
-    if (!F) return;
-    if (!M) {
-      w.forEach(({ span: s }) => {
-        s.style.fontVariationSettings = $(l, "wdth", h), p && j(s, p);
-      }), f = 0;
+  v && M.forEach(({ span: e }) => P(e, v));
+  let p = -9999, q = -9999, g = !1, i = 0, V = !0, s = null;
+  function d() {
+    if (!V) return;
+    if (!g) {
+      M.forEach(({ span: n }) => {
+        m > 0 && (n.style.transition = `font-variation-settings ${m}ms ease`), n.style.fontVariationSettings = D(L, "wdth", y), v && P(n, v);
+      }), m > 0 && (s !== null && clearTimeout(s), s = setTimeout(() => {
+        M.forEach(({ span: n }) => {
+          n.style.transition = "";
+        }), s = null;
+      }, m)), i = 0;
       return;
     }
-    const r = w.map(({ span: s }) => s.getBoundingClientRect());
-    w.forEach(({ span: s, riskLevel: E }, u) => {
-      const i = r[u], L = i.left + i.width / 2, a = i.top + i.height / 2, b = Math.sqrt((g - L) ** 2 + (v - a) ** 2), T = Math.max(0, 1 - b / o), S = y === "quadratic" ? T * T : T, R = c * (E / 3) * S;
-      s.style.fontVariationSettings = $(l, "wdth", h + R), p && P(s, p, S);
-    }), f = requestAnimationFrame(N);
+    const e = M.map(({ span: n }) => n.getBoundingClientRect());
+    M.forEach(({ span: n, riskLevel: T }, h) => {
+      n.style.transition = "";
+      const a = e[h], $ = a.left + a.width / 2, E = a.top + a.height / 2, X = Math.sqrt((p - $) ** 2 + (q - E) ** 2), B = Math.max(0, 1 - X / c), O = u === "quadratic" ? B * B : B, H = l * (T / 3) * O;
+      n.style.fontVariationSettings = D(L, "wdth", y + H), v && Z(n, v, O);
+    }), i = requestAnimationFrame(d);
   }
-  function O(r) {
-    g = r.clientX, v = r.clientY, M || (M = !0), f === 0 && (f = requestAnimationFrame(N));
+  function C(e) {
+    p = e.clientX, q = e.clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(d));
   }
-  function Y() {
-    M = !1, f === 0 && (f = requestAnimationFrame(N));
+  function S() {
+    g = !1, i === 0 && (i = requestAnimationFrame(d));
   }
-  const x = m === "document" ? document : t;
-  return x.addEventListener("mousemove", O), x.addEventListener("mouseleave", Y), () => {
-    F = !1, cancelAnimationFrame(f), x.removeEventListener("mousemove", O), x.removeEventListener("mouseleave", Y), t.innerHTML = e;
+  function F(e) {
+    e.touches.length !== 0 && (p = e.touches[0].clientX, q = e.touches[0].clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(d)));
+  }
+  function b() {
+    g = !1, i === 0 && (i = requestAnimationFrame(d));
+  }
+  const f = w === "document" ? document : t;
+  return f.addEventListener("mousemove", C), f.addEventListener("mouseleave", S), f.addEventListener("touchmove", F, { passive: !0 }), f.addEventListener("touchend", b), () => {
+    V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s), f.removeEventListener("mousemove", C), f.removeEventListener("mouseleave", S), f.removeEventListener("touchmove", F), f.removeEventListener("touchend", b), t.innerHTML = o;
   };
 }
-function Z(t, e, n = {}) {
+function ot(t, o, r = {}) {
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return t.innerHTML = e, () => {
+    return t.innerHTML = o, () => {
     };
-  const c = n.axes ?? C.axes, o = n.radius ?? C.radius, y = n.falloff ?? C.falloff, m = n.magnetMode ?? C.magnetMode, p = n.scope ?? C.scope, d = n.props, l = window.scrollY;
-  t.innerHTML = e;
-  const A = k(t), h = [];
-  for (const r of A) {
-    const s = r.textContent ?? "";
-    if (!s.trim()) continue;
-    const E = s.split(/(\S+)/), u = document.createDocumentFragment();
-    for (let i = 0; i < E.length; i += 2) {
-      const L = E[i], a = E[i + 1];
-      if (!a) continue;
-      const T = E[i + 3] === void 0 ? E[i + 2] ?? "" : "", S = document.createElement("span");
-      S.className = V.word, S.textContent = L + a + T, u.appendChild(S), h.push(S);
+  const l = r.axes ?? Y.axes, c = r.radius ?? Y.radius, u = r.falloff ?? Y.falloff, w = r.magnetMode ?? Y.magnetMode, v = r.scope ?? Y.scope, m = r.props, x = r.transitionMs ?? 0, L = window.scrollY;
+  t.innerHTML = o;
+  const N = J(t), y = [];
+  for (const e of N) {
+    const n = e.textContent ?? "";
+    if (!n.trim()) continue;
+    const T = n.split(/(\S+)/), h = document.createDocumentFragment();
+    for (let a = 0; a < T.length; a += 2) {
+      const $ = T[a], E = T[a + 1];
+      if (!E) continue;
+      const B = T[a + 3] === void 0 ? T[a + 2] ?? "" : "", O = document.createElement("span");
+      O.className = I.word, O.textContent = $ + E + B, h.appendChild(O), y.push(O);
     }
-    r.parentNode.replaceChild(u, r);
+    e.parentNode.replaceChild(h, e);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - l) > 2 && window.scrollTo({ top: l, behavior: "instant" });
-  }), h.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - L) > 2 && window.scrollTo({ top: L, behavior: "instant" });
+  }), y.length === 0) return () => {
   };
-  const q = getComputedStyle(t).fontVariationSettings, w = I(
-    q,
-    Object.fromEntries(Object.entries(c).map(([r, [s]]) => [r, s]))
+  const A = getComputedStyle(t).fontVariationSettings, M = R(
+    A,
+    Object.fromEntries(Object.entries(l).map(([e, [n]]) => [e, n]))
   );
-  h.forEach((r) => {
-    r.style.fontVariationSettings = w, d && j(r, d);
+  y.forEach((e) => {
+    e.style.fontVariationSettings = M, m && P(e, m);
   });
-  let g = -9999, v = -9999, M = !1, f = 0, F = !0;
-  function N() {
-    if (!F) return;
-    if (!M) {
-      h.forEach((s) => {
-        s.style.fontVariationSettings = w, d && j(s, d);
-      }), f = 0;
+  let p = -9999, q = -9999, g = !1, i = 0, V = !0, s = null;
+  function d() {
+    if (!V) return;
+    if (!g) {
+      y.forEach((n) => {
+        x > 0 && (n.style.transition = `font-variation-settings ${x}ms ease`), n.style.fontVariationSettings = M, m && P(n, m);
+      }), x > 0 && (s !== null && clearTimeout(s), s = setTimeout(() => {
+        y.forEach((n) => {
+          n.style.transition = "";
+        }), s = null;
+      }, x)), i = 0;
       return;
     }
-    const r = h.map((s) => s.getBoundingClientRect());
-    h.forEach((s, E) => {
-      const u = r[E], i = u.left + u.width / 2, L = u.top + u.height / 2, a = Math.sqrt((g - i) ** 2 + (v - L) ** 2), b = Math.max(0, 1 - a / o), T = y === "quadratic" ? b * b : b, S = m === "repel" ? 1 - T : T, R = {};
-      for (const H of Object.keys(c)) {
-        const [X, W] = c[H] ?? [300, 500];
-        R[H] = X + (W - X) * S;
+    const e = y.map((n) => n.getBoundingClientRect());
+    y.forEach((n, T) => {
+      n.style.transition = "";
+      const h = e[T], a = h.left + h.width / 2, $ = h.top + h.height / 2, E = Math.sqrt((p - a) ** 2 + (q - $) ** 2), X = Math.max(0, 1 - E / c), B = u === "quadratic" ? X * X : X, O = w === "repel" ? 1 - B : B, H = {};
+      for (const K of Object.keys(l)) {
+        const [U, W] = l[K] ?? [300, 500];
+        H[K] = U + (W - U) * O;
       }
-      s.style.fontVariationSettings = I(q, R), d && P(s, d, T);
-    }), f = requestAnimationFrame(N);
+      n.style.fontVariationSettings = R(A, H), m && Z(n, m, B);
+    }), i = requestAnimationFrame(d);
+  }
+  function C(e) {
+    p = e.clientX, q = e.clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(d));
   }
-  function O(r) {
-    g = r.clientX, v = r.clientY, M || (M = !0), f === 0 && (f = requestAnimationFrame(N));
+  function S() {
+    g = !1, i === 0 && (i = requestAnimationFrame(d));
   }
-  function Y() {
-    M = !1, f === 0 && (f = requestAnimationFrame(N));
+  function F(e) {
+    e.touches.length !== 0 && (p = e.touches[0].clientX, q = e.touches[0].clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(d)));
   }
-  const x = p === "document" ? document : t;
-  return x.addEventListener("mousemove", O), x.addEventListener("mouseleave", Y), () => {
-    F = !1, cancelAnimationFrame(f), x.removeEventListener("mousemove", O), x.removeEventListener("mouseleave", Y), t.innerHTML = e;
+  function b() {
+    g = !1, i === 0 && (i = requestAnimationFrame(d));
+  }
+  const f = v === "document" ? document : t;
+  return f.addEventListener("mousemove", C), f.addEventListener("mouseleave", S), f.addEventListener("touchmove", F, { passive: !0 }), f.addEventListener("touchend", b), () => {
+    V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s), f.removeEventListener("mousemove", C), f.removeEventListener("mouseleave", S), f.removeEventListener("touchmove", F), f.removeEventListener("touchend", b), t.innerHTML = o;
   };
 }
-function tt(t) {
-  const e = B(null), n = B(null), c = B(t);
-  c.current = t;
-  const o = B(null), y = t.mode ?? "field", { axes: m, radius: p, falloff: d, magnetMode: l, wdthBoost: A, scope: h } = t, q = m ? JSON.stringify(m) : void 0, w = t.props ? JSON.stringify(t.props) : void 0, g = _(() => {
-    const v = e.current;
-    if (!v) return;
-    n.current === null && (n.current = z(v)), o.current && (o.current(), o.current = null), (c.current.mode ?? "field") === "field" ? o.current = Z(v, n.current, c.current) : o.current = Q(v, n.current, c.current);
-  }, [y, q, p, d, l, A, h, w]);
-  return J(() => (g(), () => {
-    o.current && (o.current(), o.current = null);
-  }), [g]), K(() => {
-    document.fonts.ready.then(g);
-  }, [g]), e;
+function rt(t) {
+  const o = k(null), r = k(null), l = k(t);
+  l.current = t;
+  const c = k(null), u = t.mode ?? "field", { axes: w, radius: v, falloff: m, 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(() => {
+    const p = o.current;
+    if (!p) return;
+    r.current === null && (r.current = et(p)), c.current && (c.current(), c.current = null), (l.current.mode ?? "field") === "field" ? c.current = ot(p, r.current, l.current) : c.current = nt(p, r.current, l.current);
+  }, [u, y, v, m, x, L, N, A]);
+  return tt(() => (M(), () => {
+    c.current && (c.current(), c.current = null);
+  }), [M]), _(() => {
+    document.fonts.ready.then(M);
+  }, [M]), o;
 }
-const et = U(
-  function({ children: e, as: n = "p", className: c, style: o, ...y }, m) {
-    const p = tt(y), d = _(
-      (l) => {
-        p.current = l, typeof m == "function" ? m(l) : m && (m.current = l);
+const st = z(
+  function({ children: o, as: r = "p", className: l, style: c, ...u }, w) {
+    const v = rt(u), m = j(
+      (x) => {
+        v.current = x, typeof w == "function" ? w(x) : w && (w.current = x);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [w]
+    );
+    return /* @__PURE__ */ Q(r, { ref: m, className: l, style: c, children: o });
+  }
+);
+st.displayName = "MagnetTypeText";
+const ct = z(
+  function({
+    children: o,
+    as: r = "p",
+    className: l,
+    style: c,
+    minWeight: u = 300,
+    maxWeight: w = 600,
+    proximityRadius: v,
+    spreadRadius: m,
+    fixedAxes: x = {}
+  }, L) {
+    const N = k(null), y = k(null), A = k([]), M = j(
+      (s) => {
+        N.current = s, typeof L == "function" ? L(s) : L && (L.current = s);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [m]
+      [L]
+    );
+    function p(s) {
+      const d = [`'wght' ${s.toFixed(0)}`];
+      for (const [C, S] of Object.entries(x)) d.push(`'${C}' ${S}`);
+      return d.join(", ");
+    }
+    _(() => {
+      var b;
+      if (!m) return;
+      const s = N.current;
+      if (!s) return;
+      const d = [], C = document.createTreeWalker(s, NodeFilter.SHOW_TEXT), S = [];
+      let F;
+      for (; F = C.nextNode(); ) S.push(F);
+      for (const f of S) {
+        const e = f.textContent ?? "";
+        if (!/\S/.test(e)) continue;
+        const n = e.split(/(\s+)/), T = document.createDocumentFragment();
+        for (const h of n)
+          if (h !== "")
+            if (/^\s+$/.test(h))
+              T.appendChild(document.createTextNode(h));
+            else {
+              const a = document.createElement("span");
+              a.style.fontVariationSettings = p(u), a.textContent = h, d.push(a), T.appendChild(a);
+            }
+        (b = f.parentNode) == null || b.replaceChild(T, f);
+      }
+      A.current = d;
+    }, []);
+    function q(s, d) {
+      const C = N.current;
+      if (!C) return;
+      const S = C.getBoundingClientRect(), F = Math.max(S.left - s, 0, s - S.right), b = Math.max(S.top - d, 0, d - S.bottom), f = Math.sqrt(F * F + b * b);
+      if (v !== void 0 && !m) {
+        const n = 1 - (1 - Math.max(0, 1 - f / v)) ** 2;
+        C.style.fontVariationSettings = p(u + (w - u) * n);
+        return;
+      }
+      if (m) {
+        if (v !== void 0 && f > v) {
+          C.style.fontVariationSettings = p(u);
+          for (const e of A.current) e.style.fontVariationSettings = p(u);
+          return;
+        }
+        for (const e of A.current) {
+          const n = e.getBoundingClientRect(), T = (n.left + n.right) / 2, h = (n.top + n.bottom) / 2, a = Math.sqrt((s - T) ** 2 + (d - h) ** 2), E = 1 - (1 - Math.max(0, 1 - a / m)) ** 2;
+          e.style.fontVariationSettings = p(u + (w - u) * E);
+        }
+      }
+    }
+    const g = j(
+      (s) => {
+        y.current = { x: s.clientX, y: s.clientY }, q(s.clientX, s.clientY);
+      },
+      [u, w, v, m]
+    ), i = j(
+      () => {
+        y.current && q(y.current.x, y.current.y);
+      },
+      [u, w, v, m]
+    ), V = j(
+      () => {
+        y.current = null;
+        const s = N.current;
+        s && (s.style.fontVariationSettings = p(u));
+        for (const d of A.current) d.style.fontVariationSettings = p(u);
+      },
+      [u]
+    );
+    return _(() => (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]), /* @__PURE__ */ Q(
+      r,
+      {
+        ref: M,
+        className: l,
+        style: { fontVariationSettings: p(u), ...c },
+        children: o
+      }
     );
-    return /* @__PURE__ */ G(n, { ref: d, className: c, style: o, children: e });
   }
 );
-et.displayName = "MagnetTypeText";
+ct.displayName = "MagnetBlock";
 export {
-  V as MAGNET_TYPE_CLASSES,
-  et as MagnetTypeText,
-  Q as applyMagnetType,
-  z as getCleanHTML,
-  rt as removeMagnetType,
-  Z as startMagnetType,
-  tt as useMagnetType
+  I as MAGNET_TYPE_CLASSES,
+  ct as MagnetBlock,
+  st as MagnetTypeText,
+  nt as applyMagnetType,
+  et as getCleanHTML,
+  ut as removeMagnetType,
+  ot as startMagnetType,
+  rt as useMagnetType
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/magnettype",
-	"version": "1.0.7",
+	"version": "1.1.0",
 	"description": "Cursor-field per-word variable font axis variation and per-character legibility mode",
 	"type": "module",
 	"main": "dist/index.cjs",
@@ -38,8 +38,8 @@
 	"devDependencies": {
 		"@types/react": "^19.0.0",
 		"@vitejs/plugin-react": "^4.0.0",
-		"happy-dom": "^12.0.0",
-		"next": "16.2.2",
+		"happy-dom": "^20.9.0",
+		"next": "^16.2.6",
 		"react": "^19.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0",
@@ -83,5 +83,8 @@
 	"sideEffects": false,
 	"publishConfig": {
 		"access": "public"
+	},
+	"overrides": {
+		"postcss": ">=8.5.10"
 	}
 }