svg-scroll-draw 0.7.0 → 1.1.0

package/README.md

@@ -7,7 +7,7 @@
 [![license](https://img.shields.io/npm/l/svg-scroll-draw)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/DhruvilChauahan0210/ink-scroll?style=flat)](https://github.com/DhruvilChauahan0210/ink-scroll/stargazers)
 
-> Scroll-driven SVG path animation. Zero dependencies. ~3 KB gzipped.
+> Scroll-driven SVG path animation. Zero dependencies. ~4.4 KB gzipped — vs 35–40 KB for Framer Motion / GSAP DrawSVG.
 
 **[Live Demo](https://ink-scroll.vercel.app)** · [npm](https://www.npmjs.com/package/svg-scroll-draw) · [Report a bug](https://github.com/DhruvilChauahan0210/ink-scroll/issues)
 
@@ -137,6 +137,24 @@ const containerRef = useScrollDraw({ easing: 'ease-out', speed: 1.2 });
 | `trigger.end` | `string` | `"bottom top"` | When animation ends |
 | `onProgress` | `(alpha: number) => void` | — | Called every animation frame with current draw progress (0–1) |
 | `onComplete` | `() => void` | — | Fires once when all paths reach 100% draw progress |
+| `native` | `boolean` | `true` | Run the draw as a native CSS scroll-driven animation when the browser supports it and the config is simple. Falls back to the JS engine automatically. Set `false` to always use the JS engine |
+
+### Native CSS rendering
+
+For the common case — a default trigger, a named easing, optional `fade`, forward or
+reverse — `svg-scroll-draw` hands the animation to the browser's native
+[`animation-timeline: view()`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline).
+The draw then runs on the compositor with **zero per-frame JavaScript and no scroll or
+resize listeners**.
+
+It falls back to the JS engine automatically when the browser lacks support, or when the
+config uses something CSS can't express declaratively — callbacks (`onProgress` /
+`onComplete` / `waypoints`), `stagger`, `morphTo`, `velocityScale`, `autoReverse`,
+`once`, `repeat`, a custom trigger, a custom scroll container, `speed ≠ 1`, a
+custom-function or `spring` easing, or animated color/width/fill. The full instance API
+(`pause`, `resume`, `seek`, `replay`, `getProgress`, `destroy`) works on both paths.
+
+Pass `native: false` to force the JS engine regardless.
 
 ### Trigger anchors
 
@@ -160,11 +178,14 @@ Available named anchors: `top`, `center`, `bottom`.
 
 ## Bundle sizes
 
-| Format | Size |
-|---|---|
-| ESM (`.mjs`) | ~3.2 KB |
-| CJS (`.cjs`) | ~3.2 KB |
-| IIFE / CDN (`.global.js`) | ~4.2 KB (includes Web Component) |
+| Format | Minified | Gzipped |
+|---|---|---|
+| ESM (`.mjs`) | 11.9 KB | ~4.4 KB |
+| CJS (`.cjs`) | 11.9 KB | ~4.4 KB |
+| React (`/react`) | 13.4 KB | ~4.8 KB |
+| IIFE / CDN (`.global.js`) | 12.9 KB | ~4.8 KB (includes Web Component) |
+
+Still 8–9× smaller than Framer Motion (~35 KB) or GSAP DrawSVG (~40 KB), and on supporting browsers the simple case runs as a native CSS scroll animation with zero per-frame JavaScript.
 
 ---
 

package/dist/angular/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var me={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function Te(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ae(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function We(e,r,s){return Math.min(s,Math.max(r,e))}function z(e,r,s,o){return s===r?0:We((e-r)/(s-r)*o,0,1)}function Se(e,r,s,o,a){let f=Te(e.top,e.height,r,o.element)-Ae(o.viewport,s),p=Te(e.top,e.height,r,a.element)-Ae(a.viewport,s);return {tStart:f,tEnd:p}}function ke(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ge(e,r,s){let o=ke(e),a=ke(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*s)},${Math.round(o[1]+(a[1]-o[1])*s)},${Math.round(o[2]+(a[2]-o[2])*s)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ve(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Me("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ze(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=s==="x"?window.scrollX:window.scrollY,p=e-f,D=r-f,B=s==="x";o.innerHTML=`
-      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${B?`left:${D}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${D}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function Le(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),D=o[a++]??p;return String(+(p+(D-p)*s).toFixed(4))})}function De(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:p="linear",trigger:D={},stagger:B=0,direction:I="forward",once:X=false,debug:Pe=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:he=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Fe="0px",repeat:_=0,repeatDelay:be=0,morphTo:P,clip:le,onProgress:we,onStart:ve,onComplete:j}=r,R=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,Ce=de(D.start??"top bottom"),Ne=de(D.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,T=Array.isArray(C)?C[0]:null,y=Array.isArray(C)?C[1]:typeof C=="string"?C:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let n=t*100;switch(R){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let G=R?[]:Array.from(e.querySelectorAll(o)),E=[],A=[],k=0,S=0,$=false,O=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,xe=performance.now();function ce(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function He(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function Ee(){let t=e.getBoundingClientRect(),n,l,m;if(d){let V=d.getBoundingClientRect();n=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,m=ce();}else n=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ce();let re=Se({top:n,height:l},m,He(),Ce,Ne);k=re.tStart,S=re.tEnd,Pe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=ze(k,S,x));}function Re(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=n==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,m)=>{l.style.strokeDashoffset=n==="reverse"?`${E[m]*t}`:`${E[m]*(1-t)}`,f&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),T&&y?l.style.stroke=ge(T,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),P&&l.tagName.toLowerCase()==="path"&&A[m]&&l.setAttribute("d",Le(A[m],P,t));});}function $e(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,n)=>{t.style.strokeDasharray=`${E[n]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[n]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[n]&&t.setAttribute("d",A[n]);});}if(G.forEach(t=>{Ve(t);let n=ye(t);E.push(n),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=I==="reverse"?`${n}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=I==="reverse"?"0":`${n}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),R){if(s)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(s)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};Ee();function ee(){if(!J||F)return;let t=performance.now(),n=ce(),l=a;if(ie!==false){let i=t-xe,c=i>0?Math.abs(n-(Z<0?n:Z))/i:0;l=a*Math.max(.2,1+c*(typeof ie=="number"?ie:1)*.04);}Z=n,xe=t;let m=se?K===-1||n>=K?"forward":"reverse":I;K=n;let re=S-k,V=true;if(R){let i=ae(z(n,k,S,l));X&&!se&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=m==="reverse"?1-i:i;e.style.clipPath=W(c),we?.(i),!O&&z(n,k,S,l)>0&&(O=true,ve?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},be))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,c)=>{let L=c*B*re,u=ae(z(n,k+L,S+L,l));X&&!se&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${E[c]*u}`:`${E[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),T&&y?i.style.stroke=ge(T,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[c]&&i.setAttribute("d",Le(A[c],P,u)),c===0&&(we?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(V=false);}),oe){let i=ae(z(n,k,S,l));for(let c in oe){let L=parseFloat(c);i>=L&&!Y.has(L)&&(Y.add(L),oe[c]?.());}}!O&&z(n,k,S,l)>0&&(O=true,ve?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),$e();},be))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(n=>{J=n.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Oe,rootMargin:Fe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,n)=>{E[n]=ye(t),t.style.strokeDasharray=`${E[n]}`;}),Ee();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),he>0?setTimeout(()=>fe.observe(e),he):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),$e();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let n=Math.min(1,Math.max(0,t));Q=n,v=n,F=true,cancelAnimationFrame(M),Re(n,I);},getProgress(){return Q}}}var Ie=class{constructor(){this.instance=null;}init(r,s={}){return this.destroy(),this.instance=De(r,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Ie;
+'use strict';var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function we(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function Ie(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ce(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function $e(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Ue(e,r,s){return Math.min(s,Math.max(r,e))}function B(e,r,s,o){return s===r?0:Ue((e-r)/(s-r)*o,0,1)}function Ee(e,r,s,o,f){let d=Ie(e.top,e.height,r,o.element)-Ce(o.viewport,s),p=Ie(e.top,e.height,r,f.element)-Ce(f.viewport,s);return {tStart:d,tEnd:p}}function Oe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,s){let o=Oe(e),f=Oe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*s)},${Math.round(o[1]+(f[1]-o[1])*s)},${Math.round(o[2]+(f[2]-o[2])*s)})`}function Fe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ne={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},je=0;function Je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ke(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Fe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Fe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Qe(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function f(){let d=s==="x"?window.scrollX:window.scrollY,p=e-d,L=r-d,X=s==="x";o.innerHTML=`
+      <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${X?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",f,{passive:true}),f(),o}function Re(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),L=o[f++]??p;return String(+(p+(L-p)*s).toFixed(4))})}function He(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:f=1,fade:d=false,easing:p="linear",trigger:L={},stagger:X=0,direction:y="forward",once:U=false,debug:We=false,axis:$="y",scrollContainer:ce,autoReverse:Z=false,delay:pe=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:Ge=0,rootMargin:ze="0px",repeat:j=0,repeatDelay:Se=0,morphTo:D,clip:me,native:qe=true,onProgress:de,onStart:ye,onComplete:J}=r,W=me===true?"left":typeof me=="string"?me:false,re=typeof p=="function"?p:ve[p]??ve.linear,ke=we(L.start??"top bottom"),Ae=we(L.end??"bottom top"),b=typeof ce=="string"?document.querySelector(ce):ce??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let n=t*100;switch(W){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let v=W?[]:Array.from(e.querySelectorAll(o)),h=[],C=[],O=0,F=0,P=false,G=false,N=0,ne=false,T=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?$==="x"?b.scrollLeft:b.scrollTop:$==="x"?window.scrollX:window.scrollY}function Me(){return b?$==="x"?b.clientWidth:b.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),n,a,m;if(b){let w=b.getBoundingClientRect();n=$==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=$==="x"?t.width:t.height,m=Q();}else n=$==="x"?t.left:t.top,a=$==="x"?t.width:t.height,m=Q();let q=Ee({top:n,height:a},m,Me(),ke,Ae);O=q.tStart,F=q.tEnd,We&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Qe(O,F,$));}function Be(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=n==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=n==="reverse"?`${h[m]*t}`:`${h[m]*(1-t)}`,d&&(a.style.opacity=n==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),D&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",Re(C[m],D,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,n)=>{t.style.strokeDasharray=`${h[n]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${h[n]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),D&&t.tagName.toLowerCase()==="path"&&C[n]&&t.setAttribute("d",C[n]);});}if(v.forEach(t=>{Ke(t);let n=$e(t);h.push(n),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?`${n}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),S!==null&&(t.style.strokeWidth=`${S}`),A!==null&&(t.style.fillOpacity=`${A}`),D&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",D)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?"0":`${n}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(s)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(s)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function _e(){return !(qe===false||!Je()||!v.length||typeof p!="string"||!(p in Ne)||W||$!=="y"||b||f!==1||X!==0||U||Z||te!==false||D||ee||j||pe>0||de||ye||J||R!=null||H!=null||V!=null||(L.start??"top bottom").trim()!=="top bottom"||(L.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++je}`,n=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${n};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ne[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(h[M])),u.style.strokeDasharray=`${h[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,g=-1;function c(){if(g>=0)return g;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=Ee({top:u.top,height:u.height},Q(),Me(),ke,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,g=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));g=M,l=true,v.forEach((Y,De)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${h[De]*M}`:`${h[De]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(_e())return Xe();Le();function ue(){if(!ne||z)return;let t=performance.now(),n=Q(),a=f;if(te!==false){let i=t-Te,l=i>0?Math.abs(n-(le<0?n:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=n,Te=t;let m=Z?se===-1||n>=se?"forward":"reverse":y;se=n;let q=F-O,w=true;if(W){let i=re(B(n,O,F,a));U&&!Z&&(T=Math.max(T,i),i=T),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),de?.(i),!G&&B(n,O,F,a)>0&&(G=true,ye?.()),i>=1&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,e.style.clipPath=_(0);},Se))):i<1&&!U&&(P=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let g=l*X*q,c=re(B(n,O+g,F+g,a));U&&!Z&&(T=Math.max(T,c),c=T),oe=c,i.style.strokeDashoffset=m==="reverse"?`${h[l]*c}`:`${h[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&E?i.style.stroke=xe(I,E,c):E&&(i.style.stroke=E),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*c}`:A!==null&&(i.style.fillOpacity=`${A}`),D&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",Re(C[l],D,c)),l===0&&(de?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(n,O,F,a));for(let l in ee){let g=parseFloat(l);i>=g&&!ae.has(g)&&(ae.add(g),ee[l]?.());}}!G&&B(n,O,F,a)>0&&(G=true,ye?.()),w&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,ae.clear(),Pe();},Se))):!w&&!U&&(P=false),N=requestAnimationFrame(ue);}let ge=new IntersectionObserver(t=>{t.forEach(n=>{ne=n.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:Ge,rootMargin:ze}),be;function fe(){clearTimeout(be),be=setTimeout(()=>{v.forEach((t,n)=>{h[n]=$e(t),t.style.strokeDasharray=`${h[n]}`;}),Le();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>ge.observe(e),pe):ge.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),ge.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(be),he?.remove();},replay(){T=-1,se=-1,le=-1,G=false,P=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let n=Math.min(1,Math.max(0,t));oe=n,T=n,z=true,cancelAnimationFrame(N),Be(n,y);},getProgress(){return oe}}}var Ve=class{constructor(){this.instance=null;}init(r,s={}){return this.destroy(),this.instance=He(r,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Ve;

package/dist/angular/index.d.mts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,11 +49,31 @@ interface ScrollDrawOptions {
     repeat?: number | 'infinite';
     /** Milliseconds to wait between repeats. Default 0. */
     repeatDelay?: number;
-    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/angular/index.d.ts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,11 +49,31 @@ interface ScrollDrawOptions {
     repeat?: number | 'infinite';
     /** Milliseconds to wait between repeats. Default 0. */
     repeatDelay?: number;
-    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/angular/index.mjs

@@ -1,3 +1,3 @@
-var me={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function Te(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ae(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function We(e,r,s){return Math.min(s,Math.max(r,e))}function z(e,r,s,o){return s===r?0:We((e-r)/(s-r)*o,0,1)}function Se(e,r,s,o,a){let f=Te(e.top,e.height,r,o.element)-Ae(o.viewport,s),p=Te(e.top,e.height,r,a.element)-Ae(a.viewport,s);return {tStart:f,tEnd:p}}function ke(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ge(e,r,s){let o=ke(e),a=ke(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*s)},${Math.round(o[1]+(a[1]-o[1])*s)},${Math.round(o[2]+(a[2]-o[2])*s)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ve(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Me("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ze(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=s==="x"?window.scrollX:window.scrollY,p=e-f,D=r-f,B=s==="x";o.innerHTML=`
-      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${B?`left:${D}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${D}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function Le(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),D=o[a++]??p;return String(+(p+(D-p)*s).toFixed(4))})}function De(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:p="linear",trigger:D={},stagger:B=0,direction:I="forward",once:X=false,debug:Pe=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:he=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Fe="0px",repeat:_=0,repeatDelay:be=0,morphTo:P,clip:le,onProgress:we,onStart:ve,onComplete:j}=r,R=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,Ce=de(D.start??"top bottom"),Ne=de(D.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,T=Array.isArray(C)?C[0]:null,y=Array.isArray(C)?C[1]:typeof C=="string"?C:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let n=t*100;switch(R){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let G=R?[]:Array.from(e.querySelectorAll(o)),E=[],A=[],k=0,S=0,$=false,O=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,xe=performance.now();function ce(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function He(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function Ee(){let t=e.getBoundingClientRect(),n,l,m;if(d){let V=d.getBoundingClientRect();n=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,m=ce();}else n=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ce();let re=Se({top:n,height:l},m,He(),Ce,Ne);k=re.tStart,S=re.tEnd,Pe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=ze(k,S,x));}function Re(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=n==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,m)=>{l.style.strokeDashoffset=n==="reverse"?`${E[m]*t}`:`${E[m]*(1-t)}`,f&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),T&&y?l.style.stroke=ge(T,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),P&&l.tagName.toLowerCase()==="path"&&A[m]&&l.setAttribute("d",Le(A[m],P,t));});}function $e(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,n)=>{t.style.strokeDasharray=`${E[n]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[n]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[n]&&t.setAttribute("d",A[n]);});}if(G.forEach(t=>{Ve(t);let n=ye(t);E.push(n),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=I==="reverse"?`${n}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=I==="reverse"?"0":`${n}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),R){if(s)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(s)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};Ee();function ee(){if(!J||F)return;let t=performance.now(),n=ce(),l=a;if(ie!==false){let i=t-xe,c=i>0?Math.abs(n-(Z<0?n:Z))/i:0;l=a*Math.max(.2,1+c*(typeof ie=="number"?ie:1)*.04);}Z=n,xe=t;let m=se?K===-1||n>=K?"forward":"reverse":I;K=n;let re=S-k,V=true;if(R){let i=ae(z(n,k,S,l));X&&!se&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=m==="reverse"?1-i:i;e.style.clipPath=W(c),we?.(i),!O&&z(n,k,S,l)>0&&(O=true,ve?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},be))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,c)=>{let L=c*B*re,u=ae(z(n,k+L,S+L,l));X&&!se&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${E[c]*u}`:`${E[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),T&&y?i.style.stroke=ge(T,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[c]&&i.setAttribute("d",Le(A[c],P,u)),c===0&&(we?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(V=false);}),oe){let i=ae(z(n,k,S,l));for(let c in oe){let L=parseFloat(c);i>=L&&!Y.has(L)&&(Y.add(L),oe[c]?.());}}!O&&z(n,k,S,l)>0&&(O=true,ve?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),$e();},be))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(n=>{J=n.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Oe,rootMargin:Fe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,n)=>{E[n]=ye(t),t.style.strokeDasharray=`${E[n]}`;}),Ee();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),he>0?setTimeout(()=>fe.observe(e),he):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),$e();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let n=Math.min(1,Math.max(0,t));Q=n,v=n,F=true,cancelAnimationFrame(M),Re(n,I);},getProgress(){return Q}}}var Ie=class{constructor(){this.instance=null;}init(r,s={}){return this.destroy(),this.instance=De(r,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Ie as ScrollDrawRef};
+var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function we(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function Ie(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ce(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function $e(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Ue(e,r,s){return Math.min(s,Math.max(r,e))}function B(e,r,s,o){return s===r?0:Ue((e-r)/(s-r)*o,0,1)}function Ee(e,r,s,o,f){let d=Ie(e.top,e.height,r,o.element)-Ce(o.viewport,s),p=Ie(e.top,e.height,r,f.element)-Ce(f.viewport,s);return {tStart:d,tEnd:p}}function Oe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,s){let o=Oe(e),f=Oe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*s)},${Math.round(o[1]+(f[1]-o[1])*s)},${Math.round(o[2]+(f[2]-o[2])*s)})`}function Fe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ne={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},je=0;function Je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ke(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Fe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Fe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Qe(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function f(){let d=s==="x"?window.scrollX:window.scrollY,p=e-d,L=r-d,X=s==="x";o.innerHTML=`
+      <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${X?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",f,{passive:true}),f(),o}function Re(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),L=o[f++]??p;return String(+(p+(L-p)*s).toFixed(4))})}function He(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:f=1,fade:d=false,easing:p="linear",trigger:L={},stagger:X=0,direction:y="forward",once:U=false,debug:We=false,axis:$="y",scrollContainer:ce,autoReverse:Z=false,delay:pe=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:Ge=0,rootMargin:ze="0px",repeat:j=0,repeatDelay:Se=0,morphTo:D,clip:me,native:qe=true,onProgress:de,onStart:ye,onComplete:J}=r,W=me===true?"left":typeof me=="string"?me:false,re=typeof p=="function"?p:ve[p]??ve.linear,ke=we(L.start??"top bottom"),Ae=we(L.end??"bottom top"),b=typeof ce=="string"?document.querySelector(ce):ce??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let n=t*100;switch(W){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let v=W?[]:Array.from(e.querySelectorAll(o)),h=[],C=[],O=0,F=0,P=false,G=false,N=0,ne=false,T=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?$==="x"?b.scrollLeft:b.scrollTop:$==="x"?window.scrollX:window.scrollY}function Me(){return b?$==="x"?b.clientWidth:b.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),n,a,m;if(b){let w=b.getBoundingClientRect();n=$==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=$==="x"?t.width:t.height,m=Q();}else n=$==="x"?t.left:t.top,a=$==="x"?t.width:t.height,m=Q();let q=Ee({top:n,height:a},m,Me(),ke,Ae);O=q.tStart,F=q.tEnd,We&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Qe(O,F,$));}function Be(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=n==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=n==="reverse"?`${h[m]*t}`:`${h[m]*(1-t)}`,d&&(a.style.opacity=n==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),D&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",Re(C[m],D,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,n)=>{t.style.strokeDasharray=`${h[n]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${h[n]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),D&&t.tagName.toLowerCase()==="path"&&C[n]&&t.setAttribute("d",C[n]);});}if(v.forEach(t=>{Ke(t);let n=$e(t);h.push(n),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?`${n}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),S!==null&&(t.style.strokeWidth=`${S}`),A!==null&&(t.style.fillOpacity=`${A}`),D&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",D)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?"0":`${n}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(s)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(s)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function _e(){return !(qe===false||!Je()||!v.length||typeof p!="string"||!(p in Ne)||W||$!=="y"||b||f!==1||X!==0||U||Z||te!==false||D||ee||j||pe>0||de||ye||J||R!=null||H!=null||V!=null||(L.start??"top bottom").trim()!=="top bottom"||(L.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++je}`,n=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${n};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ne[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(h[M])),u.style.strokeDasharray=`${h[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,g=-1;function c(){if(g>=0)return g;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=Ee({top:u.top,height:u.height},Q(),Me(),ke,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,g=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));g=M,l=true,v.forEach((Y,De)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${h[De]*M}`:`${h[De]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(_e())return Xe();Le();function ue(){if(!ne||z)return;let t=performance.now(),n=Q(),a=f;if(te!==false){let i=t-Te,l=i>0?Math.abs(n-(le<0?n:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=n,Te=t;let m=Z?se===-1||n>=se?"forward":"reverse":y;se=n;let q=F-O,w=true;if(W){let i=re(B(n,O,F,a));U&&!Z&&(T=Math.max(T,i),i=T),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),de?.(i),!G&&B(n,O,F,a)>0&&(G=true,ye?.()),i>=1&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,e.style.clipPath=_(0);},Se))):i<1&&!U&&(P=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let g=l*X*q,c=re(B(n,O+g,F+g,a));U&&!Z&&(T=Math.max(T,c),c=T),oe=c,i.style.strokeDashoffset=m==="reverse"?`${h[l]*c}`:`${h[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&E?i.style.stroke=xe(I,E,c):E&&(i.style.stroke=E),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*c}`:A!==null&&(i.style.fillOpacity=`${A}`),D&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",Re(C[l],D,c)),l===0&&(de?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(n,O,F,a));for(let l in ee){let g=parseFloat(l);i>=g&&!ae.has(g)&&(ae.add(g),ee[l]?.());}}!G&&B(n,O,F,a)>0&&(G=true,ye?.()),w&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,ae.clear(),Pe();},Se))):!w&&!U&&(P=false),N=requestAnimationFrame(ue);}let ge=new IntersectionObserver(t=>{t.forEach(n=>{ne=n.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:Ge,rootMargin:ze}),be;function fe(){clearTimeout(be),be=setTimeout(()=>{v.forEach((t,n)=>{h[n]=$e(t),t.style.strokeDasharray=`${h[n]}`;}),Le();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>ge.observe(e),pe):ge.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),ge.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(be),he?.remove();},replay(){T=-1,se=-1,le=-1,G=false,P=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let n=Math.min(1,Math.max(0,t));oe=n,T=n,z=true,cancelAnimationFrame(N),Be(n,y);},getProgress(){return oe}}}var Ve=class{constructor(){this.instance=null;}init(r,s={}){return this.destroy(),this.instance=He(r,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Ve as ScrollDrawRef};

package/dist/astro/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var de={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function ye(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Ae(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Te(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ge(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Re(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Re((e-r)/(n-r)*o,0,1)}function ke(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Te(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Te(a.viewport,n);return {tStart:f,tEnd:p}}function De(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function he(e,r,n){let o=De(e),a=De(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function We(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Me("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ve(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=n==="x"?window.scrollX:window.scrollY,p=e-f,L=r-f,B=n==="x";o.innerHTML=`
-      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function Le(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),L=o[a++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function ne(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:se,autoReverse:oe=false,delay:be=0,strokeColor:F,strokeWidth:N,fillOpacity:H,waypoints:ie,velocityScale:le=false,threshold:Oe=0,rootMargin:Pe="0px",repeat:_=0,repeatDelay:we=0,morphTo:O,clip:ae,onProgress:ve,onStart:xe,onComplete:J}=r,R=ae===true?"left":typeof ae=="string"?ae:false,ce=typeof p=="function"?p:de[p]??de.linear,Ce=ye(L.start??"top bottom"),Fe=ye(L.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,S=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let s=t*100;switch(R){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let q=R?[]:Array.from(e.querySelectorAll(o)),E=[],A=[],T=0,D=0,$=false,P=false,k=0,j=false,v=-1,K=-1,C=false,Q=0,G=0,U,ue=null,Y=new Set,Z=-1,Ee=performance.now();function fe(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function Ne(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let V=d.getBoundingClientRect();s=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,m=fe();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=fe();let re=ke({top:s,height:l},m,Ne(),Ce,Fe);T=re.tStart,D=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ve(T,D,x));}function He(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=s==="reverse"?1-t:t;e.style.clipPath=W(l);return}q.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${E[m]*t}`:`${E[m]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),S&&y?l.style.stroke=he(S,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),O&&l.tagName.toLowerCase()==="path"&&A[m]&&l.setAttribute("d",Le(A[m],O,t));});}function Se(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}q.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",S&&(t.style.stroke=S),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),O&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(q.forEach(t=>{We(t);let s=ge(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",S&&(t.style.stroke=S),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),R){if(n)return e.style.clipPath=W(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!j||C)return;let t=performance.now(),s=fe(),l=a;if(le!==false){let i=t-Ee,u=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+u*(typeof le=="number"?le:1)*.04);}Z=s,Ee=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=D-T,V=true;if(R){let i=ce(z(s,T,D,l));X&&!oe&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let u=m==="reverse"?1-i:i;e.style.clipPath=W(u),ve?.(i),!P&&z(s,T,D,l)>0&&(P=true,xe?.()),i>=1&&!$?($=true,J?.(),G<(_==="infinite"?1/0:_??0)&&(G++,U=setTimeout(()=>{v=-1,P=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),k=requestAnimationFrame(ee);return}if(q.forEach((i,u)=>{let M=u*B*re,c=ce(z(s,T+M,D+M,l));X&&!oe&&(v=Math.max(v,c),c=v),Q=c,i.style.strokeDashoffset=m==="reverse"?`${E[u]*c}`:`${E[u]*(1-c)}`,f&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),S&&y?i.style.stroke=he(S,y,c):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*c}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*c}`:w!==null&&(i.style.fillOpacity=`${w}`),O&&i.tagName.toLowerCase()==="path"&&A[u]&&i.setAttribute("d",Le(A[u],O,c)),u===0&&(ve?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(V=false);}),ie){let i=ce(z(s,T,D,l));for(let u in ie){let M=parseFloat(u);i>=M&&!Y.has(M)&&(Y.add(M),ie[u]?.());}}!P&&z(s,T,D,l)>0&&(P=true,xe?.()),V&&!$?($=true,J?.(),G<(_==="infinite"?1/0:_??0)&&(G++,U=setTimeout(()=>{v=-1,P=false,$=false,Y.clear(),Se();},we))):!V&&!X&&($=false),k=requestAnimationFrame(ee);}let pe=new IntersectionObserver(t=>{t.forEach(s=>{j=s.isIntersecting,j&&!C?k=requestAnimationFrame(ee):cancelAnimationFrame(k);});},{root:d??null,threshold:Oe,rootMargin:Pe}),me;function te(){clearTimeout(me),me=setTimeout(()=>{q.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>pe.observe(e),be):pe.observe(e),{destroy(){cancelAnimationFrame(k),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,K=-1,Z=-1,P=false,$=false,G=0,C=false,Y.clear(),clearTimeout(U),Se();},pause(){C=true,cancelAnimationFrame(k);},resume(){C&&(C=false,j&&(k=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,C=true,cancelAnimationFrame(k),He(s,I);},getProgress(){return Q}}}function ze(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?ne(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function Qe(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return ne(r,n)})}exports.initScrollDraw=Qe;exports.scrollDraw=ze;
+'use strict';var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function Se(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Oe(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Ce(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Ee(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Xe(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Xe((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,c){let d=Oe(e.top,e.height,r,o.element)-Ce(o.viewport,n),p=Oe(e.top,e.height,r,c.element)-Ce(c.viewport,n);return {tStart:d,tEnd:p}}function Fe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,n){let o=Fe(e),c=Fe(r);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*n)},${Math.round(o[1]+(c[1]-o[1])*n)},${Math.round(o[2]+(c[2]-o[2])*n)})`}function Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ue(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ke(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function c(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,M=r-d,X=n==="x";o.innerHTML=`
+      <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${X?`left:${M}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${M}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",c,{passive:true}),c(),o}function He(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),M=o[c++]??p;return String(+(p+(M-p)*n).toFixed(4))})}function fe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:c=1,fade:d=false,easing:p="linear",trigger:M={},stagger:X=0,direction:y="forward",once:J=false,debug:Ve=false,axis:S="y",scrollContainer:pe,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:We=0,rootMargin:Ge="0px",repeat:U=0,repeatDelay:ke=0,morphTo:P,clip:de,native:ze=true,onProgress:ye,onStart:ge,onComplete:j}=r,W=de===true?"left":typeof de=="string"?de:false,re=typeof p=="function"?p:ve[p]??ve.linear,Ae=Se(M.start??"top bottom"),De=Se(M.end??"bottom top"),b=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,$=Array.isArray(H)?H[0]:null,x=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let w=W?[]:Array.from(e.querySelectorAll(o)),g=[],O=[],C=0,F=0,L=false,G=false,N=0,ne=false,D=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?S==="x"?b.scrollLeft:b.scrollTop:S==="x"?window.scrollX:window.scrollY}function Me(){return b?S==="x"?b.clientWidth:b.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),s,a,m;if(b){let v=b.getBoundingClientRect();s=S==="x"?t.left-v.left+b.scrollLeft:t.top-v.top+b.scrollTop,a=S==="x"?t.width:t.height,m=Q();}else s=S==="x"?t.left:t.top,a=S==="x"?t.width:t.height,m=Q();let q=$e({top:s,height:a},m,Me(),Ae,De);C=q.tStart,F=q.tEnd,Ve&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Ke(C,F,S));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}w.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),$!==null&&x!==null?a.style.strokeWidth=`${$+(x-$)*t}`:x!==null&&(a.style.strokeWidth=`${x}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),P&&a.tagName.toLowerCase()==="path"&&O[m]&&a.setAttribute("d",He(O[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}w.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&O[s]&&t.setAttribute("d",O[s]);});}if(w.forEach(t=>{je(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?O.push(t.getAttribute("d")??""):O.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),x!==null&&(t.style.strokeWidth=`${x}`),A!==null&&(t.style.fillOpacity=`${A}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!Ue()||!w.length||typeof p!="string"||!(p in Re)||W||S!=="y"||b||c!==1||X!==0||J||Z||te!==false||P||ee||U||me>0||ye||ge||j||R!=null||H!=null||V!=null||(M.start??"top bottom").trim()!=="top bottom"||(M.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Je}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let v=document.createElement("style");v.setAttribute("data-svg-scroll-draw",""),v.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v);function i(u,T){u.style.setProperty("--ssd-len",String(g[T])),u.style.strokeDasharray=`${g[T]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}w.forEach(i);let l=false,h=-1;function f(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:T,tEnd:Y}=$e({top:u.top,height:u.height},Q(),Me(),Ae,De);return re(B(Q(),T,Y,c))}return {destroy(){w.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),v.remove();},replay(){l=false,h=-1,w.forEach(i);},pause(){l=true,w.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,w.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let T=Math.min(1,Math.max(0,u));h=T,l=true,w.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*T}`:`${g[Ie]*(1-T)}`,d&&(Y.style.opacity=y==="reverse"?`${1-T}`:`${T}`);});},getProgress(){return f()}}}if(Be())return _e();Le();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=c;if(te!==false){let i=t-Te,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=c*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Te=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-C,v=true;if(W){let i=re(B(s,C,F,a));J&&!Z&&(D=Math.max(D,i),i=D),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),ye?.(i),!G&&B(s,C,F,a)>0&&(G=true,ge?.()),i>=1&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,e.style.clipPath=_(0);},ke))):i<1&&!J&&(L=false),N=requestAnimationFrame(ue);return}if(w.forEach((i,l)=>{let h=l*X*q,f=re(B(s,C+h,F+h,a));J&&!Z&&(D=Math.max(D,f),f=D),oe=f,i.style.strokeDashoffset=m==="reverse"?`${g[l]*f}`:`${g[l]*(1-f)}`,d&&(i.style.opacity=m==="reverse"?`${1-f}`:`${f}`),I&&E?i.style.stroke=xe(I,E,f):E&&(i.style.stroke=E),$!==null&&x!==null?i.style.strokeWidth=`${$+(x-$)*f}`:x!==null&&(i.style.strokeWidth=`${x}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*f}`:A!==null&&(i.style.fillOpacity=`${A}`),P&&i.tagName.toLowerCase()==="path"&&O[l]&&i.setAttribute("d",He(O[l],P,f)),l===0&&(ye?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(v=false);}),ee){let i=re(B(s,C,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,C,F,a)>0&&(G=true,ge?.()),v&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,ae.clear(),Pe();},ke))):!v&&!J&&(L=false),N=requestAnimationFrame(ue);}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:We,rootMargin:Ge}),we;function ce(){clearTimeout(we),we=setTimeout(()=>{w.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),Le();},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(we),he?.remove();},replay(){D=-1,se=-1,le=-1,G=false,L=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,D=s,z=true,cancelAnimationFrame(N),qe(s,y);},getProgress(){return oe}}}function Qe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?fe(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function it(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return fe(r,n)})}exports.initScrollDraw=it;exports.scrollDraw=Qe;

package/dist/astro/index.d.mts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,11 +49,31 @@ interface ScrollDrawOptions {
     repeat?: number | 'infinite';
     /** Milliseconds to wait between repeats. Default 0. */
     repeatDelay?: number;
-    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/astro/index.d.ts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,11 +49,31 @@ interface ScrollDrawOptions {
     repeat?: number | 'infinite';
     /** Milliseconds to wait between repeats. Default 0. */
     repeatDelay?: number;
-    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/astro/index.mjs

@@ -1,3 +1,3 @@
-var de={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function ye(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Ae(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Te(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ge(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Re(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Re((e-r)/(n-r)*o,0,1)}function ke(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Te(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Te(a.viewport,n);return {tStart:f,tEnd:p}}function De(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function he(e,r,n){let o=De(e),a=De(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function We(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Me("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ve(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=n==="x"?window.scrollX:window.scrollY,p=e-f,L=r-f,B=n==="x";o.innerHTML=`
-      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function Le(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),L=o[a++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function ne(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:se,autoReverse:oe=false,delay:be=0,strokeColor:F,strokeWidth:N,fillOpacity:H,waypoints:ie,velocityScale:le=false,threshold:Oe=0,rootMargin:Pe="0px",repeat:_=0,repeatDelay:we=0,morphTo:O,clip:ae,onProgress:ve,onStart:xe,onComplete:J}=r,R=ae===true?"left":typeof ae=="string"?ae:false,ce=typeof p=="function"?p:de[p]??de.linear,Ce=ye(L.start??"top bottom"),Fe=ye(L.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,S=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let s=t*100;switch(R){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let q=R?[]:Array.from(e.querySelectorAll(o)),E=[],A=[],T=0,D=0,$=false,P=false,k=0,j=false,v=-1,K=-1,C=false,Q=0,G=0,U,ue=null,Y=new Set,Z=-1,Ee=performance.now();function fe(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function Ne(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let V=d.getBoundingClientRect();s=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,m=fe();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=fe();let re=ke({top:s,height:l},m,Ne(),Ce,Fe);T=re.tStart,D=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ve(T,D,x));}function He(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=s==="reverse"?1-t:t;e.style.clipPath=W(l);return}q.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${E[m]*t}`:`${E[m]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),S&&y?l.style.stroke=he(S,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),O&&l.tagName.toLowerCase()==="path"&&A[m]&&l.setAttribute("d",Le(A[m],O,t));});}function Se(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}q.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",S&&(t.style.stroke=S),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),O&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(q.forEach(t=>{We(t);let s=ge(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",S&&(t.style.stroke=S),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),R){if(n)return e.style.clipPath=W(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!j||C)return;let t=performance.now(),s=fe(),l=a;if(le!==false){let i=t-Ee,u=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+u*(typeof le=="number"?le:1)*.04);}Z=s,Ee=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=D-T,V=true;if(R){let i=ce(z(s,T,D,l));X&&!oe&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let u=m==="reverse"?1-i:i;e.style.clipPath=W(u),ve?.(i),!P&&z(s,T,D,l)>0&&(P=true,xe?.()),i>=1&&!$?($=true,J?.(),G<(_==="infinite"?1/0:_??0)&&(G++,U=setTimeout(()=>{v=-1,P=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),k=requestAnimationFrame(ee);return}if(q.forEach((i,u)=>{let M=u*B*re,c=ce(z(s,T+M,D+M,l));X&&!oe&&(v=Math.max(v,c),c=v),Q=c,i.style.strokeDashoffset=m==="reverse"?`${E[u]*c}`:`${E[u]*(1-c)}`,f&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),S&&y?i.style.stroke=he(S,y,c):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*c}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*c}`:w!==null&&(i.style.fillOpacity=`${w}`),O&&i.tagName.toLowerCase()==="path"&&A[u]&&i.setAttribute("d",Le(A[u],O,c)),u===0&&(ve?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(V=false);}),ie){let i=ce(z(s,T,D,l));for(let u in ie){let M=parseFloat(u);i>=M&&!Y.has(M)&&(Y.add(M),ie[u]?.());}}!P&&z(s,T,D,l)>0&&(P=true,xe?.()),V&&!$?($=true,J?.(),G<(_==="infinite"?1/0:_??0)&&(G++,U=setTimeout(()=>{v=-1,P=false,$=false,Y.clear(),Se();},we))):!V&&!X&&($=false),k=requestAnimationFrame(ee);}let pe=new IntersectionObserver(t=>{t.forEach(s=>{j=s.isIntersecting,j&&!C?k=requestAnimationFrame(ee):cancelAnimationFrame(k);});},{root:d??null,threshold:Oe,rootMargin:Pe}),me;function te(){clearTimeout(me),me=setTimeout(()=>{q.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>pe.observe(e),be):pe.observe(e),{destroy(){cancelAnimationFrame(k),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,K=-1,Z=-1,P=false,$=false,G=0,C=false,Y.clear(),clearTimeout(U),Se();},pause(){C=true,cancelAnimationFrame(k);},resume(){C&&(C=false,j&&(k=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,C=true,cancelAnimationFrame(k),He(s,I);},getProgress(){return Q}}}function ze(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?ne(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function Qe(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return ne(r,n)})}export{Qe as initScrollDraw,ze as scrollDraw};
+var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function Se(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Oe(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Ce(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Ee(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Xe(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Xe((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,c){let d=Oe(e.top,e.height,r,o.element)-Ce(o.viewport,n),p=Oe(e.top,e.height,r,c.element)-Ce(c.viewport,n);return {tStart:d,tEnd:p}}function Fe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,n){let o=Fe(e),c=Fe(r);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*n)},${Math.round(o[1]+(c[1]-o[1])*n)},${Math.round(o[2]+(c[2]-o[2])*n)})`}function Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ue(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ke(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function c(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,M=r-d,X=n==="x";o.innerHTML=`
+      <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${X?`left:${M}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${M}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",c,{passive:true}),c(),o}function He(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),M=o[c++]??p;return String(+(p+(M-p)*n).toFixed(4))})}function fe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:c=1,fade:d=false,easing:p="linear",trigger:M={},stagger:X=0,direction:y="forward",once:J=false,debug:Ve=false,axis:S="y",scrollContainer:pe,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:We=0,rootMargin:Ge="0px",repeat:U=0,repeatDelay:ke=0,morphTo:P,clip:de,native:ze=true,onProgress:ye,onStart:ge,onComplete:j}=r,W=de===true?"left":typeof de=="string"?de:false,re=typeof p=="function"?p:ve[p]??ve.linear,Ae=Se(M.start??"top bottom"),De=Se(M.end??"bottom top"),b=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,$=Array.isArray(H)?H[0]:null,x=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let w=W?[]:Array.from(e.querySelectorAll(o)),g=[],O=[],C=0,F=0,L=false,G=false,N=0,ne=false,D=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?S==="x"?b.scrollLeft:b.scrollTop:S==="x"?window.scrollX:window.scrollY}function Me(){return b?S==="x"?b.clientWidth:b.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),s,a,m;if(b){let v=b.getBoundingClientRect();s=S==="x"?t.left-v.left+b.scrollLeft:t.top-v.top+b.scrollTop,a=S==="x"?t.width:t.height,m=Q();}else s=S==="x"?t.left:t.top,a=S==="x"?t.width:t.height,m=Q();let q=$e({top:s,height:a},m,Me(),Ae,De);C=q.tStart,F=q.tEnd,Ve&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Ke(C,F,S));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}w.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),$!==null&&x!==null?a.style.strokeWidth=`${$+(x-$)*t}`:x!==null&&(a.style.strokeWidth=`${x}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),P&&a.tagName.toLowerCase()==="path"&&O[m]&&a.setAttribute("d",He(O[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}w.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&O[s]&&t.setAttribute("d",O[s]);});}if(w.forEach(t=>{je(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?O.push(t.getAttribute("d")??""):O.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),x!==null&&(t.style.strokeWidth=`${x}`),A!==null&&(t.style.fillOpacity=`${A}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!Ue()||!w.length||typeof p!="string"||!(p in Re)||W||S!=="y"||b||c!==1||X!==0||J||Z||te!==false||P||ee||U||me>0||ye||ge||j||R!=null||H!=null||V!=null||(M.start??"top bottom").trim()!=="top bottom"||(M.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Je}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let v=document.createElement("style");v.setAttribute("data-svg-scroll-draw",""),v.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v);function i(u,T){u.style.setProperty("--ssd-len",String(g[T])),u.style.strokeDasharray=`${g[T]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}w.forEach(i);let l=false,h=-1;function f(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:T,tEnd:Y}=$e({top:u.top,height:u.height},Q(),Me(),Ae,De);return re(B(Q(),T,Y,c))}return {destroy(){w.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),v.remove();},replay(){l=false,h=-1,w.forEach(i);},pause(){l=true,w.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,w.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let T=Math.min(1,Math.max(0,u));h=T,l=true,w.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*T}`:`${g[Ie]*(1-T)}`,d&&(Y.style.opacity=y==="reverse"?`${1-T}`:`${T}`);});},getProgress(){return f()}}}if(Be())return _e();Le();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=c;if(te!==false){let i=t-Te,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=c*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Te=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-C,v=true;if(W){let i=re(B(s,C,F,a));J&&!Z&&(D=Math.max(D,i),i=D),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),ye?.(i),!G&&B(s,C,F,a)>0&&(G=true,ge?.()),i>=1&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,e.style.clipPath=_(0);},ke))):i<1&&!J&&(L=false),N=requestAnimationFrame(ue);return}if(w.forEach((i,l)=>{let h=l*X*q,f=re(B(s,C+h,F+h,a));J&&!Z&&(D=Math.max(D,f),f=D),oe=f,i.style.strokeDashoffset=m==="reverse"?`${g[l]*f}`:`${g[l]*(1-f)}`,d&&(i.style.opacity=m==="reverse"?`${1-f}`:`${f}`),I&&E?i.style.stroke=xe(I,E,f):E&&(i.style.stroke=E),$!==null&&x!==null?i.style.strokeWidth=`${$+(x-$)*f}`:x!==null&&(i.style.strokeWidth=`${x}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*f}`:A!==null&&(i.style.fillOpacity=`${A}`),P&&i.tagName.toLowerCase()==="path"&&O[l]&&i.setAttribute("d",He(O[l],P,f)),l===0&&(ye?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(v=false);}),ee){let i=re(B(s,C,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,C,F,a)>0&&(G=true,ge?.()),v&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,ae.clear(),Pe();},ke))):!v&&!J&&(L=false),N=requestAnimationFrame(ue);}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:We,rootMargin:Ge}),we;function ce(){clearTimeout(we),we=setTimeout(()=>{w.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),Le();},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(we),he?.remove();},replay(){D=-1,se=-1,le=-1,G=false,L=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,D=s,z=true,cancelAnimationFrame(N),qe(s,y);},getProgress(){return oe}}}function Qe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?fe(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function it(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return fe(r,n)})}export{it as initScrollDraw,Qe as scrollDraw};