@liiift-studio/threadtext 0.0.1

package/README.md

@@ -0,0 +1,85 @@
+# threadText
+
+**Render any text as photorealistic, procedural satin-stitch embroidery — in real time, in the browser, from the font's actual glyph geometry.**
+
+> Status: **in-progress.** The framework-agnostic core (`createThreadText`) + React
+> hook/component are now extracted, typed, tested, and building to ESM/CJS/`.d.ts`. Still
+> to come: Framer/Webflow bindings and the landing site (and a free-licensed demo font).
+> The original reference renderer lives in [`demo/index.html`](./demo/index.html) and stays
+> the visual oracle. See [`HANDOFF.md`](./HANDOFF.md) for what's left; tool-build conventions
+> are in the monorepo [`../GUIDE.md`](../GUIDE.md).
+
+Homepage: [threadtext.com](https://threadtext.com) · npm: `@liiift-studio/threadtext`
+
+---
+
+## What it is
+
+Give it a word set in any loaded (variable) font and it renders it as **raised white satin floss on woven fabric** — threads that run *across* each stroke and fan around the curves, lifted into 3D, seated with a contact shadow, and sewn in one satin stitch at a time. It's photorealistic **by construction** (real thread geometry + lighting), not a raster filter and not an AI image.
+
+## Why it's worth building (the niche is empty)
+
+A survey of the field (embroidery-digitizing software, JS libraries, mockup generators, CSS tricks, creative-coding shaders, AI generators, and the graphics literature) found **no existing tool that does all of**: real-time · arbitrary text from a font · procedural (no pre-baked assets) · photorealistic satin · in a plain browser. Every existing thing drops at least one pillar:
+
+- **Digitizing software** (Ink/Stitch, PEmbroider, Wilcom/Hatch **TrueView**) — real stitch logic, but desktop, machine-file-oriented; previews are schematic (TrueView's photoreal render is an exported still, not live procedural web).
+- **The one close browser lib** (`p5.embroider`) — right platform, but alpha & non-photoreal.
+- **Fakes** (Photoshop actions, Placeit/Printful mockups, CSS, AI diffusion "embroidery" generators) — raster or generative, not procedural-from-font, not real-time-relightable.
+- **Research/shaders** (Chen–McCool–Kitamoto 2012; Blender knit shaders; Shadertoy stitch patterns) — closest ideas, but not text-from-font, not browser, and either non-photoreal or non-real-time.
+
+Defensible novelty to lead with: **(a)** font/variable-font glyph geometry drives the stitch flow field, **(b)** photoreal-by-construction (not AI, not a raster filter), **(c)** fully real-time + relightable + animated in a plain browser with zero pre-baked assets. (Full source list in `HANDOFF.md`.)
+
+## Run the demo
+
+It's a single self-contained file — no build step:
+
+```bash
+# from this folder
+python3 -m http.server 8080
+# open http://localhost:8080/demo/
+```
+
+Type to embroider a new word · Backspace to unpick · Enter to replay the sew-in · move the cursor for the sheen.
+
+> The demo font (`demo/DaithVF.woff2`) is **Darden Studio proprietary** — fine for local dev, but **swap it for a freely-licensed variable font before this repo is made public or published.** The renderer works with any loaded font.
+
+## How it works (one paragraph)
+
+Rasterise the glyphs → compute a signed-distance field → derive a **flow field** (smoothed in double-angle orientation space so opposite edge-normals reinforce) so threads run across each stroke → lay thousands of discrete pre-shaded **thread sprites** oriented by the flow → lift to 3D with a dome-shade/normal map → seat on procedural woven fabric with a contact shadow → **sew it in** one BFS cross-row at a time (the needle follows the stroke) → a subtle cursor-driven sheen. Full walkthrough with line references in `HANDOFF.md`.
+
+## Use it (extracted API)
+
+```ts
+import { createThreadText } from '@liiift-studio/threadtext'
+
+// Load the face first (any @font-face / next/font / CSS Font Loading API), then:
+const thread = createThreadText(document.getElementById('host'), {
+  text: 'Thread',
+  font: '"Your Font", Georgia, serif',
+  weight: 680,
+})
+
+thread.setText('Threads') // appended letters sew in; unrelated text re-sews the word
+thread.replay()           // re-run the full sew-in
+thread.resize()           // re-fit to the container
+thread.destroy()          // cancel rAF, remove listeners, free canvases
+```
+
+React:
+
+```tsx
+import { ThreadText } from '@liiift-studio/threadtext'
+
+<ThreadText text="Thread" font='"Your Font", serif' weight={680} />
+```
+
+Colours (`threadColor`, `fabricColor`), thread `pitch`, `sewRate`, `sheen`, `animate`, and
+`reducedMotion` are all options — see `ThreadTextOptions`. `react`/`react-dom` are optional
+peers; the core is framework-free.
+
+## What's next
+
+The renderer is proven. Finishing it means productionising per [`../GUIDE.md`](../GUIDE.md): extract a framework-agnostic **core** with a typed API, add the **React hook + component**, **Framer** + **Webflow** bindings, tests, a landing **site**, then ship (npm + Vercel). A proposed core API and step-by-step plan are in `HANDOFF.md`.
+
+---
+
+Part of [type-tools](https://github.com/Liiift-Studio/type-tools) by [Liiift Studio](https://liiift.studio). MIT (intended).

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react"),le=require("react/jsx-runtime"),Dt={bg:"tt-bg",fx:"tt-fx"};function Z(x,r){let a=Math.imul(x|0,374761393)+Math.imul(r|0,668265263)|0;return a=Math.imul(a^a>>>13,1274126177),((a^a>>>16)>>>0)/4294967295}function Nt(x,r){const a=Math.floor(x),c=Math.floor(r),l=x-a,s=r-c,h=l*l*(3-2*l),T=s*s*(3-2*s),S=Z(a,c),I=Z(a+1,c),f=Z(a,c+1),u=Z(a+1,c+1);return S+(I-S)*h+(f-S)*T+(S-I-f+u)*h*T}const wt=1e20;function Qt(x,r,a,c,l){let s=0;c[0]=0,l[0]=-wt,l[1]=wt;for(let h=1;h<r;h++){let T=(x[h]+h*h-(x[c[s]]+c[s]*c[s]))/(2*h-2*c[s]);for(;T<=l[s];)s--,T=(x[h]+h*h-(x[c[s]]+c[s]*c[s]))/(2*h-2*c[s]);s++,c[s]=h,l[s]=T,l[s+1]=wt}s=0;for(let h=0;h<r;h++){for(;l[s+1]<h;)s++;a[h]=(h-c[s])*(h-c[s])+x[c[s]]}}function fe(x,r,a){const c=new Float64Array(r*a);for(let f=0;f<r*a;f++)c[f]=x[f]?wt:0;const l=Math.max(r,a),s=new Float64Array(l),h=new Float64Array(l),T=new Int32Array(l),S=new Float64Array(l+1);for(let f=0;f<r;f++){for(let u=0;u<a;u++)s[u]=c[u*r+f];Qt(s,a,h,T,S);for(let u=0;u<a;u++)c[u*r+f]=h[u]}for(let f=0;f<a;f++){for(let u=0;u<r;u++)s[u]=c[f*r+u];Qt(s,r,h,T,S);for(let u=0;u<r;u++)c[f*r+u]=h[u]}const I=new Float32Array(r*a);for(let f=0;f<r*a;f++)I[f]=Math.sqrt(c[f]);return I}function Zt(x,r,a,c,l){let s=Float32Array.from(x);const h=new Float32Array(r*a),T=1/(2*c+1),S=(I,f)=>I<0?0:I>f?f:I;for(let I=0;I<l;I++){for(let f=0;f<a;f++){const u=f*r;let R=0;for(let P=-c;P<=c;P++)R+=s[u+S(P,r-1)];for(let P=0;P<r;P++)h[u+P]=R*T,R+=s[u+S(P+c+1,r-1)]-s[u+S(P-c,r-1)]}for(let f=0;f<r;f++){let u=0;for(let R=-c;R<=c;R++)u+=h[S(R,a-1)*r+f];for(let R=0;R<a;R++)s[R*r+f]=u*T,u+=h[S(R+c+1,a-1)*r+f]-h[S(R-c,a-1)*r+f]}}return s}function Ht(x,r){if(!x)return r;const a=x.trim();if(a[0]==="#"){let l=a.slice(1);if(l.length===3&&(l=l[0]+l[0]+l[1]+l[1]+l[2]+l[2]),l.length>=6){const s=parseInt(l.slice(0,2),16),h=parseInt(l.slice(2,4),16),T=parseInt(l.slice(4,6),16);if(!Number.isNaN(s)&&!Number.isNaN(h)&&!Number.isNaN(T))return[s,h,T]}return r}const c=a.match(/rgba?\(([^)]+)\)/i);if(c){const l=c[1].split(",").map(s=>parseFloat(s));if(l.length>=3&&l.slice(0,3).every(s=>!Number.isNaN(s)))return[Math.round(l[0]),Math.round(l[1]),Math.round(l[2])]}return r}function D(x){return x<0?0:x>255?255:Math.round(x)}function Wt(x,r){if(typeof window>"u"||typeof document>"u"||!x)return{setText(){},replay(){},resize(){},destroy(){},get text(){return r.text??""}};let a=r.text??"";const c=r.font??"Georgia, serif",l=r.weight??680,s=r.aspect??.46,h=r.sewRate??110,T=r.sheen??!0,S=r.animate??!0,I=(c.split(",")[0]||"serif").trim().replace(/^["']|["']$/g,""),f=r.reducedMotion??!!(window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches),u=Ht(r.threadColor??"#fffbf3",[255,251,243]),R=[u[0]*.585,u[1]*.585,u[2]*.585],P=[u[0]*.47,u[1]*.47,u[2]*.47],H=Ht(r.fabricColor??"#08080a",[8,8,10]),pt=[D(H[0]+14),D(H[1]+13),D(H[2]+15)],j=t=>`rgb(${D(t[0])},${D(t[1])},${D(t[2])})`,W=[];let L,O;x instanceof HTMLCanvasElement?(L=x,O=x.parentElement??x):(O=x,L=document.createElement("canvas"),W.push(L),O.appendChild(L)),L.classList.add(Dt.bg);const N=document.createElement("canvas");W.push(N),N.classList.add(Dt.fx),O.appendChild(N),getComputedStyle(O).position==="static"&&(O.style.position="relative"),L.style.display="block",L.style.width="100%",Object.assign(N.style,{position:"absolute",inset:"0",width:"100%",pointerEvents:"none",mixBlendMode:"screen"});let e=0,i=0,G=0,Mt=0,et=4,nt=[],ot=0,rt=0,Ct=new Uint8Array(0),St=new Float32Array(0),ft=new Float32Array(0),dt=new Float32Array(0),k=null,U=null,V=null,at=null,ut=null,X=[],ht=3;const A={rows:[],idx:0,acc:0,rate:0,on:!1},K={x:0,y:0,set:!1};let Y=!0,Tt=0,Ot=!1,mt=0,J=!1,At=!1;function qt(){const t=O.getBoundingClientRect(),n=Math.round(t.width||Math.min(window.innerWidth*.95,1240)),o=Math.round(n*s);let d=Math.min(window.devicePixelRatio||1,1.7);for(;n*d*o*d>9e5&&d>.55;)d-=.1;e=Math.max(1,Math.round(n*d)),i=Math.max(1,Math.round(o*d));for(const m of[L,N])m.width=e,m.height=i,m.style.height=o+"px";O.style.height=o+"px"}function zt(){const t=Math.max(7,et*2.5),n=Math.max(3.2,et*1.3);ot=Math.ceil(t)+2,rt=Math.ceil(n)+2,nt=[];for(let o=0;o<20;o++){const d=.34+o/19*.82,m=document.createElement("canvas");m.width=ot,m.height=rt;const M=m.getContext("2d");if(!M){nt.push(m);continue}const C=ot/2,F=rt/2,v=M.createLinearGradient(0,F-n/2,0,F+n/2),p=($,q)=>`rgba(${D($[0]*d)},${D($[1]*d)},${D($[2]*d)},${q})`;v.addColorStop(0,p(P,0)),v.addColorStop(.16,p(R,1)),v.addColorStop(.5,p(u,1)),v.addColorStop(.84,p(R,1)),v.addColorStop(1,p(P,0)),M.fillStyle=v,M.beginPath();const w=n/2;M.moveTo(C-t/2+w,F-w),M.lineTo(C+t/2-w,F-w),M.arc(C+t/2-w,F,w,-Math.PI/2,Math.PI/2),M.lineTo(C-t/2+w,F+w),M.arc(C-t/2+w,F,w,Math.PI/2,-Math.PI/2),M.closePath(),M.fill(),M.globalCompositeOperation="destination-in";const E=M.createLinearGradient(C-t/2,0,C+t/2,0);E.addColorStop(0,"rgba(0,0,0,0)"),E.addColorStop(.22,"rgba(0,0,0,1)"),E.addColorStop(.78,"rgba(0,0,0,1)"),E.addColorStop(1,"rgba(0,0,0,0)"),M.fillStyle=E,M.fillRect(0,0,ot,rt),nt.push(m)}}function bt(){if(!ut)return;const t=ut;t.clearRect(0,0,e,i),t.fillStyle="#fff",t.textAlign="left",t.textBaseline="middle",t.font=`${l} ${G}px ${c}`,t.fillText(a,Mt,i*.5);const n=t.getImageData(0,0,e,i).data,o=new Uint8Array(e*i);for(let g=0;g<i;g++)for(let b=0;b<e;b++){const y=g*e+b,z=n[y*4+3]/255,_=Nt(b*.5,g*.5)*.22+Nt(b*1.8,g*1.8)*.1;o[y]=z>.5+(_-.16)?1:0}Ct=o;const d=fe(o,e,i),m=new Float32Array(e*i);for(let g=1;g<i-1;g++)for(let b=1;b<e-1;b++){const y=g*e+b;m[y]=(d[y]*4+d[y-1]+d[y+1]+d[y-e]+d[y+e])/8}const M=new Float32Array(e*i),C=new Float32Array(e*i),F=new Float32Array(e*i),v=new Float32Array(e*i);for(let g=1;g<i-1;g++)for(let b=1;b<e-1;b++){const y=g*e+b;if(!o[y])continue;const z=(m[y+1]-m[y-1])*.5,_=(m[y+e]-m[y-e])*.5;F[y]=z,v[y]=_,M[y]=z*z-_*_,C[y]=2*z*_}const p=Math.max(7,Math.round(i*.05)),w=Zt(M,e,i,p,2),E=Zt(C,e,i,p,2);ft=new Float32Array(e*i),dt=new Float32Array(e*i);for(let g=0;g<e*i;g++){if(!o[g])continue;const b=.5*Math.atan2(E[g],w[g]);ft[g]=Math.cos(b),dt[g]=Math.sin(b)}const $=Math.max(9,i*.04),q=new Float32Array(e*i),st=-.45,lt=-.62,xt=.64;for(let g=1;g<i-1;g++)for(let b=1;b<e-1;b++){const y=g*e+b;if(!o[y])continue;let z=F[y],_=v[y];const Vt=Math.hypot(z,_)||1;z/=Vt,_/=Vt;const Kt=m[y],Yt=(1-Math.min(Kt/$,1))*1.25;let vt=-z*Yt,Lt=-_*Yt;const Jt=1.5,$t=Math.hypot(vt,Lt,Jt);vt/=$t,Lt/=$t;let Pt=vt*st+Lt*lt+Jt/$t*xt;Pt<0&&(Pt=0);const se=Math.min(1,.45+.55*Math.min(Kt/($*.7),1));q[y]=Math.min(1.12,(.5+.75*Pt)*se)}St=q,k=document.createElement("canvas"),k.width=e,k.height=i;const B=k.getContext("2d");U=document.createElement("canvas"),U.width=e,U.height=i;const tt=U.getContext("2d");if(B&&tt){const g=B.createImageData(e,i),b=tt.createImageData(e,i);for(let y=0;y<e*i;y++)o[y]&&(g.data[y*4]=255,g.data[y*4+1]=255,g.data[y*4+2]=255,g.data[y*4+3]=255,b.data[y*4+3]=255);B.putImageData(g,0,0),tt.putImageData(b,0,0)}}function _t(){V=document.createElement("canvas"),V.width=e,V.height=i;const t=V.getContext("2d",{willReadFrequently:!0});if(t){const n=t.createRadialGradient(e*.5,i*.4,0,e*.5,i*.5,e*.72);n.addColorStop(0,j(pt)),n.addColorStop(1,j(H)),t.fillStyle=n,t.fillRect(0,0,e,i);const o=t.getImageData(0,0,e,i),d=o.data;for(let m=0;m<i;m++)for(let M=0;M<e;M++){const C=(m*e+M)*4,F=Math.sin(M*1.9)*.5+.5,v=Math.sin(m*1.9)*.5+.5,p=F*v*9-4.5+(Nt(M*.18,m*.18)-.5)*15;d[C]=D(d[C]+p),d[C+1]=D(d[C+1]+p),d[C+2]=D(d[C+2]+p*1.1)}t.putImageData(o,0,0)}at=document.createElement("canvas"),at.width=e,at.height=i,ut=at.getContext("2d",{willReadFrequently:!0})}function Ft(){const t=Math.max(1.6,et*.6);ht=t;const n=[];for(let o=0;o<i;o+=t)for(let d=0;d<e;d+=t){const m=(Z(Math.floor(d),Math.floor(o))-.5)*t*.9,M=(Z(Math.floor(o),Math.floor(d))-.5)*t*.9,C=Math.round(d+m),F=Math.round(o+M);if(C<1||F<1||C>=e-1||F>=i-1)continue;const v=F*e+C;if(!Ct[v])continue;const p=Math.atan2(dt[v],ft[v]),w=.86+Z(C*7,F*13)*.18;let E=St[v]*w;E=E<0?0:E>1.12?1.12:E,n.push({x:C,y:F,ang:p,idx:Math.min(19,Math.max(0,Math.round(E/1.12*19)))})}n.sort((o,d)=>o.x-d.x),X=n}function gt(t,n){t.save(),t.translate(n.x,n.y),t.rotate(n.ang),t.drawImage(nt[n.idx],-ot/2,-rt/2),t.restore()}function yt(){const t=L.getContext("2d");if(t)for(const n of X)gt(t,n)}function jt(){return X.length?X[X.length-1].x:0}function Et(){return X.length?X[0].x:0}function it(){const t=L.getContext("2d");!t||!V||(t.drawImage(V,0,0),U&&(t.save(),t.globalAlpha=.85,t.filter=`blur(${Math.round(i*.018)}px)`,t.drawImage(U,0,Math.round(i*.02)),t.restore()))}function ne(t){if(!t.length)return[];const n=Math.max(4,ht*1.5),o=new Map,d=(p,w)=>p+","+w;t.forEach((p,w)=>{const E=d(Math.floor(p.x/n),Math.floor(p.y/n));let $=o.get(E);$||o.set(E,$=[]),$.push(w)});const m=ht*1.8*(ht*1.8);function M(p){const w=t[p],E=Math.floor(w.x/n),$=Math.floor(w.y/n),q=[];for(let st=-1;st<=1;st++)for(let lt=-1;lt<=1;lt++){const xt=o.get(d(E+st,$+lt));if(xt)for(const B of xt){if(B===p)continue;const tt=t[B].x-w.x,g=t[B].y-w.y;tt*tt+g*g<=m&&q.push(B)}}return q}const C=new Uint8Array(t.length),F=[],v=t.map((p,w)=>w).sort((p,w)=>t[p].x+t[p].y-(t[w].x+t[w].y));for(const p of v){if(C[p])continue;let w=[p];for(C[p]=1;w.length;){F.push(w.map($=>t[$]));const E=[];for(const $ of w)for(const q of M($))C[q]||(C[q]=1,E.push(q));w=E}}return F}function It(t,n){it();const o=L.getContext("2d");if(!o)return;const d=[];for(const m of X)m.x<=t?gt(o,m):d.push(m);if(f){for(const m of d)gt(o,m);A.on=!1;return}A.rows=ne(d),A.idx=0,A.acc=0,A.rate=n||h,A.on=A.rows.length>0}function oe(t){const n=L.getContext("2d");if(n)for(t>A.rows.length&&(t=A.rows.length);A.idx<t;){const o=A.rows[A.idx++];for(const d of o)gt(n,d)}}function re(t,n){const o=N.getContext("2d");if(!o||(o.clearRect(0,0,e,i),!T||!k))return;const d=e*.32,m=o.createRadialGradient(t,n,0,t,n,d);m.addColorStop(0,"rgba(255,250,238,0.18)"),m.addColorStop(.5,"rgba(255,250,238,0.055)"),m.addColorStop(1,"rgba(255,250,238,0)"),o.fillStyle=m,o.fillRect(0,0,e,i),o.globalCompositeOperation="destination-in",o.drawImage(k,0,0),o.globalCompositeOperation="source-over"}function Xt(){const t=L.getContext("2d");if(!t){G=Math.round(i*.6),Mt=Math.round(e*.14);return}const n=a||"Ag";t.font=`${l} 100px ${c}`;const o=t.measureText(n).width||100;G=Math.round(100*(e*.72)/o),t.font=`${l} ${G}px ${c}`,Mt=Math.round(e/2-t.measureText(n).width/2)}function kt(t){if(J)return;mt||(mt=t);const n=Math.min(.25,(t-mt)/1e3);mt=t,A.on&&(A.acc+=A.rate*n,oe(A.acc),A.idx>=A.rows.length&&(A.on=!1)),Y&&k&&(re(K.set?K.x:e*.5,K.set?K.y:i*.34),Y=!1),Tt=requestAnimationFrame(kt)}function Bt(t){const n=N.getBoundingClientRect();K.x=(t.clientX-n.left)/(n.width||1)*e,K.y=(t.clientY-n.top)/(n.height||1)*i,K.set=!0,Y=!0}T&&window.addEventListener("pointermove",Bt,{passive:!0});function ae(t){bt(),Ft(),S&&!f?It(Et()-1,h):(it(),yt(),A.on=!1),Y=!0}function ie(){J||(qt(),_t(),et=Math.max(3.4,i*.0095),zt(),Xt(),ae(),At=!0,Ot||(Ot=!0,Tt=requestAnimationFrame(kt)))}let ct;function ce(t){const n=`${l} 200px ${I}`;let o=!1;try{o=!!document.fonts&&document.fonts.check(n)}catch{o=!0}if(!document.fonts||o){t();return}let d=!1;const m=()=>{d||(d=!0,ct&&clearTimeout(ct),t())};document.fonts.load(n,a).then(()=>document.fonts.ready).then(m,m),ct=setTimeout(m,1500)}ce(ie);let Rt;function Gt(){clearTimeout(Rt),Rt=setTimeout(()=>Ut.resize(),200)}window.addEventListener("resize",Gt);const Ut={get text(){return a},setText(t){if(J||!At){a=t??"";return}t=t??"";const n=t.length>a.length&&a.length>0&&t.startsWith(a),o=n?jt():-1;a=t,bt(),Ft(),f||!S?(it(),yt(),A.on=!1):It(n&&o>0?Math.min(o,jt()):Et()-1,n?320:h),Y=!0},replay(){J||!At||(f||!S?(it(),yt(),A.on=!1):It(Et()-1,h),Y=!0)},resize(){J||(qt(),_t(),et=Math.max(3.4,i*.0095),zt(),Xt(),bt(),Ft(),it(),yt(),A.on=!1,Y=!0)},destroy(){if(!J){J=!0,cancelAnimationFrame(Tt),clearTimeout(Rt),ct&&clearTimeout(ct),window.removeEventListener("resize",Gt),T&&window.removeEventListener("pointermove",Bt);for(const t of W)t.remove();nt=[],X=[],A.rows=[],Ct=new Uint8Array(0),St=new Float32Array(0),ft=new Float32Array(0),dt=new Float32Array(0),k=U=V=at=null,ut=null}}};return Ut}function te(x){const r=Q.useRef(null),a=Q.useRef(null),c=Q.useRef(x);c.current=x;const{text:l,font:s,weight:h,threadColor:T,fabricColor:S,pitch:I,animate:f,sewRate:u,sheen:R,reducedMotion:P,aspect:H}=x,pt=JSON.stringify({font:s,weight:h,threadColor:T,fabricColor:S,pitch:I,animate:f,sewRate:u,sheen:R,reducedMotion:P,aspect:H});return Q.useLayoutEffect(()=>{const j=r.current;if(!j)return;const W=Wt(j,c.current);a.current=W;let L=0,O=0,N;return typeof ResizeObserver<"u"&&(N=new ResizeObserver(e=>{const i=Math.round(e[0].contentRect.width);i!==O&&(O=i,cancelAnimationFrame(L),L=requestAnimationFrame(()=>{var G;return(G=a.current)==null?void 0:G.resize()}))}),N.observe(j)),()=>{N==null||N.disconnect(),cancelAnimationFrame(L),W.destroy(),a.current=null}},[pt]),Q.useEffect(()=>{var j;(j=a.current)==null||j.setText(l)},[l]),r}const ee=Q.forwardRef(function({className:r,style:a,as:c="div","aria-label":l,role:s,"aria-describedby":h,...T},S){const I=te(T),f=Q.useCallback(u=>{I.current=u,typeof S=="function"?S(u):S&&(S.current=u)},[I,S]);return le.jsx(c,{ref:f,className:r,style:a,role:s??"img","aria-label":l??T.text,"aria-describedby":h})});ee.displayName="ThreadText";exports.THREAD_TEXT_CLASSES=Dt;exports.ThreadText=ee;exports.createThreadText=Wt;exports.useThreadText=te;

package/dist/index.d.ts

@@ -0,0 +1,113 @@
+import { default as default_2 } from 'react';
+import { RefObject } from 'react';
+
+/**
+ * Mount a procedural satin-stitch embroidery renderer inside `target`.
+ *
+ * When `target` is a plain element, two stacked canvases (base + sheen overlay) are
+ * created inside it. When `target` is itself a `<canvas>`, it is used as the base and a
+ * sheen overlay is added as a sibling. Returns a {@link ThreadTextInstance} handle.
+ */
+export declare function createThreadText(target: HTMLElement, opts: ThreadTextOptions): ThreadTextInstance;
+
+/** CSS class names applied to the canvases threadText creates inside a container. */
+export declare const THREAD_TEXT_CLASSES: {
+    /** Base canvas: woven fabric + baked satin stitches. */
+    readonly bg: "tt-bg";
+    /** Overlay canvas: cursor sheen (`mix-blend-mode: screen`). */
+    readonly fx: "tt-fx";
+};
+
+/**
+ * Drop-in component that embroiders `text` inside a self-sizing container. The canvas
+ * output is decorative; the word is exposed to assistive tech via `aria-label`.
+ */
+export declare const ThreadText: default_2.ForwardRefExoticComponent<ThreadTextProps & default_2.RefAttributes<HTMLElement>>;
+
+/** Live handle to a mounted threadText renderer. */
+export declare interface ThreadTextInstance {
+    /**
+     * Re-embroider with new text. When `text` extends the current word (an append),
+     * only the newly-added letters animate in; otherwise the whole word is re-sewn.
+     */
+    setText(text: string): void;
+    /** Re-run the full sew-in animation for the current word. */
+    replay(): void;
+    /** Re-fit the render surface to its container and rebuild. */
+    resize(): void;
+    /** Cancel the animation loop, remove listeners, and free the created canvases. */
+    destroy(): void;
+    /** The current embroidered text. */
+    readonly text: string;
+}
+
+/**
+ * Options controlling the procedural satin-stitch embroidery renderer.
+ * Colours accept any CSS-ish hex (`#rgb` / `#rrggbb`) or `rgb()/rgba()` string.
+ */
+export declare interface ThreadTextOptions {
+    /** The word (or short phrase) to embroider. */
+    text: string;
+    /**
+     * CSS `font-family` of an already-loaded font used to rasterise the glyphs.
+     * The renderer is font-agnostic — load the face however you like (`@font-face`,
+     * `next/font`, the CSS Font Loading API) before calling. (default: 'Georgia, serif')
+     */
+    font?: string;
+    /** Numeric font weight passed to the canvas `font` shorthand (100–900). (default: 680) */
+    weight?: number;
+    /** Floss (thread) colour — the lit crest of each thread. (default: warm white '#fffbf3') */
+    threadColor?: string;
+    /** Woven-ground base colour — the outer edge of the fabric. (default near-black linen '#08080a') */
+    fabricColor?: string;
+    /**
+     * Thread spacing in internal pixels. Smaller = finer, denser stitching (and more work).
+     * (default: auto — derived from the canvas height)
+     */
+    pitch?: number;
+    /** Play the sew-in animation when the instance mounts. (default: true) */
+    animate?: boolean;
+    /** Satin cross-rows laid per second during the sew-in. (default: 110) */
+    sewRate?: number;
+    /** Enable the cursor-following radial sheen on the overlay canvas. (default: true) */
+    sheen?: boolean;
+    /**
+     * Force reduced-motion (skip the sew-in, draw instantly). If omitted, the value is
+     * auto-detected from `prefers-reduced-motion`.
+     */
+    reducedMotion?: boolean;
+    /**
+     * Aspect ratio (height / width) of the render surface when the target is a plain
+     * container and its own canvases are created. (default: 0.46)
+     */
+    aspect?: number;
+}
+
+declare interface ThreadTextProps extends ThreadTextOptions {
+    className?: string;
+    style?: default_2.CSSProperties;
+    /** Container element type. (default: 'div') */
+    as?: default_2.ElementType;
+    /**
+     * Accessible label for the embroidery. Defaults to the embroidered `text`, so
+     * screen readers announce the word even though it is drawn on a canvas.
+     */
+    'aria-label'?: string;
+    role?: string;
+    'aria-describedby'?: string;
+}
+
+/**
+ * React hook that mounts a threadText renderer inside a ref'd container.
+ *
+ * The instance is (re)created only when a *structural* option changes (font, weight,
+ * colours, pitch, sizing, motion). Changing just `text` routes through
+ * `instance.setText()` so appended letters animate in without a full remount.
+ * Re-fits to the container via ResizeObserver and tears down on unmount.
+ *
+ * @param options - {@link ThreadTextOptions} for the renderer.
+ * @returns A ref to attach to the target container element.
+ */
+export declare function useThreadText(options: ThreadTextOptions): RefObject<HTMLElement | null>;
+
+export { }

package/dist/index.js

@@ -0,0 +1,439 @@
+import { useRef as Pt, useLayoutEffect as ie, useEffect as ce, forwardRef as se, useCallback as le } from "react";
+import { jsx as fe } from "react/jsx-runtime";
+const Jt = {
+  /** Base canvas: woven fabric + baked satin stitches. */
+  bg: "tt-bg",
+  /** Overlay canvas: cursor sheen (`mix-blend-mode: screen`). */
+  fx: "tt-fx"
+};
+function Q(x, r) {
+  let a = Math.imul(x | 0, 374761393) + Math.imul(r | 0, 668265263) | 0;
+  return a = Math.imul(a ^ a >>> 13, 1274126177), ((a ^ a >>> 16) >>> 0) / 4294967295;
+}
+function Nt(x, r) {
+  const a = Math.floor(x), c = Math.floor(r), l = x - a, s = r - c, h = l * l * (3 - 2 * l), A = s * s * (3 - 2 * s), S = Q(a, c), I = Q(a + 1, c), f = Q(a, c + 1), u = Q(a + 1, c + 1);
+  return S + (I - S) * h + (f - S) * A + (S - I - f + u) * h * A;
+}
+const xt = 1e20;
+function Qt(x, r, a, c, l) {
+  let s = 0;
+  c[0] = 0, l[0] = -xt, l[1] = xt;
+  for (let h = 1; h < r; h++) {
+    let A = (x[h] + h * h - (x[c[s]] + c[s] * c[s])) / (2 * h - 2 * c[s]);
+    for (; A <= l[s]; )
+      s--, A = (x[h] + h * h - (x[c[s]] + c[s] * c[s])) / (2 * h - 2 * c[s]);
+    s++, c[s] = h, l[s] = A, l[s + 1] = xt;
+  }
+  s = 0;
+  for (let h = 0; h < r; h++) {
+    for (; l[s + 1] < h; ) s++;
+    a[h] = (h - c[s]) * (h - c[s]) + x[c[s]];
+  }
+}
+function de(x, r, a) {
+  const c = new Float64Array(r * a);
+  for (let f = 0; f < r * a; f++) c[f] = x[f] ? xt : 0;
+  const l = Math.max(r, a), s = new Float64Array(l), h = new Float64Array(l), A = new Int32Array(l), S = new Float64Array(l + 1);
+  for (let f = 0; f < r; f++) {
+    for (let u = 0; u < a; u++) s[u] = c[u * r + f];
+    Qt(s, a, h, A, S);
+    for (let u = 0; u < a; u++) c[u * r + f] = h[u];
+  }
+  for (let f = 0; f < a; f++) {
+    for (let u = 0; u < r; u++) s[u] = c[f * r + u];
+    Qt(s, r, h, A, S);
+    for (let u = 0; u < r; u++) c[f * r + u] = h[u];
+  }
+  const I = new Float32Array(r * a);
+  for (let f = 0; f < r * a; f++) I[f] = Math.sqrt(c[f]);
+  return I;
+}
+function Zt(x, r, a, c, l) {
+  let s = Float32Array.from(x);
+  const h = new Float32Array(r * a), A = 1 / (2 * c + 1), S = (I, f) => I < 0 ? 0 : I > f ? f : I;
+  for (let I = 0; I < l; I++) {
+    for (let f = 0; f < a; f++) {
+      const u = f * r;
+      let v = 0;
+      for (let P = -c; P <= c; P++) v += s[u + S(P, r - 1)];
+      for (let P = 0; P < r; P++)
+        h[u + P] = v * A, v += s[u + S(P + c + 1, r - 1)] - s[u + S(P - c, r - 1)];
+    }
+    for (let f = 0; f < r; f++) {
+      let u = 0;
+      for (let v = -c; v <= c; v++) u += h[S(v, a - 1) * r + f];
+      for (let v = 0; v < a; v++)
+        s[v * r + f] = u * A, u += h[S(v + c + 1, a - 1) * r + f] - h[S(v - c, a - 1) * r + f];
+    }
+  }
+  return s;
+}
+function Ht(x, r) {
+  if (!x) return r;
+  const a = x.trim();
+  if (a[0] === "#") {
+    let l = a.slice(1);
+    if (l.length === 3 && (l = l[0] + l[0] + l[1] + l[1] + l[2] + l[2]), l.length >= 6) {
+      const s = parseInt(l.slice(0, 2), 16), h = parseInt(l.slice(2, 4), 16), A = parseInt(l.slice(4, 6), 16);
+      if (!Number.isNaN(s) && !Number.isNaN(h) && !Number.isNaN(A)) return [s, h, A];
+    }
+    return r;
+  }
+  const c = a.match(/rgba?\(([^)]+)\)/i);
+  if (c) {
+    const l = c[1].split(",").map((s) => parseFloat(s));
+    if (l.length >= 3 && l.slice(0, 3).every((s) => !Number.isNaN(s)))
+      return [Math.round(l[0]), Math.round(l[1]), Math.round(l[2])];
+  }
+  return r;
+}
+function D(x) {
+  return x < 0 ? 0 : x > 255 ? 255 : Math.round(x);
+}
+function ue(x, r) {
+  if (typeof window > "u" || typeof document > "u" || !x)
+    return { setText() {
+    }, replay() {
+    }, resize() {
+    }, destroy() {
+    }, get text() {
+      return r.text ?? "";
+    } };
+  let a = r.text ?? "";
+  const c = r.font ?? "Georgia, serif", l = r.weight ?? 680, s = r.aspect ?? 0.46, h = r.sewRate ?? 110, A = r.sheen ?? !0, S = r.animate ?? !0, I = (c.split(",")[0] || "serif").trim().replace(/^["']|["']$/g, ""), f = r.reducedMotion ?? !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches), u = Ht(r.threadColor ?? "#fffbf3", [255, 251, 243]), v = [u[0] * 0.585, u[1] * 0.585, u[2] * 0.585], P = [u[0] * 0.47, u[1] * 0.47, u[2] * 0.47], Z = Ht(r.fabricColor ?? "#08080a", [8, 8, 10]), wt = [D(Z[0] + 14), D(Z[1] + 13), D(Z[2] + 15)], j = (t) => `rgb(${D(t[0])},${D(t[1])},${D(t[2])})`, H = [];
+  let $, O;
+  x instanceof HTMLCanvasElement ? ($ = x, O = x.parentElement ?? x) : (O = x, $ = document.createElement("canvas"), H.push($), O.appendChild($)), $.classList.add(Jt.bg);
+  const N = document.createElement("canvas");
+  H.push(N), N.classList.add(Jt.fx), O.appendChild(N), getComputedStyle(O).position === "static" && (O.style.position = "relative"), $.style.display = "block", $.style.width = "100%", Object.assign(N.style, { position: "absolute", inset: "0", width: "100%", pointerEvents: "none", mixBlendMode: "screen" });
+  let e = 0, i = 0, G = 0, pt = 0, tt = 4, et = [], nt = 0, ot = 0, Mt = new Uint8Array(0), Ct = new Float32Array(0), lt = new Float32Array(0), ft = new Float32Array(0), B = null, U = null, V = null, rt = null, dt = null, k = [], ut = 3;
+  const b = { rows: [], idx: 0, acc: 0, rate: 0, on: !1 }, K = { x: 0, y: 0, set: !1 };
+  let Y = !0, St = 0, Dt = !1, ht = 0, J = !1, At = !1;
+  function Ot() {
+    const t = O.getBoundingClientRect(), n = Math.round(t.width || Math.min(window.innerWidth * 0.95, 1240)), o = Math.round(n * s);
+    let d = Math.min(window.devicePixelRatio || 1, 1.7);
+    for (; n * d * o * d > 9e5 && d > 0.55; ) d -= 0.1;
+    e = Math.max(1, Math.round(n * d)), i = Math.max(1, Math.round(o * d));
+    for (const m of [$, N])
+      m.width = e, m.height = i, m.style.height = o + "px";
+    O.style.height = o + "px";
+  }
+  function zt() {
+    const t = Math.max(7, tt * 2.5), n = Math.max(3.2, tt * 1.3);
+    nt = Math.ceil(t) + 2, ot = Math.ceil(n) + 2, et = [];
+    for (let o = 0; o < 20; o++) {
+      const d = 0.34 + o / 19 * 0.82, m = document.createElement("canvas");
+      m.width = nt, m.height = ot;
+      const M = m.getContext("2d");
+      if (!M) {
+        et.push(m);
+        continue;
+      }
+      const C = nt / 2, T = ot / 2, R = M.createLinearGradient(0, T - n / 2, 0, T + n / 2), p = (L, z) => `rgba(${D(L[0] * d)},${D(L[1] * d)},${D(L[2] * d)},${z})`;
+      R.addColorStop(0, p(P, 0)), R.addColorStop(0.16, p(v, 1)), R.addColorStop(0.5, p(u, 1)), R.addColorStop(0.84, p(v, 1)), R.addColorStop(1, p(P, 0)), M.fillStyle = R, M.beginPath();
+      const w = n / 2;
+      M.moveTo(C - t / 2 + w, T - w), M.lineTo(C + t / 2 - w, T - w), M.arc(C + t / 2 - w, T, w, -Math.PI / 2, Math.PI / 2), M.lineTo(C - t / 2 + w, T + w), M.arc(C - t / 2 + w, T, w, Math.PI / 2, -Math.PI / 2), M.closePath(), M.fill(), M.globalCompositeOperation = "destination-in";
+      const E = M.createLinearGradient(C - t / 2, 0, C + t / 2, 0);
+      E.addColorStop(0, "rgba(0,0,0,0)"), E.addColorStop(0.22, "rgba(0,0,0,1)"), E.addColorStop(0.78, "rgba(0,0,0,1)"), E.addColorStop(1, "rgba(0,0,0,0)"), M.fillStyle = E, M.fillRect(0, 0, nt, ot), et.push(m);
+    }
+  }
+  function bt() {
+    if (!dt) return;
+    const t = dt;
+    t.clearRect(0, 0, e, i), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.font = `${l} ${G}px ${c}`, t.fillText(a, pt, i * 0.5);
+    const n = t.getImageData(0, 0, e, i).data, o = new Uint8Array(e * i);
+    for (let g = 0; g < i; g++) for (let F = 0; F < e; F++) {
+      const y = g * e + F, q = n[y * 4 + 3] / 255, _ = Nt(F * 0.5, g * 0.5) * 0.22 + Nt(F * 1.8, g * 1.8) * 0.1;
+      o[y] = q > 0.5 + (_ - 0.16) ? 1 : 0;
+    }
+    Mt = o;
+    const d = de(o, e, i), m = new Float32Array(e * i);
+    for (let g = 1; g < i - 1; g++) for (let F = 1; F < e - 1; F++) {
+      const y = g * e + F;
+      m[y] = (d[y] * 4 + d[y - 1] + d[y + 1] + d[y - e] + d[y + e]) / 8;
+    }
+    const M = new Float32Array(e * i), C = new Float32Array(e * i), T = new Float32Array(e * i), R = new Float32Array(e * i);
+    for (let g = 1; g < i - 1; g++) for (let F = 1; F < e - 1; F++) {
+      const y = g * e + F;
+      if (!o[y]) continue;
+      const q = (m[y + 1] - m[y - 1]) * 0.5, _ = (m[y + e] - m[y - e]) * 0.5;
+      T[y] = q, R[y] = _, M[y] = q * q - _ * _, C[y] = 2 * q * _;
+    }
+    const p = Math.max(7, Math.round(i * 0.05)), w = Zt(M, e, i, p, 2), E = Zt(C, e, i, p, 2);
+    lt = new Float32Array(e * i), ft = new Float32Array(e * i);
+    for (let g = 0; g < e * i; g++) {
+      if (!o[g]) continue;
+      const F = 0.5 * Math.atan2(E[g], w[g]);
+      lt[g] = Math.cos(F), ft[g] = Math.sin(F);
+    }
+    const L = Math.max(9, i * 0.04), z = new Float32Array(e * i), ct = -0.45, st = -0.62, yt = 0.64;
+    for (let g = 1; g < i - 1; g++) for (let F = 1; F < e - 1; F++) {
+      const y = g * e + F;
+      if (!o[y]) continue;
+      let q = T[y], _ = R[y];
+      const Ut = Math.hypot(q, _) || 1;
+      q /= Ut, _ /= Ut;
+      const Vt = m[y], Kt = (1 - Math.min(Vt / L, 1)) * 1.25;
+      let vt = -q * Kt, Rt = -_ * Kt;
+      const Yt = 1.5, $t = Math.hypot(vt, Rt, Yt);
+      vt /= $t, Rt /= $t;
+      let Lt = vt * ct + Rt * st + Yt / $t * yt;
+      Lt < 0 && (Lt = 0);
+      const ae = Math.min(1, 0.45 + 0.55 * Math.min(Vt / (L * 0.7), 1));
+      z[y] = Math.min(1.12, (0.5 + 0.75 * Lt) * ae);
+    }
+    Ct = z, B = document.createElement("canvas"), B.width = e, B.height = i;
+    const X = B.getContext("2d");
+    U = document.createElement("canvas"), U.width = e, U.height = i;
+    const W = U.getContext("2d");
+    if (X && W) {
+      const g = X.createImageData(e, i), F = W.createImageData(e, i);
+      for (let y = 0; y < e * i; y++) o[y] && (g.data[y * 4] = 255, g.data[y * 4 + 1] = 255, g.data[y * 4 + 2] = 255, g.data[y * 4 + 3] = 255, F.data[y * 4 + 3] = 255);
+      X.putImageData(g, 0, 0), W.putImageData(F, 0, 0);
+    }
+  }
+  function qt() {
+    V = document.createElement("canvas"), V.width = e, V.height = i;
+    const t = V.getContext("2d", { willReadFrequently: !0 });
+    if (t) {
+      const n = t.createRadialGradient(e * 0.5, i * 0.4, 0, e * 0.5, i * 0.5, e * 0.72);
+      n.addColorStop(0, j(wt)), n.addColorStop(1, j(Z)), t.fillStyle = n, t.fillRect(0, 0, e, i);
+      const o = t.getImageData(0, 0, e, i), d = o.data;
+      for (let m = 0; m < i; m++) for (let M = 0; M < e; M++) {
+        const C = (m * e + M) * 4, T = Math.sin(M * 1.9) * 0.5 + 0.5, R = Math.sin(m * 1.9) * 0.5 + 0.5, p = T * R * 9 - 4.5 + (Nt(M * 0.18, m * 0.18) - 0.5) * 15;
+        d[C] = D(d[C] + p), d[C + 1] = D(d[C + 1] + p), d[C + 2] = D(d[C + 2] + p * 1.1);
+      }
+      t.putImageData(o, 0, 0);
+    }
+    rt = document.createElement("canvas"), rt.width = e, rt.height = i, dt = rt.getContext("2d", { willReadFrequently: !0 });
+  }
+  function Ft() {
+    const t = Math.max(1.6, tt * 0.6);
+    ut = t;
+    const n = [];
+    for (let o = 0; o < i; o += t) for (let d = 0; d < e; d += t) {
+      const m = (Q(Math.floor(d), Math.floor(o)) - 0.5) * t * 0.9, M = (Q(Math.floor(o), Math.floor(d)) - 0.5) * t * 0.9, C = Math.round(d + m), T = Math.round(o + M);
+      if (C < 1 || T < 1 || C >= e - 1 || T >= i - 1) continue;
+      const R = T * e + C;
+      if (!Mt[R]) continue;
+      const p = Math.atan2(ft[R], lt[R]), w = 0.86 + Q(C * 7, T * 13) * 0.18;
+      let E = Ct[R] * w;
+      E = E < 0 ? 0 : E > 1.12 ? 1.12 : E, n.push({ x: C, y: T, ang: p, idx: Math.min(19, Math.max(0, Math.round(E / 1.12 * 19))) });
+    }
+    n.sort((o, d) => o.x - d.x), k = n;
+  }
+  function mt(t, n) {
+    t.save(), t.translate(n.x, n.y), t.rotate(n.ang), t.drawImage(et[n.idx], -nt / 2, -ot / 2), t.restore();
+  }
+  function gt() {
+    const t = $.getContext("2d");
+    if (t)
+      for (const n of k) mt(t, n);
+  }
+  function _t() {
+    return k.length ? k[k.length - 1].x : 0;
+  }
+  function Tt() {
+    return k.length ? k[0].x : 0;
+  }
+  function at() {
+    const t = $.getContext("2d");
+    !t || !V || (t.drawImage(V, 0, 0), U && (t.save(), t.globalAlpha = 0.85, t.filter = `blur(${Math.round(i * 0.018)}px)`, t.drawImage(U, 0, Math.round(i * 0.02)), t.restore()));
+  }
+  function Wt(t) {
+    if (!t.length) return [];
+    const n = Math.max(4, ut * 1.5), o = /* @__PURE__ */ new Map(), d = (p, w) => p + "," + w;
+    t.forEach((p, w) => {
+      const E = d(Math.floor(p.x / n), Math.floor(p.y / n));
+      let L = o.get(E);
+      L || o.set(E, L = []), L.push(w);
+    });
+    const m = ut * 1.8 * (ut * 1.8);
+    function M(p) {
+      const w = t[p], E = Math.floor(w.x / n), L = Math.floor(w.y / n), z = [];
+      for (let ct = -1; ct <= 1; ct++) for (let st = -1; st <= 1; st++) {
+        const yt = o.get(d(E + ct, L + st));
+        if (yt)
+          for (const X of yt) {
+            if (X === p) continue;
+            const W = t[X].x - w.x, g = t[X].y - w.y;
+            W * W + g * g <= m && z.push(X);
+          }
+      }
+      return z;
+    }
+    const C = new Uint8Array(t.length), T = [], R = t.map((p, w) => w).sort((p, w) => t[p].x + t[p].y - (t[w].x + t[w].y));
+    for (const p of R) {
+      if (C[p]) continue;
+      let w = [p];
+      for (C[p] = 1; w.length; ) {
+        T.push(w.map((L) => t[L]));
+        const E = [];
+        for (const L of w) for (const z of M(L)) C[z] || (C[z] = 1, E.push(z));
+        w = E;
+      }
+    }
+    return T;
+  }
+  function Et(t, n) {
+    at();
+    const o = $.getContext("2d");
+    if (!o) return;
+    const d = [];
+    for (const m of k)
+      m.x <= t ? mt(o, m) : d.push(m);
+    if (f) {
+      for (const m of d) mt(o, m);
+      b.on = !1;
+      return;
+    }
+    b.rows = Wt(d), b.idx = 0, b.acc = 0, b.rate = n || h, b.on = b.rows.length > 0;
+  }
+  function te(t) {
+    const n = $.getContext("2d");
+    if (n)
+      for (t > b.rows.length && (t = b.rows.length); b.idx < t; ) {
+        const o = b.rows[b.idx++];
+        for (const d of o) mt(n, d);
+      }
+  }
+  function ee(t, n) {
+    const o = N.getContext("2d");
+    if (!o || (o.clearRect(0, 0, e, i), !A || !B)) return;
+    const d = e * 0.32, m = o.createRadialGradient(t, n, 0, t, n, d);
+    m.addColorStop(0, "rgba(255,250,238,0.18)"), m.addColorStop(0.5, "rgba(255,250,238,0.055)"), m.addColorStop(1, "rgba(255,250,238,0)"), o.fillStyle = m, o.fillRect(0, 0, e, i), o.globalCompositeOperation = "destination-in", o.drawImage(B, 0, 0), o.globalCompositeOperation = "source-over";
+  }
+  function jt() {
+    const t = $.getContext("2d");
+    if (!t) {
+      G = Math.round(i * 0.6), pt = Math.round(e * 0.14);
+      return;
+    }
+    const n = a || "Ag";
+    t.font = `${l} 100px ${c}`;
+    const o = t.measureText(n).width || 100;
+    G = Math.round(100 * (e * 0.72) / o), t.font = `${l} ${G}px ${c}`, pt = Math.round(e / 2 - t.measureText(n).width / 2);
+  }
+  function kt(t) {
+    if (J) return;
+    ht || (ht = t);
+    const n = Math.min(0.25, (t - ht) / 1e3);
+    ht = t, b.on && (b.acc += b.rate * n, te(b.acc), b.idx >= b.rows.length && (b.on = !1)), Y && B && (ee(K.set ? K.x : e * 0.5, K.set ? K.y : i * 0.34), Y = !1), St = requestAnimationFrame(kt);
+  }
+  function Bt(t) {
+    const n = N.getBoundingClientRect();
+    K.x = (t.clientX - n.left) / (n.width || 1) * e, K.y = (t.clientY - n.top) / (n.height || 1) * i, K.set = !0, Y = !0;
+  }
+  A && window.addEventListener("pointermove", Bt, { passive: !0 });
+  function ne(t) {
+    bt(), Ft(), S && !f ? Et(Tt() - 1, h) : (at(), gt(), b.on = !1), Y = !0;
+  }
+  function oe() {
+    J || (Ot(), qt(), tt = Math.max(3.4, i * 95e-4), zt(), jt(), ne(), At = !0, Dt || (Dt = !0, St = requestAnimationFrame(kt)));
+  }
+  let it;
+  function re(t) {
+    const n = `${l} 200px ${I}`;
+    let o = !1;
+    try {
+      o = !!document.fonts && document.fonts.check(n);
+    } catch {
+      o = !0;
+    }
+    if (!document.fonts || o) {
+      t();
+      return;
+    }
+    let d = !1;
+    const m = () => {
+      d || (d = !0, it && clearTimeout(it), t());
+    };
+    document.fonts.load(n, a).then(() => document.fonts.ready).then(m, m), it = setTimeout(m, 1500);
+  }
+  re(oe);
+  let It;
+  function Xt() {
+    clearTimeout(It), It = setTimeout(() => Gt.resize(), 200);
+  }
+  window.addEventListener("resize", Xt);
+  const Gt = {
+    get text() {
+      return a;
+    },
+    setText(t) {
+      if (J || !At) {
+        a = t ?? "";
+        return;
+      }
+      t = t ?? "";
+      const n = t.length > a.length && a.length > 0 && t.startsWith(a), o = n ? _t() : -1;
+      a = t, bt(), Ft(), f || !S ? (at(), gt(), b.on = !1) : Et(n && o > 0 ? Math.min(o, _t()) : Tt() - 1, n ? 320 : h), Y = !0;
+    },
+    replay() {
+      J || !At || (f || !S ? (at(), gt(), b.on = !1) : Et(Tt() - 1, h), Y = !0);
+    },
+    resize() {
+      J || (Ot(), qt(), tt = Math.max(3.4, i * 95e-4), zt(), jt(), bt(), Ft(), at(), gt(), b.on = !1, Y = !0);
+    },
+    destroy() {
+      if (!J) {
+        J = !0, cancelAnimationFrame(St), clearTimeout(It), it && clearTimeout(it), window.removeEventListener("resize", Xt), A && window.removeEventListener("pointermove", Bt);
+        for (const t of H) t.remove();
+        et = [], k = [], b.rows = [], Mt = new Uint8Array(0), Ct = new Float32Array(0), lt = new Float32Array(0), ft = new Float32Array(0), B = U = V = rt = null, dt = null;
+      }
+    }
+  };
+  return Gt;
+}
+function he(x) {
+  const r = Pt(null), a = Pt(null), c = Pt(x);
+  c.current = x;
+  const { text: l, font: s, weight: h, threadColor: A, fabricColor: S, pitch: I, animate: f, sewRate: u, sheen: v, reducedMotion: P, aspect: Z } = x, wt = JSON.stringify({ font: s, weight: h, threadColor: A, fabricColor: S, pitch: I, animate: f, sewRate: u, sheen: v, reducedMotion: P, aspect: Z });
+  return ie(() => {
+    const j = r.current;
+    if (!j) return;
+    const H = ue(j, c.current);
+    a.current = H;
+    let $ = 0, O = 0, N;
+    return typeof ResizeObserver < "u" && (N = new ResizeObserver((e) => {
+      const i = Math.round(e[0].contentRect.width);
+      i !== O && (O = i, cancelAnimationFrame($), $ = requestAnimationFrame(() => {
+        var G;
+        return (G = a.current) == null ? void 0 : G.resize();
+      }));
+    }), N.observe(j)), () => {
+      N == null || N.disconnect(), cancelAnimationFrame($), H.destroy(), a.current = null;
+    };
+  }, [wt]), ce(() => {
+    var j;
+    (j = a.current) == null || j.setText(l);
+  }, [l]), r;
+}
+const me = se(
+  function({ className: r, style: a, as: c = "div", "aria-label": l, role: s, "aria-describedby": h, ...A }, S) {
+    const I = he(A), f = le(
+      (u) => {
+        I.current = u, typeof S == "function" ? S(u) : S && (S.current = u);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [I, S]
+    );
+    return /* @__PURE__ */ fe(
+      c,
+      {
+        ref: f,
+        className: r,
+        style: a,
+        role: s ?? "img",
+        "aria-label": l ?? A.text,
+        "aria-describedby": h
+      }
+    );
+  }
+);
+me.displayName = "ThreadText";
+export {
+  Jt as THREAD_TEXT_CLASSES,
+  me as ThreadText,
+  ue as createThreadText,
+  he as useThreadText
+};

package/dist/threadtext.webflow.min.js

@@ -0,0 +1 @@
+var ThreadText=(function(at){"use strict";const Dt={bg:"tt-bg",fx:"tt-fx"};function B(s,n){let e=Math.imul(s|0,374761393)+Math.imul(n|0,668265263)|0;return e=Math.imul(e^e>>>13,1274126177),((e^e>>>16)>>>0)/4294967295}function xt(s,n){const e=Math.floor(s),o=Math.floor(n),r=s-e,d=n-o,m=r*r*(3-2*r),b=d*d*(3-2*d),E=B(e,o),L=B(e+1,o),u=B(e,o+1),g=B(e+1,o+1);return E+(L-E)*m+(u-E)*b+(E-L-u+g)*m*b}const it=1e20;function Ot(s,n,e,o,r){let d=0;o[0]=0,r[0]=-it,r[1]=it;for(let m=1;m<n;m++){let b=(s[m]+m*m-(s[o[d]]+o[d]*o[d]))/(2*m-2*o[d]);for(;b<=r[d];)d--,b=(s[m]+m*m-(s[o[d]]+o[d]*o[d]))/(2*m-2*o[d]);d++,o[d]=m,r[d]=b,r[d+1]=it}d=0;for(let m=0;m<n;m++){for(;r[d+1]<m;)d++;e[m]=(m-o[d])*(m-o[d])+s[o[d]]}}function ee(s,n,e){const o=new Float64Array(n*e);for(let u=0;u<n*e;u++)o[u]=s[u]?it:0;const r=Math.max(n,e),d=new Float64Array(r),m=new Float64Array(r),b=new Int32Array(r),E=new Float64Array(r+1);for(let u=0;u<n;u++){for(let g=0;g<e;g++)d[g]=o[g*n+u];Ot(d,e,m,b,E);for(let g=0;g<e;g++)o[g*n+u]=m[g]}for(let u=0;u<e;u++){for(let g=0;g<n;g++)d[g]=o[u*n+g];Ot(d,n,m,b,E);for(let g=0;g<n;g++)o[u*n+g]=m[g]}const L=new Float32Array(n*e);for(let u=0;u<n*e;u++)L[u]=Math.sqrt(o[u]);return L}function _t(s,n,e,o,r){let d=Float32Array.from(s);const m=new Float32Array(n*e),b=1/(2*o+1),E=(L,u)=>L<0?0:L>u?u:L;for(let L=0;L<r;L++){for(let u=0;u<e;u++){const g=u*n;let v=0;for(let $=-o;$<=o;$++)v+=d[g+E($,n-1)];for(let $=0;$<n;$++)m[g+$]=v*b,v+=d[g+E($+o+1,n-1)]-d[g+E($-o,n-1)]}for(let u=0;u<n;u++){let g=0;for(let v=-o;v<=o;v++)g+=m[E(v,e-1)*n+u];for(let v=0;v<e;v++)d[v*n+u]=g*b,g+=m[E(v+o+1,e-1)*n+u]-m[E(v-o,e-1)*n+u]}}return d}function qt(s,n){if(!s)return n;const e=s.trim();if(e[0]==="#"){let r=e.slice(1);if(r.length===3&&(r=r[0]+r[0]+r[1]+r[1]+r[2]+r[2]),r.length>=6){const d=parseInt(r.slice(0,2),16),m=parseInt(r.slice(2,4),16),b=parseInt(r.slice(4,6),16);if(!Number.isNaN(d)&&!Number.isNaN(m)&&!Number.isNaN(b))return[d,m,b]}return n}const o=e.match(/rgba?\(([^)]+)\)/i);if(o){const r=o[1].split(",").map(d=>parseFloat(d));if(r.length>=3&&r.slice(0,3).every(d=>!Number.isNaN(d)))return[Math.round(r[0]),Math.round(r[1]),Math.round(r[2])]}return n}function P(s){return s<0?0:s>255?255:Math.round(s)}function ne(s,n){if(typeof window>"u"||typeof document>"u"||!s)return{setText(){},replay(){},resize(){},destroy(){},get text(){return n.text??""}};let e=n.text??"";const o=n.font??"Georgia, serif",r=n.weight??680,d=n.aspect??.46,m=n.sewRate??110,b=n.sheen??!0,E=n.animate??!0,L=(o.split(",")[0]||"serif").trim().replace(/^["']|["']$/g,""),u=n.reducedMotion??!!(window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches),g=qt(n.threadColor??"#fffbf3",[255,251,243]),v=[g[0]*.585,g[1]*.585,g[2]*.585],$=[g[0]*.47,g[1]*.47,g[2]*.47],st=qt(n.fabricColor??"#08080a",[8,8,10]),ce=[P(st[0]+14),P(st[1]+13),P(st[2]+15)],kt=t=>`rgb(${P(t[0])},${P(t[1])},${P(t[2])})`,Mt=[];let R,j;s instanceof HTMLCanvasElement?(R=s,j=s.parentElement??s):(j=s,R=document.createElement("canvas"),Mt.push(R),j.appendChild(R)),R.classList.add(Dt.bg);const X=document.createElement("canvas");Mt.push(X),X.classList.add(Dt.fx),j.appendChild(X),getComputedStyle(j).position==="static"&&(j.style.position="relative"),R.style.display="block",R.style.width="100%",Object.assign(X.style,{position:"absolute",inset:"0",width:"100%",pointerEvents:"none",mixBlendMode:"screen"});let c=0,l=0,lt=0,Ct=0,J=4,Q=[],Z=0,W=0,St=new Uint8Array(0),At=new Float32Array(0),ft=new Float32Array(0),dt=new Float32Array(0),k=null,G=null,U=null,tt=null,ut=null,q=[],ht=3;const S={rows:[],idx:0,acc:0,rate:0,on:!1},V={x:0,y:0,set:!1};let H=!0,Tt=0,zt=!1,mt=0,K=!1,Ft=!1;function Bt(){const t=j.getBoundingClientRect(),a=Math.round(t.width||Math.min(window.innerWidth*.95,1240)),i=Math.round(a*d);let f=Math.min(window.devicePixelRatio||1,1.7);for(;a*f*i*f>9e5&&f>.55;)f-=.1;c=Math.max(1,Math.round(a*f)),l=Math.max(1,Math.round(i*f));for(const h of[R,X])h.width=c,h.height=l,h.style.height=i+"px";j.style.height=i+"px"}function Xt(){const t=Math.max(7,J*2.5),a=Math.max(3.2,J*1.3);Z=Math.ceil(t)+2,W=Math.ceil(a)+2,Q=[];for(let i=0;i<20;i++){const f=.34+i/19*.82,h=document.createElement("canvas");h.width=Z,h.height=W;const M=h.getContext("2d");if(!M){Q.push(h);continue}const C=Z/2,T=W/2,I=M.createLinearGradient(0,T-a/2,0,T+a/2),p=(N,D)=>`rgba(${P(N[0]*f)},${P(N[1]*f)},${P(N[2]*f)},${D})`;I.addColorStop(0,p($,0)),I.addColorStop(.16,p(v,1)),I.addColorStop(.5,p(g,1)),I.addColorStop(.84,p(v,1)),I.addColorStop(1,p($,0)),M.fillStyle=I,M.beginPath();const x=a/2;M.moveTo(C-t/2+x,T-x),M.lineTo(C+t/2-x,T-x),M.arc(C+t/2-x,T,x,-Math.PI/2,Math.PI/2),M.lineTo(C-t/2+x,T+x),M.arc(C-t/2+x,T,x,Math.PI/2,-Math.PI/2),M.closePath(),M.fill(),M.globalCompositeOperation="destination-in";const F=M.createLinearGradient(C-t/2,0,C+t/2,0);F.addColorStop(0,"rgba(0,0,0,0)"),F.addColorStop(.22,"rgba(0,0,0,1)"),F.addColorStop(.78,"rgba(0,0,0,1)"),F.addColorStop(1,"rgba(0,0,0,0)"),M.fillStyle=F,M.fillRect(0,0,Z,W),Q.push(h)}}function bt(){if(!ut)return;const t=ut;t.clearRect(0,0,c,l),t.fillStyle="#fff",t.textAlign="left",t.textBaseline="middle",t.font=`${r} ${lt}px ${o}`,t.fillText(e,Ct,l*.5);const a=t.getImageData(0,0,c,l).data,i=new Uint8Array(c*l);for(let y=0;y<l;y++)for(let A=0;A<c;A++){const w=y*c+A,O=a[w*4+3]/255,_=xt(A*.5,y*.5)*.22+xt(A*1.8,y*1.8)*.1;i[w]=O>.5+(_-.16)?1:0}St=i;const f=ee(i,c,l),h=new Float32Array(c*l);for(let y=1;y<l-1;y++)for(let A=1;A<c-1;A++){const w=y*c+A;h[w]=(f[w]*4+f[w-1]+f[w+1]+f[w-c]+f[w+c])/8}const M=new Float32Array(c*l),C=new Float32Array(c*l),T=new Float32Array(c*l),I=new Float32Array(c*l);for(let y=1;y<l-1;y++)for(let A=1;A<c-1;A++){const w=y*c+A;if(!i[w])continue;const O=(h[w+1]-h[w-1])*.5,_=(h[w+c]-h[w-c])*.5;T[w]=O,I[w]=_,M[w]=O*O-_*_,C[w]=2*O*_}const p=Math.max(7,Math.round(l*.05)),x=_t(M,c,l,p,2),F=_t(C,c,l,p,2);ft=new Float32Array(c*l),dt=new Float32Array(c*l);for(let y=0;y<c*l;y++){if(!i[y])continue;const A=.5*Math.atan2(F[y],x[y]);ft[y]=Math.cos(A),dt[y]=Math.sin(A)}const N=Math.max(9,l*.04),D=new Float32Array(c*l),ot=-.45,rt=-.62,wt=.64;for(let y=1;y<l-1;y++)for(let A=1;A<c-1;A++){const w=y*c+A;if(!i[w])continue;let O=T[w],_=I[w];const Qt=Math.hypot(O,_)||1;O/=Qt,_/=Qt;const Zt=h[w],Wt=(1-Math.min(Zt/N,1))*1.25;let Lt=-O*Wt,Rt=-_*Wt;const te=1.5,Pt=Math.hypot(Lt,Rt,te);Lt/=Pt,Rt/=Pt;let $t=Lt*ot+Rt*rt+te/Pt*wt;$t<0&&($t=0);const me=Math.min(1,.45+.55*Math.min(Zt/(N*.7),1));D[w]=Math.min(1.12,(.5+.75*$t)*me)}At=D,k=document.createElement("canvas"),k.width=c,k.height=l;const z=k.getContext("2d");G=document.createElement("canvas"),G.width=c,G.height=l;const Y=G.getContext("2d");if(z&&Y){const y=z.createImageData(c,l),A=Y.createImageData(c,l);for(let w=0;w<c*l;w++)i[w]&&(y.data[w*4]=255,y.data[w*4+1]=255,y.data[w*4+2]=255,y.data[w*4+3]=255,A.data[w*4+3]=255);z.putImageData(y,0,0),Y.putImageData(A,0,0)}}function Gt(){U=document.createElement("canvas"),U.width=c,U.height=l;const t=U.getContext("2d",{willReadFrequently:!0});if(t){const a=t.createRadialGradient(c*.5,l*.4,0,c*.5,l*.5,c*.72);a.addColorStop(0,kt(ce)),a.addColorStop(1,kt(st)),t.fillStyle=a,t.fillRect(0,0,c,l);const i=t.getImageData(0,0,c,l),f=i.data;for(let h=0;h<l;h++)for(let M=0;M<c;M++){const C=(h*c+M)*4,T=Math.sin(M*1.9)*.5+.5,I=Math.sin(h*1.9)*.5+.5,p=T*I*9-4.5+(xt(M*.18,h*.18)-.5)*15;f[C]=P(f[C]+p),f[C+1]=P(f[C+1]+p),f[C+2]=P(f[C+2]+p*1.1)}t.putImageData(i,0,0)}tt=document.createElement("canvas"),tt.width=c,tt.height=l,ut=tt.getContext("2d",{willReadFrequently:!0})}function Et(){const t=Math.max(1.6,J*.6);ht=t;const a=[];for(let i=0;i<l;i+=t)for(let f=0;f<c;f+=t){const h=(B(Math.floor(f),Math.floor(i))-.5)*t*.9,M=(B(Math.floor(i),Math.floor(f))-.5)*t*.9,C=Math.round(f+h),T=Math.round(i+M);if(C<1||T<1||C>=c-1||T>=l-1)continue;const I=T*c+C;if(!St[I])continue;const p=Math.atan2(dt[I],ft[I]),x=.86+B(C*7,T*13)*.18;let F=At[I]*x;F=F<0?0:F>1.12?1.12:F,a.push({x:C,y:T,ang:p,idx:Math.min(19,Math.max(0,Math.round(F/1.12*19)))})}a.sort((i,f)=>i.x-f.x),q=a}function gt(t,a){t.save(),t.translate(a.x,a.y),t.rotate(a.ang),t.drawImage(Q[a.idx],-Z/2,-W/2),t.restore()}function yt(){const t=R.getContext("2d");if(t)for(const a of q)gt(t,a)}function Ut(){return q.length?q[q.length-1].x:0}function It(){return q.length?q[0].x:0}function et(){const t=R.getContext("2d");!t||!U||(t.drawImage(U,0,0),G&&(t.save(),t.globalAlpha=.85,t.filter=`blur(${Math.round(l*.018)}px)`,t.drawImage(G,0,Math.round(l*.02)),t.restore()))}function se(t){if(!t.length)return[];const a=Math.max(4,ht*1.5),i=new Map,f=(p,x)=>p+","+x;t.forEach((p,x)=>{const F=f(Math.floor(p.x/a),Math.floor(p.y/a));let N=i.get(F);N||i.set(F,N=[]),N.push(x)});const h=ht*1.8*(ht*1.8);function M(p){const x=t[p],F=Math.floor(x.x/a),N=Math.floor(x.y/a),D=[];for(let ot=-1;ot<=1;ot++)for(let rt=-1;rt<=1;rt++){const wt=i.get(f(F+ot,N+rt));if(wt)for(const z of wt){if(z===p)continue;const Y=t[z].x-x.x,y=t[z].y-x.y;Y*Y+y*y<=h&&D.push(z)}}return D}const C=new Uint8Array(t.length),T=[],I=t.map((p,x)=>x).sort((p,x)=>t[p].x+t[p].y-(t[x].x+t[x].y));for(const p of I){if(C[p])continue;let x=[p];for(C[p]=1;x.length;){T.push(x.map(N=>t[N]));const F=[];for(const N of x)for(const D of M(N))C[D]||(C[D]=1,F.push(D));x=F}}return T}function vt(t,a){et();const i=R.getContext("2d");if(!i)return;const f=[];for(const h of q)h.x<=t?gt(i,h):f.push(h);if(u){for(const h of f)gt(i,h);S.on=!1;return}S.rows=se(f),S.idx=0,S.acc=0,S.rate=a||m,S.on=S.rows.length>0}function le(t){const a=R.getContext("2d");if(a)for(t>S.rows.length&&(t=S.rows.length);S.idx<t;){const i=S.rows[S.idx++];for(const f of i)gt(a,f)}}function fe(t,a){const i=X.getContext("2d");if(!i||(i.clearRect(0,0,c,l),!b||!k))return;const f=c*.32,h=i.createRadialGradient(t,a,0,t,a,f);h.addColorStop(0,"rgba(255,250,238,0.18)"),h.addColorStop(.5,"rgba(255,250,238,0.055)"),h.addColorStop(1,"rgba(255,250,238,0)"),i.fillStyle=h,i.fillRect(0,0,c,l),i.globalCompositeOperation="destination-in",i.drawImage(k,0,0),i.globalCompositeOperation="source-over"}function Vt(){const t=R.getContext("2d");if(!t){lt=Math.round(l*.6),Ct=Math.round(c*.14);return}const a=e||"Ag";t.font=`${r} 100px ${o}`;const i=t.measureText(a).width||100;lt=Math.round(100*(c*.72)/i),t.font=`${r} ${lt}px ${o}`,Ct=Math.round(c/2-t.measureText(a).width/2)}function Ht(t){if(K)return;mt||(mt=t);const a=Math.min(.25,(t-mt)/1e3);mt=t,S.on&&(S.acc+=S.rate*a,le(S.acc),S.idx>=S.rows.length&&(S.on=!1)),H&&k&&(fe(V.set?V.x:c*.5,V.set?V.y:l*.34),H=!1),Tt=requestAnimationFrame(Ht)}function Kt(t){const a=X.getBoundingClientRect();V.x=(t.clientX-a.left)/(a.width||1)*c,V.y=(t.clientY-a.top)/(a.height||1)*l,V.set=!0,H=!0}b&&window.addEventListener("pointermove",Kt,{passive:!0});function de(t){bt(),Et(),E&&!u?vt(It()-1,m):(et(),yt(),S.on=!1),H=!0}function ue(){K||(Bt(),Gt(),J=Math.max(3.4,l*.0095),Xt(),Vt(),de(),Ft=!0,zt||(zt=!0,Tt=requestAnimationFrame(Ht)))}let nt;function he(t){const a=`${r} 200px ${L}`;let i=!1;try{i=!!document.fonts&&document.fonts.check(a)}catch{i=!0}if(!document.fonts||i){t();return}let f=!1;const h=()=>{f||(f=!0,nt&&clearTimeout(nt),t())};document.fonts.load(a,e).then(()=>document.fonts.ready).then(h,h),nt=setTimeout(h,1500)}he(ue);let Nt;function Yt(){clearTimeout(Nt),Nt=setTimeout(()=>Jt.resize(),200)}window.addEventListener("resize",Yt);const Jt={get text(){return e},setText(t){if(K||!Ft){e=t??"";return}t=t??"";const a=t.length>e.length&&e.length>0&&t.startsWith(e),i=a?Ut():-1;e=t,bt(),Et(),u||!E?(et(),yt(),S.on=!1):vt(a&&i>0?Math.min(i,Ut()):It()-1,a?320:m),H=!0},replay(){K||!Ft||(u||!E?(et(),yt(),S.on=!1):vt(It()-1,m),H=!0)},resize(){K||(Bt(),Gt(),J=Math.max(3.4,l*.0095),Xt(),Vt(),bt(),Et(),et(),yt(),S.on=!1,H=!0)},destroy(){if(!K){K=!0,cancelAnimationFrame(Tt),clearTimeout(Nt),nt&&clearTimeout(nt),window.removeEventListener("resize",Yt),b&&window.removeEventListener("pointermove",Kt);for(const t of Mt)t.remove();Q=[],q=[],S.rows=[],St=new Uint8Array(0),At=new Float32Array(0),ft=new Float32Array(0),dt=new Float32Array(0),k=G=U=tt=null,ut=null}}};return Jt}const oe="data-threadtext",pt=new WeakMap;function re(s,n){const e=s.dataset,o={text:e.ttText??n};if(e.ttFont&&(o.font=e.ttFont),e.ttWeight!==void 0){const r=parseFloat(e.ttWeight);isNaN(r)||(o.weight=r)}if(e.ttThreadColor&&(o.threadColor=e.ttThreadColor),e.ttFabricColor&&(o.fabricColor=e.ttFabricColor),e.ttPitch!==void 0){const r=parseFloat(e.ttPitch);isNaN(r)||(o.pitch=r)}if(e.ttSewRate!==void 0){const r=parseFloat(e.ttSewRate);isNaN(r)||(o.sewRate=r)}if(e.ttAspect!==void 0){const r=parseFloat(e.ttAspect);isNaN(r)||(o.aspect=r)}return e.ttSheen==="false"&&(o.sheen=!1),e.ttAnimate==="false"&&(o.animate=!1),o}function ae(s){jt(s);const n=s.innerHTML,e=(s.dataset.ttText??s.textContent??"").trim();if(!e)return;const o=re(s,e);s.setAttribute("role","img"),s.setAttribute("aria-label",e),s.innerHTML="";const r=ne(s,o);pt.set(s,{instance:r,originalHTML:n})}function jt(s){const n=pt.get(s);n&&(n.instance.destroy(),s.removeAttribute("role"),s.removeAttribute("aria-label"),s.innerHTML=n.originalHTML,pt.delete(s))}function ct(s=document){s.querySelectorAll(`[${oe}]`).forEach(ae)}function ie(){const s=()=>{var n;typeof document<"u"&&((n=document.fonts)!=null&&n.ready)?document.fonts.ready.then(()=>ct()).catch(()=>ct()):ct()};typeof document<"u"&&document.readyState==="loading"?document.addEventListener("DOMContentLoaded",s,{once:!0}):s()}return ie(),at.destroy=jt,at.init=ct,Object.defineProperty(at,Symbol.toStringTag,{value:"Module"}),at})({});

package/package.json

@@ -0,0 +1,85 @@
+{
+	"name": "@liiift-studio/threadtext",
+	"version": "0.0.1",
+	"description": "Render any text as photorealistic procedural satin-stitch embroidery, in real time in the browser, from the font's glyph geometry",
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "vite build",
+		"build:webflow": "vite build --config vite.webflow.config.ts",
+		"test": "vitest",
+		"test:run": "vitest run",
+		"lint": "tsc --noEmit",
+		"demo": "python3 -m http.server 8080",
+		"prepublishOnly": "npm run test:run && npm run build && npm run build:webflow"
+	},
+	"peerDependencies": {
+		"react": ">=17",
+		"react-dom": ">=17"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@testing-library/react": "^16.3.2",
+		"@types/react": "^19.0.0",
+		"@vitejs/plugin-react": "^4.0.0",
+		"happy-dom": "^20.10.6",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0",
+		"vite-plugin-dts": "^4.0.0",
+		"vitest": "^3.0.0"
+	},
+	"keywords": [
+		"typography",
+		"web-typography",
+		"embroidery",
+		"satin-stitch",
+		"cross-stitch",
+		"thread",
+		"thread-text",
+		"procedural",
+		"canvas",
+		"real-time",
+		"variable-font",
+		"text-effect",
+		"liiift-studio",
+		"type-tools",
+		"frontend",
+		"react",
+		"typescript"
+	],
+	"author": "Quinn Keaveney <quinn@liiift.studio>",
+	"license": "MIT",
+	"homepage": "https://threadtext.com",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Liiift-Studio/ThreadText.git"
+	},
+	"bugs": {
+		"url": "https://github.com/Liiift-Studio/ThreadText/issues"
+	},
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	}
+}