svg-scroll-draw 1.3.0 → 1.5.0

package/dist/astro/index.cjs

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

package/dist/astro/index.mjs

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

package/dist/cdn/svg-scroll-draw.global.js

@@ -1,3 +1,3 @@
-"use strict";var SvgScrollDraw=(()=>{var Te=Object.defineProperty;var rt=Object.getOwnPropertyDescriptor;var nt=Object.getOwnPropertyNames;var st=Object.prototype.hasOwnProperty;var ot=(e,n)=>{for(var r in n)Te(e,r,{get:n[r],enumerable:!0})},it=(e,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let u of nt(n))!st.call(e,u)&&u!==r&&Te(e,u,{get:()=>n[u],enumerable:!(o=rt(n,u))||o.enumerable});return e};var at=e=>it(Te({},"__esModule",{value:!0}),e);var dt={};ot(dt,{createBounce:()=>De,createElastic:()=>Le,createSpring:()=>Xe,scrollDraw:()=>pt});function Xe({tension:e=2.5,friction:n=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,n)}function De({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),u=Math.sqrt(o),p=0,y=[];for(let c=0;c<r;c++){let g=Math.pow(u,c);y.push(g),p+=g}let w=[0],R=0;for(let c=0;c<r;c++)R+=y[c]/p,w.push(R);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let g=0;g<r;g++)if(c<=w[g+1]){let se=(c-w[g])/(w[g+1]-w[g]);if(g===0)return se*(2-se);let L=1-Math.pow(o,g);return L+(1-L)*(2*se-1)*(2*se-1)}return 1}}function Le({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return p=>p<=0?0:p>=1?1:r*Math.pow(2,-10*p)*Math.sin((p-u)*(2*Math.PI)/o)+1}var Pe={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),bounce:De(),elastic:Le()};function Ie(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return{element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return{element:r,viewport:o}}function Ge(e,n,r,o){switch(o){case"top":return e+r;case"center":return e+r+n/2;case"bottom":return e+r+n;default:return e+r}}function Be(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return n/2;case"bottom":return n;default:return n}}function we(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function lt(e,n,r){return Math.min(r,Math.max(n,e))}function ne(e,n,r,o){return r===n?0:lt((e-n)/(r-n)*o,0,1)}function Fe(e,n,r,o,u){let p=Ge(e.top,e.height,n,o.element)-Be(o.viewport,r),y=Ge(e.top,e.height,n,u.element)-Be(u.viewport,r);return{tStart:p,tEnd:y}}function _e(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return[parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return[parseInt(r[1],16),parseInt(r[2],16),parseInt(r[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 ve(e,n,r){let o=_e(e),u=_e(n);return!o||!u?e:`rgb(${Math.round(o[0]+(u[0]-o[0])*r)},${Math.round(o[1]+(u[1]-o[1])*r)},${Math.round(o[2]+(u[2]-o[2])*r)})`}function Ue(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n)}var je={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ut=0;function ct(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ft(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?Ue("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Ue("Element has a fill \u2014 it may obscure the stroke animation.",e)}function mt(e,n,r){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 u(){let p=r==="x"?window.scrollX:window.scrollY,y=e-p,w=n-p,R=r==="x";o.innerHTML=`
-      <div style="position:absolute;${R?`left:${y}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${y}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;${R?`left:${w}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${w}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",u,{passive:!0}),u(),o}function Ce(e,n,r){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let y=parseFloat(p),w=o[u++]??y;return String(+(y+(w-y)*r).toFixed(4))})}function Ee(e,n={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:u=1,fade:p=!1,easing:y="linear",trigger:w={},stagger:R=0,direction:c="forward",once:g=!1,debug:se=!1,axis:L="y",scrollContainer:xe,autoReverse:ce=!1,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=!1,threshold:Re=0,rootMargin:Ne="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:N,clip:Se,autoplay:Je=!1,duration:Ke=1e3,native:Qe=!0,onProgress:le,onStart:me,onComplete:oe}=n,G=Se===!0?"left":typeof Se=="string"?Se:!1,Z=typeof y=="function"?y:Pe[y]??Pe.linear,He=Ie(w.start??"top bottom"),We=Ie(w.end??"bottom top"),P=typeof xe=="string"?document.querySelector(xe):xe??null,H=Array.isArray(j)?j[0]:null,A=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,M=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,k=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){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 $=G?[]:Array.from(e.querySelectorAll(o)),E=[],W=[],B=0,_=0,S=!1,O=!1,x=0,pe=!1,q=-1,de=-1,T=!1,te=0,V=0,X,Ae=null,U=new Set,ye=-1,qe=performance.now();function ue(){return P?L==="x"?P.scrollLeft:P.scrollTop:L==="x"?window.scrollX:window.scrollY}function ze(){return P?L==="x"?P.clientWidth:P.clientHeight:L==="x"?window.innerWidth:window.innerHeight}function Ve(){let t=e.getBoundingClientRect(),s,l,b;if(P){let D=P.getBoundingClientRect();s=L==="x"?t.left-D.left+P.scrollLeft:t.top-D.top+P.scrollTop,l=L==="x"?t.width:t.height,b=ue()}else s=L==="x"?t.left:t.top,l=L==="x"?t.width:t.height,b=ue();let C=Fe({top:s,height:l},b,ze(),He,We);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Ae?.remove(),Ae=mt(B,_,L))}function Ye(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}$.forEach((l,b)=>{l.style.strokeDashoffset=s==="reverse"?`${E[b]*t}`:`${E[b]*(1-t)}`,p&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&A?l.style.stroke=ve(H,A,t):A&&(l.style.stroke=A),I!==null&&M!==null?l.style.strokeWidth=`${I+(M-I)*t}`:M!==null&&(l.style.strokeWidth=`${M}`),F!==null&&k!==null?l.style.fillOpacity=`${F+(k-F)*t}`:k!==null&&(l.style.fillOpacity=`${k}`),N&&l.tagName.toLowerCase()==="path"&&W[b]&&l.setAttribute("d",Ce(W[b],N,t))})}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}$.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=c==="reverse"?"0":`${E[s]}`,p?t.style.opacity=c==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s])})}if($.forEach(t=>{ft(t);let s=we(t);E.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),r?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=c==="reverse"?`${s}`:"0",p&&(t.style.opacity="1"),A&&(t.style.stroke=A),M!==null&&(t.style.strokeWidth=`${M}`),k!==null&&(t.style.fillOpacity=`${k}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=c==="reverse"?"0":`${s}`,p?t.style.opacity=c==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`))}),G){if(r)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0)}else if(r)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ze(){return!(Qe===!1||!ct()||!$.length||typeof y!="string"||!(y in je)||G||L!=="y"||P||u!==1||R!==0||g||ce||fe!==!1||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||(w.start??"top bottom").trim()!=="top bottom"||(w.end??"bottom top").trim()!=="bottom top")}function et(){let t=`svg-scroll-draw-${++ut}`,s=c==="reverse"?"0":"var(--ssd-len)",l=c==="reverse"?"var(--ssd-len)":"0",b=`stroke-dashoffset:${s};`,C=`stroke-dashoffset:${l};`;p&&(b+=`opacity:${c==="reverse"?1:0};`,C+=`opacity:${c==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${b}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${je[y]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function a(i,m){i.style.setProperty("--ssd-len",String(E[m])),i.style.strokeDasharray=`${E[m]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t)}$.forEach(a);let d=!1,v=-1;function f(){if(v>=0)return v;let i=e.getBoundingClientRect(),{tStart:m,tEnd:h}=Fe({top:i.top,height:i.height},ue(),ze(),He,We);return Z(ne(ue(),m,h,u))}return{destroy(){$.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState=""}),D.remove()},replay(){d=!1,v=-1,$.forEach(a)},pause(){d=!0,$.forEach(i=>{i.style.animationPlayState="paused"})},resume(){d&&(d=!1,$.forEach(i=>{i.style.animationPlayState="running"}))},seek(i){let m=Math.min(1,Math.max(0,i));v=m,d=!0,$.forEach((h,re)=>{h.classList.remove(t),h.style.strokeDashoffset=c==="reverse"?`${E[re]*m}`:`${E[re]*(1-m)}`,p&&(h.style.opacity=c==="reverse"?`${1-m}`:`${m}`)})},getProgress(){return f()}}}if(Ze())return et();function tt(){let t=Math.max(1,Ke),s=0,l=0;function b(f){let i=!0;if(G){let m=Math.min(1,Math.max(0,f/t)),h=Z(m);te=h,e.style.setProperty("--scroll-draw-progress",String(h)),e.style.clipPath=ee(c==="reverse"?1-h:h),le?.(h),m<1&&(i=!1)}else $.forEach((m,h)=>{let re=h*R*t,ie=Math.min(1,Math.max(0,(f-re)/t)),z=Z(ie);m.style.strokeDashoffset=c==="reverse"?`${E[h]*z}`:`${E[h]*(1-z)}`,p&&(m.style.opacity=c==="reverse"?`${1-z}`:`${z}`),H&&A?m.style.stroke=ve(H,A,z):A&&(m.style.stroke=A),I!==null&&M!==null?m.style.strokeWidth=`${I+(M-I)*z}`:M!==null&&(m.style.strokeWidth=`${M}`),F!==null&&k!==null?m.style.fillOpacity=`${F+(k-F)*z}`:k!==null&&(m.style.fillOpacity=`${k}`),N&&m.tagName.toLowerCase()==="path"&&W[h]&&m.setAttribute("d",Ce(W[h],N,z)),h===0&&(le?.(z),e.style.setProperty("--scroll-draw-progress",String(z))),ie<1&&(i=!1)});if(Q){let m=Math.min(1,Math.max(0,f/t)),h=Z(m);for(let re in Q){let ie=parseFloat(re);h>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.())}}return i}function C(f){if(T)return;let i=f-s;O||(O=!0,me?.());let m=b(i);if(m&&!S){S=!0,b(t*(1+Math.max(0,$.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),O=!1,S=!1,U.clear(),he(),x=requestAnimationFrame(C)},$e));return}m||(x=requestAnimationFrame(C))}function D(){cancelAnimationFrame(x),clearTimeout(X),s=performance.now(),l=0,T=!1,O=!1,S=!1,V=0,U.clear(),he(),x=requestAnimationFrame(C)}let a=new IntersectionObserver(f=>{f.forEach(i=>{i.isIntersecting&&!(g&&S)?D():!i.isIntersecting&&!g&&!S&&(cancelAnimationFrame(x),clearTimeout(X),s=null)})},{root:P??null,threshold:Re,rootMargin:Ne}),d;function v(){clearTimeout(d),d=setTimeout(()=>{$.forEach((f,i)=>{E[i]=we(f),f.style.strokeDasharray=`${E[i]}`})},150)}return window.addEventListener("resize",v),window.addEventListener("orientationchange",v),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(x),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",v),window.removeEventListener("orientationchange",v),clearTimeout(d)},replay(){V=0,D()},pause(){T||(T=!0,l=performance.now()-s,cancelAnimationFrame(x))},resume(){T&&(T=!1,s=performance.now()-l,x=requestAnimationFrame(C))},seek(f){let i=Math.min(1,Math.max(0,f));te=i,T=!0,l=i*t,s=performance.now()-l,cancelAnimationFrame(x),b(l)},getProgress(){return te}}}if(Je)return tt();Ve();function ge(){if(!pe||T)return;let t=performance.now(),s=ue(),l=u;if(fe!==!1){let a=t-qe,d=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=u*Math.max(.2,1+d*(typeof fe=="number"?fe:1)*.04)}ye=s,qe=t;let b=ce?de===-1||s>=de?"forward":"reverse":c;de=s;let C=_-B,D=!0;if(G){let a=Z(ne(s,B,_,l));g&&!ce&&(q=Math.max(q,a),a=q),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let d=b==="reverse"?1-a:a;e.style.clipPath=ee(d),le?.(a),!O&&ne(s,B,_,l)>0&&(O=!0,me?.()),a>=1&&!S?(S=!0,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=!1,S=!1,e.style.clipPath=ee(0)},$e))):a<1&&!g&&(S=!1),x=requestAnimationFrame(ge);return}if($.forEach((a,d)=>{let v=d*R*C,f=Z(ne(s,B+v,_+v,l));g&&!ce&&(q=Math.max(q,f),f=q),te=f,a.style.strokeDashoffset=b==="reverse"?`${E[d]*f}`:`${E[d]*(1-f)}`,p&&(a.style.opacity=b==="reverse"?`${1-f}`:`${f}`),H&&A?a.style.stroke=ve(H,A,f):A&&(a.style.stroke=A),I!==null&&M!==null?a.style.strokeWidth=`${I+(M-I)*f}`:M!==null&&(a.style.strokeWidth=`${M}`),F!==null&&k!==null?a.style.fillOpacity=`${F+(k-F)*f}`:k!==null&&(a.style.fillOpacity=`${k}`),N&&a.tagName.toLowerCase()==="path"&&W[d]&&a.setAttribute("d",Ce(W[d],N,f)),d===0&&(le?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(D=!1)}),Q){let a=Z(ne(s,B,_,l));for(let d in Q){let v=parseFloat(d);a>=v&&!U.has(v)&&(U.add(v),Q[d]?.())}}!O&&ne(s,B,_,l)>0&&(O=!0,me?.()),D&&!S?(S=!0,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=!1,S=!1,U.clear(),he()},$e))):!D&&!g&&(S=!1),x=requestAnimationFrame(ge)}let Me=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!T?x=requestAnimationFrame(ge):cancelAnimationFrame(x)})},{root:P??null,threshold:Re,rootMargin:Ne}),ke;function be(){clearTimeout(ke),ke=setTimeout(()=>{$.forEach((t,s)=>{E[s]=we(t),t.style.strokeDasharray=`${E[s]}`}),Ve()},150)}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Me.observe(e),ae):Me.observe(e),{destroy(){cancelAnimationFrame(x),clearTimeout(X),Me.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(ke),Ae?.remove()},replay(){q=-1,de=-1,ye=-1,O=!1,S=!1,V=0,T=!1,U.clear(),clearTimeout(X),he()},pause(){T=!0,cancelAnimationFrame(x)},resume(){T&&(T=!1,pe&&(x=requestAnimationFrame(ge)))},seek(t){let s=Math.min(1,Math.max(0,t));te=s,q=s,T=!0,cancelAnimationFrame(x),Ye(s,c)},getProgress(){return te}}}function pt(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?Ee(o,n):(console.warn("[svg-scroll-draw] Container not found:",e),r)}var Oe=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let r={},o=this.getAttribute("speed"),u=this.getAttribute("easing"),p=this.getAttribute("stagger"),y=this.getAttribute("direction"),w=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),u&&(r.easing=u),p&&(r.stagger=parseFloat(p)),y&&(r.direction=y),w&&(r.selector=w),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Ee(this,r)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Oe);return at(dt);})();
+"use strict";var SvgScrollDraw=(()=>{var Pe=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var at=Object.getOwnPropertyNames;var lt=Object.prototype.hasOwnProperty;var ct=(e,r)=>{for(var n in r)Pe(e,n,{get:r[n],enumerable:!0})},ut=(e,r,n,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of at(r))!lt.call(e,i)&&i!==n&&Pe(e,i,{get:()=>r[i],enumerable:!(s=it(r,i))||s.enumerable});return e};var ft=e=>ut(Pe({},"__esModule",{value:!0}),e);var Et={};ct(Et,{Cinematic:()=>ke,createBounce:()=>Ie,createElastic:()=>Ce,createSpring:()=>Ye,scrollDraw:()=>vt});function Ye({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function Ie({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),s=Math.max(.01,Math.min(.99,r)),i=Math.sqrt(s),f=0,h=[];for(let a=0;a<n;a++){let v=Math.pow(i,a);h.push(v),f+=v}let w=[0],P=0;for(let a=0;a<n;a++)P+=h[a]/f,w.push(P);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let v=0;v<n;v++)if(a<=w[v+1]){let X=(a-w[v])/(w[v+1]-w[v]);if(v===0)return X*(2-X);let T=1-Math.pow(s,v);return T+(1-T)*(2*X-1)*(2*X-1)}return 1}}function Ce({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),s=Math.max(.1,r),i=n<=1?s/4:s/(2*Math.PI)*Math.asin(1/n);return f=>f<=0?0:f>=1?1:n*Math.pow(2,-10*f)*Math.sin((f-i)*(2*Math.PI)/s)+1}var te={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),bounce:Ie(),elastic:Ce()};function Fe(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return{element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return{element:n,viewport:s}}function je(e,r,n,s){switch(s){case"top":return e+n;case"center":return e+n+r/2;case"bottom":return e+n+r;default:return e+n}}function Xe(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"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function mt(e,r,n){return Math.min(n,Math.max(r,e))}function le(e,r,n,s){return n===r?0:mt((e-r)/(n-r)*s,0,1)}function Oe(e,r,n,s,i){let f=je(e.top,e.height,r,s.element)-Xe(s.viewport,n),h=je(e.top,e.height,r,i.element)-Xe(i.viewport,n);return{tStart:f,tEnd:h}}function Ue(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 s=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return s?[parseInt(s[1]),parseInt(s[2]),parseInt(s[3])]:null}function Se(e,r,n){let s=Ue(e),i=Ue(r);return!s||!i?e:`rgb(${Math.round(s[0]+(i[0]-s[0])*n)},${Math.round(s[1]+(i[1]-s[1])*n)},${Math.round(s[2]+(i[2]-s[2])*n)})`}function Je(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r)}var Ke={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},pt=0;function dt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function yt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Je("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Je("Element has a fill \u2014 it may obscure the stroke animation.",e)}function ht(e,r,n){let s=document.createElement("div");s.setAttribute("data-svg-scroll-draw-debug",""),s.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 i(){let f=n==="x"?window.scrollX:window.scrollY,h=e-f,w=r-f,P=n==="x";s.innerHTML=`
+      <div style="position:absolute;${P?`left:${h}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${h}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;${P?`left:${w}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${w}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(s),window.addEventListener("scroll",i,{passive:!0}),i(),s}function He(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let h=parseFloat(f),w=s[i++]??h;return String(+(h+(w-h)*n).toFixed(4))})}function Ae(e,r={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:s="path, polyline, line, polygon, rect, circle",speed:i=1,fade:f=!1,easing:h="linear",trigger:w={},stagger:P=0,direction:a="forward",once:v=!1,debug:X=!1,axis:T="y",scrollContainer:ce,autoReverse:re=!1,delay:x=0,strokeColor:y,strokeWidth:c,fillOpacity:E,waypoints:g,velocityScale:Y=!1,threshold:qe=0,rootMargin:We="0px",repeat:ne=0,repeatDelay:$e=0,morphTo:G,clip:Me,autoplay:Ze=!1,duration:et=1e3,native:tt=!0,onProgress:me,onStart:de,onComplete:ue}=r,J=Me===!0?"left":typeof Me=="string"?Me:!1,se=typeof h=="function"?h:te[h]??te.linear,Ve=Fe(w.start??"top bottom"),Ge=Fe(w.end??"bottom top"),N=typeof ce=="string"?document.querySelector(ce):ce??null,z=Array.isArray(y)?y[0]:null,I=Array.isArray(y)?y[1]:typeof y=="string"?y:null,R=Array.isArray(c)?c[0]:null,C=Array.isArray(c)?c[1]:typeof c=="number"?c:null,q=Array.isArray(E)?E[0]:null,F=Array.isArray(E)?E[1]:typeof E=="number"?E:null;function oe(t){let o=t*100;switch(J){case"right":return`inset(0 0 0 ${100-o}%)`;case"top":return`inset(0 0 ${100-o}% 0)`;case"bottom":return`inset(${100-o}% 0 0 0)`;case"center":return`circle(${t*150}% at 50% 50%)`;default:return`inset(0 ${100-o}% 0 0)`}}let D=J?[]:Array.from(e.querySelectorAll(s)),$=[],B=[],K=0,Q=0,L=!1,V=!1,M=0,ye=!1,_=-1,he=-1,O=!1,ie=0,U=0,Z,Te=null,ee=new Set,ge=-1,ze=performance.now();function pe(){return N?T==="x"?N.scrollLeft:N.scrollTop:T==="x"?window.scrollX:window.scrollY}function Be(){return N?T==="x"?N.clientWidth:N.clientHeight:T==="x"?window.innerWidth:window.innerHeight}function _e(){let t=e.getBoundingClientRect(),o,m,A;if(N){let H=N.getBoundingClientRect();o=T==="x"?t.left-H.left+N.scrollLeft:t.top-H.top+N.scrollTop,m=T==="x"?t.width:t.height,A=pe()}else o=T==="x"?t.left:t.top,m=T==="x"?t.width:t.height,A=pe();let W=Oe({top:o,height:m},A,Be(),Ve,Ge);K=W.tStart,Q=W.tEnd,X&&process.env.NODE_ENV!=="production"&&(Te?.remove(),Te=ht(K,Q,T))}function rt(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),J){let m=o==="reverse"?1-t:t;e.style.clipPath=oe(m);return}D.forEach((m,A)=>{m.style.strokeDashoffset=o==="reverse"?`${$[A]*t}`:`${$[A]*(1-t)}`,f&&(m.style.opacity=o==="reverse"?`${1-t}`:`${t}`),z&&I?m.style.stroke=Se(z,I,t):I&&(m.style.stroke=I),R!==null&&C!==null?m.style.strokeWidth=`${R+(C-R)*t}`:C!==null&&(m.style.strokeWidth=`${C}`),q!==null&&F!==null?m.style.fillOpacity=`${q+(F-q)*t}`:F!==null&&(m.style.fillOpacity=`${F}`),G&&m.tagName.toLowerCase()==="path"&&B[A]&&m.setAttribute("d",He(B[A],G,t))})}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),J){e.style.clipPath=oe(0);return}D.forEach((t,o)=>{t.style.strokeDasharray=`${$[o]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${$[o]}`,f?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",z&&(t.style.stroke=z),R!==null&&(t.style.strokeWidth=`${R}`),q!==null&&(t.style.fillOpacity=`${q}`),G&&t.tagName.toLowerCase()==="path"&&B[o]&&t.setAttribute("d",B[o])})}if(D.forEach(t=>{yt(t);let o=Ee(t);$.push(o),t.tagName.toLowerCase()==="path"?B.push(t.getAttribute("d")??""):B.push(""),n?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=a==="reverse"?`${o}`:"0",f&&(t.style.opacity="1"),I&&(t.style.stroke=I),C!==null&&(t.style.strokeWidth=`${C}`),F!==null&&(t.style.fillOpacity=`${F}`),G&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",G)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=a==="reverse"?"0":`${o}`,f?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",z&&(t.style.stroke=z),R!==null&&(t.style.strokeWidth=`${R}`),q!==null&&(t.style.fillOpacity=`${q}`))}),J){if(n)return e.style.clipPath=oe(1),ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=oe(0)}else if(n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function nt(){return!(tt===!1||!dt()||!D.length||typeof h!="string"||!(h in Ke)||J||T!=="y"||N||i!==1||P!==0||v||re||Y!==!1||G||g||ne||x>0||me||de||ue||y!=null||c!=null||E!=null||(w.start??"top bottom").trim()!=="top bottom"||(w.end??"bottom top").trim()!=="bottom top")}function st(){let t=`svg-scroll-draw-${++pt}`,o=a==="reverse"?"0":"var(--ssd-len)",m=a==="reverse"?"var(--ssd-len)":"0",A=`stroke-dashoffset:${o};`,W=`stroke-dashoffset:${m};`;f&&(A+=`opacity:${a==="reverse"?1:0};`,W+=`opacity:${a==="reverse"?0:1};`);let H=document.createElement("style");H.setAttribute("data-svg-scroll-draw",""),H.textContent=`@keyframes ${t}{from{${A}}to{${W}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ke[h]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(H);function u(l,d){l.style.setProperty("--ssd-len",String($[d])),l.style.strokeDasharray=`${$[d]}`,l.style.strokeDashoffset="",l.style.opacity="",l.style.animationPlayState="",l.classList.add(t)}D.forEach(u);let b=!1,k=-1;function p(){if(k>=0)return k;let l=e.getBoundingClientRect(),{tStart:d,tEnd:S}=Oe({top:l.top,height:l.height},pe(),Be(),Ve,Ge);return se(le(pe(),d,S,i))}return{destroy(){D.forEach(l=>{l.classList.remove(t),l.style.removeProperty("--ssd-len"),l.style.animationPlayState=""}),H.remove()},replay(){b=!1,k=-1,D.forEach(u)},pause(){b=!0,D.forEach(l=>{l.style.animationPlayState="paused"})},resume(){b&&(b=!1,D.forEach(l=>{l.style.animationPlayState="running"}))},seek(l){let d=Math.min(1,Math.max(0,l));k=d,b=!0,D.forEach((S,ae)=>{S.classList.remove(t),S.style.strokeDashoffset=a==="reverse"?`${$[ae]*d}`:`${$[ae]*(1-d)}`,f&&(S.style.opacity=a==="reverse"?`${1-d}`:`${d}`)})},getProgress(){return p()}}}if(nt())return st();function ot(){let t=Math.max(1,et),o=0,m=0;function A(p){let l=!0;if(J){let d=Math.min(1,Math.max(0,p/t)),S=se(d);ie=S,e.style.setProperty("--scroll-draw-progress",String(S)),e.style.clipPath=oe(a==="reverse"?1-S:S),me?.(S),d<1&&(l=!1)}else D.forEach((d,S)=>{let ae=S*P*t,fe=Math.min(1,Math.max(0,(p-ae)/t)),j=se(fe);d.style.strokeDashoffset=a==="reverse"?`${$[S]*j}`:`${$[S]*(1-j)}`,f&&(d.style.opacity=a==="reverse"?`${1-j}`:`${j}`),z&&I?d.style.stroke=Se(z,I,j):I&&(d.style.stroke=I),R!==null&&C!==null?d.style.strokeWidth=`${R+(C-R)*j}`:C!==null&&(d.style.strokeWidth=`${C}`),q!==null&&F!==null?d.style.fillOpacity=`${q+(F-q)*j}`:F!==null&&(d.style.fillOpacity=`${F}`),G&&d.tagName.toLowerCase()==="path"&&B[S]&&d.setAttribute("d",He(B[S],G,j)),S===0&&(me?.(j),e.style.setProperty("--scroll-draw-progress",String(j))),fe<1&&(l=!1)});if(g){let d=Math.min(1,Math.max(0,p/t)),S=se(d);for(let ae in g){let fe=parseFloat(ae);S>=fe&&!ee.has(fe)&&(ee.add(fe),g[ae]?.())}}return l}function W(p){if(O)return;let l=p-o;V||(V=!0,de?.());let d=A(l);if(d&&!L){L=!0,A(t*(1+Math.max(0,D.length-1)*P)),ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{o=performance.now(),V=!1,L=!1,ee.clear(),be(),M=requestAnimationFrame(W)},$e));return}d||(M=requestAnimationFrame(W))}function H(){cancelAnimationFrame(M),clearTimeout(Z),o=performance.now(),m=0,O=!1,V=!1,L=!1,U=0,ee.clear(),be(),M=requestAnimationFrame(W)}let u=new IntersectionObserver(p=>{p.forEach(l=>{l.isIntersecting&&!(v&&L)?H():!l.isIntersecting&&!v&&!L&&(cancelAnimationFrame(M),clearTimeout(Z),o=null)})},{root:N??null,threshold:qe,rootMargin:We}),b;function k(){clearTimeout(b),b=setTimeout(()=>{D.forEach((p,l)=>{$[l]=Ee(p),p.style.strokeDasharray=`${$[l]}`})},150)}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),x>0?setTimeout(()=>u.observe(e),x):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),u.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),clearTimeout(b)},replay(){U=0,H()},pause(){O||(O=!0,m=performance.now()-o,cancelAnimationFrame(M))},resume(){O&&(O=!1,o=performance.now()-m,M=requestAnimationFrame(W))},seek(p){let l=Math.min(1,Math.max(0,p));ie=l,O=!0,m=l*t,o=performance.now()-m,cancelAnimationFrame(M),A(m)},getProgress(){return ie}}}if(Ze)return ot();_e();function we(){if(!ye||O)return;let t=performance.now(),o=pe(),m=i;if(Y!==!1){let u=t-ze,b=u>0?Math.abs(o-(ge<0?o:ge))/u:0;m=i*Math.max(.2,1+b*(typeof Y=="number"?Y:1)*.04)}ge=o,ze=t;let A=re?he===-1||o>=he?"forward":"reverse":a;he=o;let W=Q-K,H=!0;if(J){let u=se(le(o,K,Q,m));v&&!re&&(_=Math.max(_,u),u=_),ie=u,e.style.setProperty("--scroll-draw-progress",String(u));let b=A==="reverse"?1-u:u;e.style.clipPath=oe(b),me?.(u),!V&&le(o,K,Q,m)>0&&(V=!0,de?.()),u>=1&&!L?(L=!0,ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{_=-1,V=!1,L=!1,e.style.clipPath=oe(0)},$e))):u<1&&!v&&(L=!1),M=requestAnimationFrame(we);return}if(D.forEach((u,b)=>{let k=b*P*W,p=se(le(o,K+k,Q+k,m));v&&!re&&(_=Math.max(_,p),p=_),ie=p,u.style.strokeDashoffset=A==="reverse"?`${$[b]*p}`:`${$[b]*(1-p)}`,f&&(u.style.opacity=A==="reverse"?`${1-p}`:`${p}`),z&&I?u.style.stroke=Se(z,I,p):I&&(u.style.stroke=I),R!==null&&C!==null?u.style.strokeWidth=`${R+(C-R)*p}`:C!==null&&(u.style.strokeWidth=`${C}`),q!==null&&F!==null?u.style.fillOpacity=`${q+(F-q)*p}`:F!==null&&(u.style.fillOpacity=`${F}`),G&&u.tagName.toLowerCase()==="path"&&B[b]&&u.setAttribute("d",He(B[b],G,p)),b===0&&(me?.(p),e.style.setProperty("--scroll-draw-progress",String(p))),p<1&&(H=!1)}),g){let u=se(le(o,K,Q,m));for(let b in g){let k=parseFloat(b);u>=k&&!ee.has(k)&&(ee.add(k),g[b]?.())}}!V&&le(o,K,Q,m)>0&&(V=!0,de?.()),H&&!L?(L=!0,ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{_=-1,V=!1,L=!1,ee.clear(),be()},$e))):!H&&!v&&(L=!1),M=requestAnimationFrame(we)}let De=new IntersectionObserver(t=>{t.forEach(o=>{ye=o.isIntersecting,ye&&!O?M=requestAnimationFrame(we):cancelAnimationFrame(M)})},{root:N??null,threshold:qe,rootMargin:We}),Le;function ve(){clearTimeout(Le),Le=setTimeout(()=>{D.forEach((t,o)=>{$[o]=Ee(t),t.style.strokeDasharray=`${$[o]}`}),_e()},150)}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),x>0?setTimeout(()=>De.observe(e),x):De.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),De.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Le),Te?.remove()},replay(){_=-1,he=-1,ge=-1,V=!1,L=!1,U=0,O=!1,ee.clear(),clearTimeout(Z),be()},pause(){O=!0,cancelAnimationFrame(M)},resume(){O&&(O=!1,ye&&(M=requestAnimationFrame(we)))},seek(t){let o=Math.min(1,Math.max(0,t));ie=o,_=o,O=!0,cancelAnimationFrame(M),rt(o,a)},getProgress(){return ie}}}var Qe="http://www.w3.org/2000/svg",gt="cinematic-photo",Ne=e=>e<0?0:e>1?1:e;function xe(e){let r=parseFloat(e);return Number.isFinite(r)?Ne(r/100):0}function bt(e){return te[e]??te.linear}var wt={destroy:()=>{},getProgress:()=>0},ke=class{constructor(r){if(typeof document>"u"){this.mount=null;return}this.mount=typeof r.wrapper=="string"?document.querySelector(r.wrapper):r.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",r.wrapper)}loadStory(r){let n=this.mount;if(typeof window>"u"||!n)return wt;n.style.position="relative",n.style.height=r.totalHeight,n.style.display="block";let s=document.createElement("div");s.setAttribute("data-cinematic-stage",""),s.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",n.appendChild(s);let i=[];for(let x of r.scenes){if(x.background){let c=document.createElement("img");c.id=gt,c.src=x.background,c.alt="",c.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",s.appendChild(c)}let y=x.animations.filter(c=>c.type==="draw");if(y.length){let c=document.createElementNS(Qe,"svg");c.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.canvas.height}`),c.setAttribute("preserveAspectRatio","xMidYMid meet"),c.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",s.appendChild(c);for(let E of y){let g=document.createElementNS(Qe,"path");g.id=E.target.replace(/^#/,""),g.setAttribute("d",E.d),g.setAttribute("fill","none"),g.setAttribute("stroke",E.stroke),g.setAttribute("stroke-width",String(E.strokeWidth)),g.setAttribute("stroke-linecap","round"),g.setAttribute("stroke-linejoin","round");let Y=E.length||g.getTotalLength?.()||0;g.style.strokeDasharray=String(Y),g.style.strokeDashoffset=String(Y),c.appendChild(g),i.push({kind:"draw",el:g,start:xe(E.start),end:xe(E.end),ease:bt(E.easing),length:Y})}}for(let c of x.animations){if(c.type!=="fade")continue;let E=s.querySelector(c.target)??document.querySelector(c.target);E&&(E.style.opacity=String(c.from),i.push({kind:"fade",el:E,start:xe(c.start),end:xe(c.end),ease:te["ease-in-out"]??te.linear,from:c.from,to:c.to}))}}let f=0,h=()=>{let x=n.offsetHeight-window.innerHeight;return x<=0?n.getBoundingClientRect().top<=0?1:0:Ne(-n.getBoundingClientRect().top/x)},w=x=>{for(let y of i){let c=y.end-y.start,E=c<=0?x>=y.end?1:0:Ne((x-y.start)/c),g=y.ease(E);y.kind==="draw"?y.el.style.strokeDashoffset=String(y.length*(1-g)):y.el.style.opacity=String(y.from+(y.to-y.from)*g)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return w(1),{destroy:()=>{},getProgress:()=>1};let P=0,a=!1,v=!1,X=()=>{f=h(),w(f),a&&(P=requestAnimationFrame(X))},T=()=>{a||(a=!0,P=requestAnimationFrame(X))},ce=()=>{a=!1,cancelAnimationFrame(P)},re=new IntersectionObserver(x=>{for(let y of x)v=y.isIntersecting,v?T():ce()},{threshold:0});return re.observe(s),f=h(),w(f),{destroy(){ce(),re.disconnect()},getProgress:()=>f}}};function vt(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let s=typeof e=="string"?document.querySelector(e):e;return s?Ae(s,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}var Re=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},s=this.getAttribute("speed"),i=this.getAttribute("easing"),f=this.getAttribute("stagger"),h=this.getAttribute("direction"),w=this.getAttribute("selector");s&&(n.speed=parseFloat(s)),i&&(n.easing=i),f&&(n.stagger=parseFloat(f)),h&&(n.direction=h),w&&(n.selector=w),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.instance=Ae(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Re);return ft(Et);})();

package/dist/cinematic/index.cjs

@@ -0,0 +1,2 @@
+'use strict';function I({bounces:e=3,decay:o=.5}={}){let s=Math.max(1,Math.round(e)),a=Math.max(.01,Math.min(.99,o)),d=Math.sqrt(a),m=0,h=[];for(let n=0;n<s;n++){let u=Math.pow(d,n);h.push(u),m+=u;}let l=[0],b=0;for(let n=0;n<s;n++)b+=h[n]/m,l.push(b);return n=>{if(n<=0)return 0;if(n>=1)return 1;for(let u=0;u<s;u++)if(n<=l[u+1]){let f=(n-l[u])/(l[u+1]-l[u]);if(u===0)return f*(2-f);let w=1-Math.pow(a,u);return w+(1-w)*(2*f-1)*(2*f-1)}return 1}}function k({amplitude:e=1,period:o=.4}={}){let s=Math.max(1,e),a=Math.max(.1,o),d=s<=1?a/4:a/(2*Math.PI)*Math.asin(1/s);return m=>m<=0?0:m>=1?1:s*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/a)+1}var g={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),bounce:I(),elastic:k()};var A="http://www.w3.org/2000/svg",T="cinematic-photo",S=e=>e<0?0:e>1?1:e;function y(e){let o=parseFloat(e);return Number.isFinite(o)?S(o/100):0}function P(e){return g[e]??g.linear}var C={destroy:()=>{},getProgress:()=>0},E=class{constructor(o){if(typeof document>"u"){this.mount=null;return}this.mount=typeof o.wrapper=="string"?document.querySelector(o.wrapper):o.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",o.wrapper);}loadStory(o){let s=this.mount;if(typeof window>"u"||!s)return C;s.style.position="relative",s.style.height=o.totalHeight,s.style.display="block";let a=document.createElement("div");a.setAttribute("data-cinematic-stage",""),a.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",s.appendChild(a);let d=[];for(let p of o.scenes){if(p.background){let t=document.createElement("img");t.id=T,t.src=p.background,t.alt="",t.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",a.appendChild(t);}let r=p.animations.filter(t=>t.type==="draw");if(r.length){let t=document.createElementNS(A,"svg");t.setAttribute("viewBox",`0 0 ${o.canvas.width} ${o.canvas.height}`),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",a.appendChild(t);for(let c of r){let i=document.createElementNS(A,"path");i.id=c.target.replace(/^#/,""),i.setAttribute("d",c.d),i.setAttribute("fill","none"),i.setAttribute("stroke",c.stroke),i.setAttribute("stroke-width",String(c.strokeWidth)),i.setAttribute("stroke-linecap","round"),i.setAttribute("stroke-linejoin","round");let M=c.length||i.getTotalLength?.()||0;i.style.strokeDasharray=String(M),i.style.strokeDashoffset=String(M),t.appendChild(i),d.push({kind:"draw",el:i,start:y(c.start),end:y(c.end),ease:P(c.easing),length:M});}}for(let t of p.animations){if(t.type!=="fade")continue;let c=a.querySelector(t.target)??document.querySelector(t.target);c&&(c.style.opacity=String(t.from),d.push({kind:"fade",el:c,start:y(t.start),end:y(t.end),ease:g["ease-in-out"]??g.linear,from:t.from,to:t.to}));}}let m=0,h=()=>{let p=s.offsetHeight-window.innerHeight;return p<=0?s.getBoundingClientRect().top<=0?1:0:S(-s.getBoundingClientRect().top/p)},l=p=>{for(let r of d){let t=r.end-r.start,c=t<=0?p>=r.end?1:0:S((p-r.start)/t),i=r.ease(c);r.kind==="draw"?r.el.style.strokeDashoffset=String(r.length*(1-i)):r.el.style.opacity=String(r.from+(r.to-r.from)*i);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return l(1),{destroy:()=>{},getProgress:()=>1};let b=0,n=false,u=false,f=()=>{m=h(),l(m),n&&(b=requestAnimationFrame(f));},w=()=>{n||(n=true,b=requestAnimationFrame(f));},x=()=>{n=false,cancelAnimationFrame(b);},v=new IntersectionObserver(p=>{for(let r of p)u=r.isIntersecting,u?w():x();},{threshold:0});return v.observe(a),m=h(),l(m),{destroy(){x(),v.disconnect();},getProgress:()=>m}}};
+exports.Cinematic=E;

package/dist/cinematic/index.d.mts

@@ -0,0 +1,72 @@
+type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+/** A traced path that strokes itself on across a scroll range. */
+interface DrawAnimation {
+    type: 'draw';
+    /** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
+    target: string;
+    /** SVG path data, in canvas coordinates. */
+    d: string;
+    /** Pre-measured total path length (px). */
+    length: number;
+    /** Scroll progress where the draw begins, e.g. "20%". */
+    start: string;
+    /** Scroll progress where the draw completes, e.g. "50%". */
+    end: string;
+    stroke: string;
+    strokeWidth: number;
+    easing: StoryEasing;
+}
+/** Any layer fading opacity across a scroll range. */
+interface FadeAnimation {
+    type: 'fade';
+    target: string;
+    start: string;
+    end: string;
+    from: number;
+    to: number;
+}
+type StoryAnimation = DrawAnimation | FadeAnimation;
+interface StoryScene {
+    id: string;
+    /** Optional background layer (a product photo) as a data URL or remote URL. */
+    background?: string;
+    animations: StoryAnimation[];
+}
+interface Story {
+    version: 1;
+    /** Total scroll height of the experience, e.g. "400vh". */
+    totalHeight: string;
+    /** The authoring viewBox the coordinates are expressed in. */
+    canvas: {
+        width: number;
+        height: number;
+    };
+    scenes: StoryScene[];
+}
+
+interface CinematicOptions {
+    /** Mount point — a selector or element. Becomes the scroll wrapper. */
+    wrapper: string | HTMLElement;
+}
+interface CinematicInstance {
+    /** Stop the scroll loop and detach observers (built DOM is left in place). */
+    destroy: () => void;
+    /** Current global scroll progress through the story (0–1). */
+    getProgress: () => number;
+}
+/**
+ * The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
+ * a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
+ * the user scrolls, all driven off the wrapper's scroll progress.
+ *
+ *   import { Cinematic } from "svg-scroll-draw";
+ *   import story from "./story.json";
+ *   new Cinematic({ wrapper: "#app" }).loadStory(story);
+ */
+declare class Cinematic {
+    private mount;
+    constructor(options: CinematicOptions);
+    loadStory(story: Story): CinematicInstance;
+}
+
+export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type Story, type StoryAnimation, type StoryEasing, type StoryScene };

package/dist/cinematic/index.d.ts

@@ -0,0 +1,72 @@
+type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+/** A traced path that strokes itself on across a scroll range. */
+interface DrawAnimation {
+    type: 'draw';
+    /** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
+    target: string;
+    /** SVG path data, in canvas coordinates. */
+    d: string;
+    /** Pre-measured total path length (px). */
+    length: number;
+    /** Scroll progress where the draw begins, e.g. "20%". */
+    start: string;
+    /** Scroll progress where the draw completes, e.g. "50%". */
+    end: string;
+    stroke: string;
+    strokeWidth: number;
+    easing: StoryEasing;
+}
+/** Any layer fading opacity across a scroll range. */
+interface FadeAnimation {
+    type: 'fade';
+    target: string;
+    start: string;
+    end: string;
+    from: number;
+    to: number;
+}
+type StoryAnimation = DrawAnimation | FadeAnimation;
+interface StoryScene {
+    id: string;
+    /** Optional background layer (a product photo) as a data URL or remote URL. */
+    background?: string;
+    animations: StoryAnimation[];
+}
+interface Story {
+    version: 1;
+    /** Total scroll height of the experience, e.g. "400vh". */
+    totalHeight: string;
+    /** The authoring viewBox the coordinates are expressed in. */
+    canvas: {
+        width: number;
+        height: number;
+    };
+    scenes: StoryScene[];
+}
+
+interface CinematicOptions {
+    /** Mount point — a selector or element. Becomes the scroll wrapper. */
+    wrapper: string | HTMLElement;
+}
+interface CinematicInstance {
+    /** Stop the scroll loop and detach observers (built DOM is left in place). */
+    destroy: () => void;
+    /** Current global scroll progress through the story (0–1). */
+    getProgress: () => number;
+}
+/**
+ * The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
+ * a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
+ * the user scrolls, all driven off the wrapper's scroll progress.
+ *
+ *   import { Cinematic } from "svg-scroll-draw";
+ *   import story from "./story.json";
+ *   new Cinematic({ wrapper: "#app" }).loadStory(story);
+ */
+declare class Cinematic {
+    private mount;
+    constructor(options: CinematicOptions);
+    loadStory(story: Story): CinematicInstance;
+}
+
+export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type Story, type StoryAnimation, type StoryEasing, type StoryScene };

package/dist/cinematic/index.mjs

@@ -0,0 +1,2 @@
+function I({bounces:e=3,decay:o=.5}={}){let s=Math.max(1,Math.round(e)),a=Math.max(.01,Math.min(.99,o)),d=Math.sqrt(a),m=0,h=[];for(let n=0;n<s;n++){let u=Math.pow(d,n);h.push(u),m+=u;}let l=[0],b=0;for(let n=0;n<s;n++)b+=h[n]/m,l.push(b);return n=>{if(n<=0)return 0;if(n>=1)return 1;for(let u=0;u<s;u++)if(n<=l[u+1]){let f=(n-l[u])/(l[u+1]-l[u]);if(u===0)return f*(2-f);let w=1-Math.pow(a,u);return w+(1-w)*(2*f-1)*(2*f-1)}return 1}}function k({amplitude:e=1,period:o=.4}={}){let s=Math.max(1,e),a=Math.max(.1,o),d=s<=1?a/4:a/(2*Math.PI)*Math.asin(1/s);return m=>m<=0?0:m>=1?1:s*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/a)+1}var g={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),bounce:I(),elastic:k()};var A="http://www.w3.org/2000/svg",T="cinematic-photo",S=e=>e<0?0:e>1?1:e;function y(e){let o=parseFloat(e);return Number.isFinite(o)?S(o/100):0}function P(e){return g[e]??g.linear}var C={destroy:()=>{},getProgress:()=>0},E=class{constructor(o){if(typeof document>"u"){this.mount=null;return}this.mount=typeof o.wrapper=="string"?document.querySelector(o.wrapper):o.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",o.wrapper);}loadStory(o){let s=this.mount;if(typeof window>"u"||!s)return C;s.style.position="relative",s.style.height=o.totalHeight,s.style.display="block";let a=document.createElement("div");a.setAttribute("data-cinematic-stage",""),a.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",s.appendChild(a);let d=[];for(let p of o.scenes){if(p.background){let t=document.createElement("img");t.id=T,t.src=p.background,t.alt="",t.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",a.appendChild(t);}let r=p.animations.filter(t=>t.type==="draw");if(r.length){let t=document.createElementNS(A,"svg");t.setAttribute("viewBox",`0 0 ${o.canvas.width} ${o.canvas.height}`),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",a.appendChild(t);for(let c of r){let i=document.createElementNS(A,"path");i.id=c.target.replace(/^#/,""),i.setAttribute("d",c.d),i.setAttribute("fill","none"),i.setAttribute("stroke",c.stroke),i.setAttribute("stroke-width",String(c.strokeWidth)),i.setAttribute("stroke-linecap","round"),i.setAttribute("stroke-linejoin","round");let M=c.length||i.getTotalLength?.()||0;i.style.strokeDasharray=String(M),i.style.strokeDashoffset=String(M),t.appendChild(i),d.push({kind:"draw",el:i,start:y(c.start),end:y(c.end),ease:P(c.easing),length:M});}}for(let t of p.animations){if(t.type!=="fade")continue;let c=a.querySelector(t.target)??document.querySelector(t.target);c&&(c.style.opacity=String(t.from),d.push({kind:"fade",el:c,start:y(t.start),end:y(t.end),ease:g["ease-in-out"]??g.linear,from:t.from,to:t.to}));}}let m=0,h=()=>{let p=s.offsetHeight-window.innerHeight;return p<=0?s.getBoundingClientRect().top<=0?1:0:S(-s.getBoundingClientRect().top/p)},l=p=>{for(let r of d){let t=r.end-r.start,c=t<=0?p>=r.end?1:0:S((p-r.start)/t),i=r.ease(c);r.kind==="draw"?r.el.style.strokeDashoffset=String(r.length*(1-i)):r.el.style.opacity=String(r.from+(r.to-r.from)*i);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return l(1),{destroy:()=>{},getProgress:()=>1};let b=0,n=false,u=false,f=()=>{m=h(),l(m),n&&(b=requestAnimationFrame(f));},w=()=>{n||(n=true,b=requestAnimationFrame(f));},x=()=>{n=false,cancelAnimationFrame(b);},v=new IntersectionObserver(p=>{for(let r of p)u=r.isIntersecting,u?w():x();},{threshold:0});return v.observe(a),m=h(),l(m),{destroy(){x(),v.disconnect();},getProgress:()=>m}}};
+export{E as Cinematic};

package/dist/index.cjs

@@ -1,3 +1,4 @@
-'use strict';function Ze({tension:e=2.5,friction:s=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,s)}function ze({bounces:e=3,decay:s=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,s)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<r;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<r;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<r;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function Ve({amplitude:e=1,period:s=.4}={}){let r=Math.max(1,e),o=Math.max(.1,s),d=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={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),bounce:ze(),elastic:Ve()};function Te(e="top bottom"){let s=e.trim();if(/^\d+(\.\d+)?%$/.test(s))return {element:"top",viewport:s};let[r="top",o="bottom"]=s.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function We(e,s,r,o){switch(o){case "top":return e+r;case "center":return e+r+s/2;case "bottom":return e+r+s;default:return e+r}}function He(e,s){if(/^\d+(\.\d+)?%$/.test(e))return s*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return s/2;case "bottom":return s;default:return s}}function we(e){let s=e.tagName.toLowerCase();if(s==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(s==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function et(e,s,r){return Math.min(r,Math.max(s,e))}function ne(e,s,r,o){return r===s?0:et((e-s)/(r-s)*o,0,1)}function Le(e,s,r,o,d){let m=We(e.top,e.height,s,o.element)-He(o.viewport,r),b=We(e.top,e.height,s,d.element)-He(d.viewport,r);return {tStart:m,tEnd:b}}function qe(e){let s=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(s)return [parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16),parseInt(s[3]+s[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[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 ve(e,s,r){let o=qe(e),d=qe(s);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*r)},${Math.round(o[1]+(d[1]-o[1])*r)},${Math.round(o[2]+(d[2]-o[2])*r)})`}function Ge(e,s){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,s);}var Be={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},tt=0;function rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function nt(e){let s=e.getAttribute("stroke"),r=e.getAttribute("fill");!s||s==="none"?Ge("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Ge("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,s,r){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 d(){let m=r==="x"?window.scrollX:window.scrollY,b=e-m,$=s-m,R=r==="x";o.innerHTML=`
-      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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",d,{passive:true}),d(),o}function De(e,s,r){let o=(s.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*r).toFixed(4))})}function _e(e,s={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Pe=0,rootMargin:Ie="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:N,clip:xe,autoplay:Xe=false,duration:Ue=1e3,native:je=true,onProgress:le,onStart:me,onComplete:oe}=s,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Fe=Te($.start??"top bottom"),Ce=Te($.end??"bottom top"),P=typeof Ee=="string"?document.querySelector(Ee):Ee??null,W=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,A=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,k=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let n=t*100;switch(G){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 x=G?[]:Array.from(e.querySelectorAll(o)),v=[],H=[],B=0,_=0,M=false,O=false,E=0,pe=false,q=-1,de=-1,T=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Oe=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function Re(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function Ne(){let t=e.getBoundingClientRect(),n,l,g;if(P){let L=P.getBoundingClientRect();n=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else n=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let C=Le({top:n,height:l},g,Re(),Fe,Ce);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=st(B,_,D));}function Je(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=n==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=n==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),W&&S?l.style.stroke=ve(W,S,t):S&&(l.style.stroke=S),I!==null&&A!==null?l.style.strokeWidth=`${I+(A-I)*t}`:A!==null&&(l.style.strokeWidth=`${A}`),F!==null&&k!==null?l.style.fillOpacity=`${F+(k-F)*t}`:k!==null&&(l.style.fillOpacity=`${k}`),N&&l.tagName.toLowerCase()==="path"&&H[g]&&l.setAttribute("d",De(H[g],N,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,n)=>{t.style.strokeDasharray=`${v[n]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[n]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&H[n]&&t.setAttribute("d",H[n]);});}if(x.forEach(t=>{nt(t);let n=we(t);v.push(n),t.tagName.toLowerCase()==="path"?H.push(t.getAttribute("d")??""):H.push(""),r?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=u==="reverse"?`${n}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),A!==null&&(t.style.strokeWidth=`${A}`),k!==null&&(t.style.fillOpacity=`${k}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=u==="reverse"?"0":`${n}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(r)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(r)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(je===false||!rt()||!x.length||typeof b!="string"||!(b in Be)||G||D!=="y"||P||d!==1||R!==0||h||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++tt}`,n=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${n};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Be[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=Le({top:i.top,height:i.height},ue(),Re(),Fe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Ue),n=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),z=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*z}`:`${v[y]*(1-z)}`,m&&(f.style.opacity=u==="reverse"?`${1-z}`:`${z}`),W&&S?f.style.stroke=ve(W,S,z):S&&(f.style.stroke=S),I!==null&&A!==null?f.style.strokeWidth=`${I+(A-I)*z}`:A!==null&&(f.style.strokeWidth=`${A}`),F!==null&&k!==null?f.style.fillOpacity=`${F+(k-F)*z}`:k!==null&&(f.style.fillOpacity=`${k}`),N&&f.tagName.toLowerCase()==="path"&&H[y]&&f.setAttribute("d",De(H[y],N,z)),y===0&&(le?.(z),e.style.setProperty("--scroll-draw-progress",String(z))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(c){if(T)return;let i=c-n;O||(O=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{n=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}f||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),n=performance.now(),l=0,T=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),n=null);});},{root:P??null,threshold:Pe,rootMargin:Ie}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){T||(T=true,l=performance.now()-n,cancelAnimationFrame(E));},resume(){T&&(T=false,n=performance.now()-l,E=requestAnimationFrame(C));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,T=true,l=i*t,n=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();Ne();function ge(){if(!pe||T)return;let t=performance.now(),n=ue(),l=d;if(fe!==false){let a=t-Oe,p=a>0?Math.abs(n-(ye<0?n:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=n,Oe=t;let g=ce?de===-1||n>=de?"forward":"reverse":u;de=n;let C=_-B,L=true;if(G){let a=Z(ne(n,B,_,l));h&&!ce&&(q=Math.max(q,a),a=q),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(n,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*C,c=Z(ne(n,B+w,_+w,l));h&&!ce&&(q=Math.max(q,c),c=q),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),W&&S?a.style.stroke=ve(W,S,c):S&&(a.style.stroke=S),I!==null&&A!==null?a.style.strokeWidth=`${I+(A-I)*c}`:A!==null&&(a.style.strokeWidth=`${A}`),F!==null&&k!==null?a.style.fillOpacity=`${F+(k-F)*c}`:k!==null&&(a.style.fillOpacity=`${k}`),N&&a.tagName.toLowerCase()==="path"&&H[p]&&a.setAttribute("d",De(H[p],N,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(n,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(n,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Se=new IntersectionObserver(t=>{t.forEach(n=>{pe=n.isIntersecting,pe&&!T?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Pe,rootMargin:Ie}),Ae;function be(){clearTimeout(Ae),Ae=setTimeout(()=>{x.forEach((t,n)=>{v[n]=we(t),t.style.strokeDasharray=`${v[n]}`;}),Ne();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Se.observe(e),ae):Se.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Se.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Ae),Me?.remove();},replay(){q=-1,de=-1,ye=-1,O=false,M=false,V=0,T=false,U.clear(),clearTimeout(X),he();},pause(){T=true,cancelAnimationFrame(E);},resume(){T&&(T=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let n=Math.min(1,Math.max(0,t));te=n,q=n,T=true,cancelAnimationFrame(E),Je(n,u);},getProgress(){return te}}}function ut(e,s){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?_e(o,s):(console.warn("[svg-scroll-draw] Container not found:",e),r)}exports.createBounce=ze;exports.createElastic=Ve;exports.createSpring=Ze;exports.scrollDraw=ut;
+'use strict';function nt({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function Be({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),f=0,v=[];for(let i=0;i<n;i++){let b=Math.pow(d,i);v.push(b),f+=b;}let S=[0],P=0;for(let i=0;i<n;i++)P+=v[i]/f,S.push(P);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let b=0;b<n;b++)if(i<=S[b+1]){let X=(i-S[b])/(S[b+1]-S[b]);if(b===0)return X*(2-X);let T=1-Math.pow(o,b);return T+(1-T)*(2*X-1)*(2*X-1)}return 1}}function _e({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return f=>f<=0?0:f>=1?1:n*Math.pow(2,-10*f)*Math.sin((f-d)*(2*Math.PI)/o)+1}var te={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),bounce:Be(),elastic:_e()};function Le(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 Ve(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 Ge(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 st(e,r,n){return Math.min(n,Math.max(r,e))}function le(e,r,n,o){return n===r?0:st((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,d){let f=Ve(e.top,e.height,r,o.element)-Ge(o.viewport,n),v=Ve(e.top,e.height,r,d.element)-Ge(d.viewport,n);return {tStart:f,tEnd:v}}function ze(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 Se(e,r,n){let o=ze(e),d=ze(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function je(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Xe={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ot=0;function it(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function at(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?je("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&je("Element has a fill \u2014 it may obscure the stroke animation.",e);}function lt(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 d(){let f=n==="x"?window.scrollX:window.scrollY,v=e-f,S=r-f,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`left:${v}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${v}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;${P?`left:${S}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${S}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",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let v=parseFloat(f),S=o[d++]??v;return String(+(v+(S-v)*n).toFixed(4))})}function Ue(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:d=1,fade:f=false,easing:v="linear",trigger:S={},stagger:P=0,direction:i="forward",once:b=false,debug:X=false,axis:T="y",scrollContainer:ce,autoReverse:re=false,delay:A=0,strokeColor:y,strokeWidth:l,fillOpacity:w,waypoints:h,velocityScale:Y=false,threshold:Fe=0,rootMargin:Oe="0px",repeat:ne=0,repeatDelay:Ae=0,morphTo:G,clip:ke,autoplay:Je=false,duration:Ke=1e3,native:Qe=true,onProgress:me,onStart:de,onComplete:ue}=r,J=ke===true?"left":typeof ke=="string"?ke:false,se=typeof v=="function"?v:te[v]??te.linear,Ne=Le(S.start??"top bottom"),He=Le(S.end??"bottom top"),H=typeof ce=="string"?document.querySelector(ce):ce??null,z=Array.isArray(y)?y[0]:null,I=Array.isArray(y)?y[1]:typeof y=="string"?y:null,R=Array.isArray(l)?l[0]:null,C=Array.isArray(l)?l[1]:typeof l=="number"?l:null,q=Array.isArray(w)?w[0]:null,F=Array.isArray(w)?w[1]:typeof w=="number"?w:null;function oe(t){let s=t*100;switch(J){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 L=J?[]:Array.from(e.querySelectorAll(o)),$=[],B=[],K=0,Q=0,D=false,V=false,M=0,ye=false,_=-1,he=-1,O=false,ie=0,U=0,Z,$e=null,ee=new Set,ge=-1,Re=performance.now();function pe(){return H?T==="x"?H.scrollLeft:H.scrollTop:T==="x"?window.scrollX:window.scrollY}function qe(){return H?T==="x"?H.clientWidth:H.clientHeight:T==="x"?window.innerWidth:window.innerHeight}function We(){let t=e.getBoundingClientRect(),s,u,x;if(H){let N=H.getBoundingClientRect();s=T==="x"?t.left-N.left+H.scrollLeft:t.top-N.top+H.scrollTop,u=T==="x"?t.width:t.height,x=pe();}else s=T==="x"?t.left:t.top,u=T==="x"?t.width:t.height,x=pe();let W=De({top:s,height:u},x,qe(),Ne,He);K=W.tStart,Q=W.tEnd,X&&process.env.NODE_ENV!=="production"&&($e?.remove(),$e=lt(K,Q,T));}function Ze(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),J){let u=s==="reverse"?1-t:t;e.style.clipPath=oe(u);return}L.forEach((u,x)=>{u.style.strokeDashoffset=s==="reverse"?`${$[x]*t}`:`${$[x]*(1-t)}`,f&&(u.style.opacity=s==="reverse"?`${1-t}`:`${t}`),z&&I?u.style.stroke=Se(z,I,t):I&&(u.style.stroke=I),R!==null&&C!==null?u.style.strokeWidth=`${R+(C-R)*t}`:C!==null&&(u.style.strokeWidth=`${C}`),q!==null&&F!==null?u.style.fillOpacity=`${q+(F-q)*t}`:F!==null&&(u.style.fillOpacity=`${F}`),G&&u.tagName.toLowerCase()==="path"&&B[x]&&u.setAttribute("d",Pe(B[x],G,t));});}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),J){e.style.clipPath=oe(0);return}L.forEach((t,s)=>{t.style.strokeDasharray=`${$[s]}`,t.style.strokeDashoffset=i==="reverse"?"0":`${$[s]}`,f?t.style.opacity=i==="reverse"?"1":"0":t.style.opacity="",z&&(t.style.stroke=z),R!==null&&(t.style.strokeWidth=`${R}`),q!==null&&(t.style.fillOpacity=`${q}`),G&&t.tagName.toLowerCase()==="path"&&B[s]&&t.setAttribute("d",B[s]);});}if(L.forEach(t=>{at(t);let s=Ee(t);$.push(s),t.tagName.toLowerCase()==="path"?B.push(t.getAttribute("d")??""):B.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=i==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),I&&(t.style.stroke=I),C!==null&&(t.style.strokeWidth=`${C}`),F!==null&&(t.style.fillOpacity=`${F}`),G&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",G)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=i==="reverse"?"0":`${s}`,f?t.style.opacity=i==="reverse"?"1":"0":t.style.opacity="",z&&(t.style.stroke=z),R!==null&&(t.style.strokeWidth=`${R}`),q!==null&&(t.style.fillOpacity=`${q}`));}),J){if(n)return e.style.clipPath=oe(1),ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=oe(0);}else if(n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function et(){return !(Qe===false||!it()||!L.length||typeof v!="string"||!(v in Xe)||J||T!=="y"||H||d!==1||P!==0||b||re||Y!==false||G||h||ne||A>0||me||de||ue||y!=null||l!=null||w!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function tt(){let t=`svg-scroll-draw-${++ot}`,s=i==="reverse"?"0":"var(--ssd-len)",u=i==="reverse"?"var(--ssd-len)":"0",x=`stroke-dashoffset:${s};`,W=`stroke-dashoffset:${u};`;f&&(x+=`opacity:${i==="reverse"?1:0};`,W+=`opacity:${i==="reverse"?0:1};`);let N=document.createElement("style");N.setAttribute("data-svg-scroll-draw",""),N.textContent=`@keyframes ${t}{from{${x}}to{${W}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Xe[v]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(N);function c(a,p){a.style.setProperty("--ssd-len",String($[p])),a.style.strokeDasharray=`${$[p]}`,a.style.strokeDashoffset="",a.style.opacity="",a.style.animationPlayState="",a.classList.add(t);}L.forEach(c);let g=false,k=-1;function m(){if(k>=0)return k;let a=e.getBoundingClientRect(),{tStart:p,tEnd:E}=De({top:a.top,height:a.height},pe(),qe(),Ne,He);return se(le(pe(),p,E,d))}return {destroy(){L.forEach(a=>{a.classList.remove(t),a.style.removeProperty("--ssd-len"),a.style.animationPlayState="";}),N.remove();},replay(){g=false,k=-1,L.forEach(c);},pause(){g=true,L.forEach(a=>{a.style.animationPlayState="paused";});},resume(){g&&(g=false,L.forEach(a=>{a.style.animationPlayState="running";}));},seek(a){let p=Math.min(1,Math.max(0,a));k=p,g=true,L.forEach((E,ae)=>{E.classList.remove(t),E.style.strokeDashoffset=i==="reverse"?`${$[ae]*p}`:`${$[ae]*(1-p)}`,f&&(E.style.opacity=i==="reverse"?`${1-p}`:`${p}`);});},getProgress(){return m()}}}if(et())return tt();function rt(){let t=Math.max(1,Ke),s=0,u=0;function x(m){let a=true;if(J){let p=Math.min(1,Math.max(0,m/t)),E=se(p);ie=E,e.style.setProperty("--scroll-draw-progress",String(E)),e.style.clipPath=oe(i==="reverse"?1-E:E),me?.(E),p<1&&(a=false);}else L.forEach((p,E)=>{let ae=E*P*t,fe=Math.min(1,Math.max(0,(m-ae)/t)),j=se(fe);p.style.strokeDashoffset=i==="reverse"?`${$[E]*j}`:`${$[E]*(1-j)}`,f&&(p.style.opacity=i==="reverse"?`${1-j}`:`${j}`),z&&I?p.style.stroke=Se(z,I,j):I&&(p.style.stroke=I),R!==null&&C!==null?p.style.strokeWidth=`${R+(C-R)*j}`:C!==null&&(p.style.strokeWidth=`${C}`),q!==null&&F!==null?p.style.fillOpacity=`${q+(F-q)*j}`:F!==null&&(p.style.fillOpacity=`${F}`),G&&p.tagName.toLowerCase()==="path"&&B[E]&&p.setAttribute("d",Pe(B[E],G,j)),E===0&&(me?.(j),e.style.setProperty("--scroll-draw-progress",String(j))),fe<1&&(a=false);});if(h){let p=Math.min(1,Math.max(0,m/t)),E=se(p);for(let ae in h){let fe=parseFloat(ae);E>=fe&&!ee.has(fe)&&(ee.add(fe),h[ae]?.());}}return a}function W(m){if(O)return;let a=m-s;V||(V=true,de?.());let p=x(a);if(p&&!D){D=true,x(t*(1+Math.max(0,L.length-1)*P)),ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{s=performance.now(),V=false,D=false,ee.clear(),be(),M=requestAnimationFrame(W);},Ae));return}p||(M=requestAnimationFrame(W));}function N(){cancelAnimationFrame(M),clearTimeout(Z),s=performance.now(),u=0,O=false,V=false,D=false,U=0,ee.clear(),be(),M=requestAnimationFrame(W);}let c=new IntersectionObserver(m=>{m.forEach(a=>{a.isIntersecting&&!(b&&D)?N():!a.isIntersecting&&!b&&!D&&(cancelAnimationFrame(M),clearTimeout(Z),s=null);});},{root:H??null,threshold:Fe,rootMargin:Oe}),g;function k(){clearTimeout(g),g=setTimeout(()=>{L.forEach((m,a)=>{$[a]=Ee(m),m.style.strokeDasharray=`${$[a]}`;});},150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),A>0?setTimeout(()=>c.observe(e),A):c.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),c.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),clearTimeout(g);},replay(){U=0,N();},pause(){O||(O=true,u=performance.now()-s,cancelAnimationFrame(M));},resume(){O&&(O=false,s=performance.now()-u,M=requestAnimationFrame(W));},seek(m){let a=Math.min(1,Math.max(0,m));ie=a,O=true,u=a*t,s=performance.now()-u,cancelAnimationFrame(M),x(u);},getProgress(){return ie}}}if(Je)return rt();We();function we(){if(!ye||O)return;let t=performance.now(),s=pe(),u=d;if(Y!==false){let c=t-Re,g=c>0?Math.abs(s-(ge<0?s:ge))/c:0;u=d*Math.max(.2,1+g*(typeof Y=="number"?Y:1)*.04);}ge=s,Re=t;let x=re?he===-1||s>=he?"forward":"reverse":i;he=s;let W=Q-K,N=true;if(J){let c=se(le(s,K,Q,u));b&&!re&&(_=Math.max(_,c),c=_),ie=c,e.style.setProperty("--scroll-draw-progress",String(c));let g=x==="reverse"?1-c:c;e.style.clipPath=oe(g),me?.(c),!V&&le(s,K,Q,u)>0&&(V=true,de?.()),c>=1&&!D?(D=true,ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{_=-1,V=false,D=false,e.style.clipPath=oe(0);},Ae))):c<1&&!b&&(D=false),M=requestAnimationFrame(we);return}if(L.forEach((c,g)=>{let k=g*P*W,m=se(le(s,K+k,Q+k,u));b&&!re&&(_=Math.max(_,m),m=_),ie=m,c.style.strokeDashoffset=x==="reverse"?`${$[g]*m}`:`${$[g]*(1-m)}`,f&&(c.style.opacity=x==="reverse"?`${1-m}`:`${m}`),z&&I?c.style.stroke=Se(z,I,m):I&&(c.style.stroke=I),R!==null&&C!==null?c.style.strokeWidth=`${R+(C-R)*m}`:C!==null&&(c.style.strokeWidth=`${C}`),q!==null&&F!==null?c.style.fillOpacity=`${q+(F-q)*m}`:F!==null&&(c.style.fillOpacity=`${F}`),G&&c.tagName.toLowerCase()==="path"&&B[g]&&c.setAttribute("d",Pe(B[g],G,m)),g===0&&(me?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(N=false);}),h){let c=se(le(s,K,Q,u));for(let g in h){let k=parseFloat(g);c>=k&&!ee.has(k)&&(ee.add(k),h[g]?.());}}!V&&le(s,K,Q,u)>0&&(V=true,de?.()),N&&!D?(D=true,ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{_=-1,V=false,D=false,ee.clear(),be();},Ae))):!N&&!b&&(D=false),M=requestAnimationFrame(we);}let Me=new IntersectionObserver(t=>{t.forEach(s=>{ye=s.isIntersecting,ye&&!O?M=requestAnimationFrame(we):cancelAnimationFrame(M);});},{root:H??null,threshold:Fe,rootMargin:Oe}),Te;function ve(){clearTimeout(Te),Te=setTimeout(()=>{L.forEach((t,s)=>{$[s]=Ee(t),t.style.strokeDasharray=`${$[s]}`;}),We();},150);}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),A>0?setTimeout(()=>Me.observe(e),A):Me.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),Me.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Te),$e?.remove();},replay(){_=-1,he=-1,ge=-1,V=false,D=false,U=0,O=false,ee.clear(),clearTimeout(Z),be();},pause(){O=true,cancelAnimationFrame(M);},resume(){O&&(O=false,ye&&(M=requestAnimationFrame(we)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,_=s,O=true,cancelAnimationFrame(M),Ze(s,i);},getProgress(){return ie}}}var Ye="http://www.w3.org/2000/svg",ct="cinematic-photo",Ie=e=>e<0?0:e>1?1:e;function xe(e){let r=parseFloat(e);return Number.isFinite(r)?Ie(r/100):0}function ut(e){return te[e]??te.linear}var ft={destroy:()=>{},getProgress:()=>0},Ce=class{constructor(r){if(typeof document>"u"){this.mount=null;return}this.mount=typeof r.wrapper=="string"?document.querySelector(r.wrapper):r.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",r.wrapper);}loadStory(r){let n=this.mount;if(typeof window>"u"||!n)return ft;n.style.position="relative",n.style.height=r.totalHeight,n.style.display="block";let o=document.createElement("div");o.setAttribute("data-cinematic-stage",""),o.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",n.appendChild(o);let d=[];for(let A of r.scenes){if(A.background){let l=document.createElement("img");l.id=ct,l.src=A.background,l.alt="",l.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",o.appendChild(l);}let y=A.animations.filter(l=>l.type==="draw");if(y.length){let l=document.createElementNS(Ye,"svg");l.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.canvas.height}`),l.setAttribute("preserveAspectRatio","xMidYMid meet"),l.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",o.appendChild(l);for(let w of y){let h=document.createElementNS(Ye,"path");h.id=w.target.replace(/^#/,""),h.setAttribute("d",w.d),h.setAttribute("fill","none"),h.setAttribute("stroke",w.stroke),h.setAttribute("stroke-width",String(w.strokeWidth)),h.setAttribute("stroke-linecap","round"),h.setAttribute("stroke-linejoin","round");let Y=w.length||h.getTotalLength?.()||0;h.style.strokeDasharray=String(Y),h.style.strokeDashoffset=String(Y),l.appendChild(h),d.push({kind:"draw",el:h,start:xe(w.start),end:xe(w.end),ease:ut(w.easing),length:Y});}}for(let l of A.animations){if(l.type!=="fade")continue;let w=o.querySelector(l.target)??document.querySelector(l.target);w&&(w.style.opacity=String(l.from),d.push({kind:"fade",el:w,start:xe(l.start),end:xe(l.end),ease:te["ease-in-out"]??te.linear,from:l.from,to:l.to}));}}let f=0,v=()=>{let A=n.offsetHeight-window.innerHeight;return A<=0?n.getBoundingClientRect().top<=0?1:0:Ie(-n.getBoundingClientRect().top/A)},S=A=>{for(let y of d){let l=y.end-y.start,w=l<=0?A>=y.end?1:0:Ie((A-y.start)/l),h=y.ease(w);y.kind==="draw"?y.el.style.strokeDashoffset=String(y.length*(1-h)):y.el.style.opacity=String(y.from+(y.to-y.from)*h);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return S(1),{destroy:()=>{},getProgress:()=>1};let P=0,i=false,b=false,X=()=>{f=v(),S(f),i&&(P=requestAnimationFrame(X));},T=()=>{i||(i=true,P=requestAnimationFrame(X));},ce=()=>{i=false,cancelAnimationFrame(P);},re=new IntersectionObserver(A=>{for(let y of A)b=y.isIntersecting,b?T():ce();},{threshold:0});return re.observe(o),f=v(),S(f),{destroy(){ce(),re.disconnect();},getProgress:()=>f}}};function bt(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?Ue(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}
+exports.Cinematic=Ce;exports.createBounce=Be;exports.createElastic=_e;exports.createSpring=nt;exports.scrollDraw=bt;

package/dist/index.d.mts

@@ -150,6 +150,77 @@ declare function createElastic({ amplitude, period, }?: {
     period?: number;
 }): (t: number) => number;
 
+type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+/** A traced path that strokes itself on across a scroll range. */
+interface DrawAnimation {
+    type: 'draw';
+    /** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
+    target: string;
+    /** SVG path data, in canvas coordinates. */
+    d: string;
+    /** Pre-measured total path length (px). */
+    length: number;
+    /** Scroll progress where the draw begins, e.g. "20%". */
+    start: string;
+    /** Scroll progress where the draw completes, e.g. "50%". */
+    end: string;
+    stroke: string;
+    strokeWidth: number;
+    easing: StoryEasing;
+}
+/** Any layer fading opacity across a scroll range. */
+interface FadeAnimation {
+    type: 'fade';
+    target: string;
+    start: string;
+    end: string;
+    from: number;
+    to: number;
+}
+type StoryAnimation = DrawAnimation | FadeAnimation;
+interface StoryScene {
+    id: string;
+    /** Optional background layer (a product photo) as a data URL or remote URL. */
+    background?: string;
+    animations: StoryAnimation[];
+}
+interface Story {
+    version: 1;
+    /** Total scroll height of the experience, e.g. "400vh". */
+    totalHeight: string;
+    /** The authoring viewBox the coordinates are expressed in. */
+    canvas: {
+        width: number;
+        height: number;
+    };
+    scenes: StoryScene[];
+}
+
+interface CinematicOptions {
+    /** Mount point — a selector or element. Becomes the scroll wrapper. */
+    wrapper: string | HTMLElement;
+}
+interface CinematicInstance {
+    /** Stop the scroll loop and detach observers (built DOM is left in place). */
+    destroy: () => void;
+    /** Current global scroll progress through the story (0–1). */
+    getProgress: () => number;
+}
+/**
+ * The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
+ * a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
+ * the user scrolls, all driven off the wrapper's scroll progress.
+ *
+ *   import { Cinematic } from "svg-scroll-draw";
+ *   import story from "./story.json";
+ *   new Cinematic({ wrapper: "#app" }).loadStory(story);
+ */
+declare class Cinematic {
+    private mount;
+    constructor(options: CinematicOptions);
+    loadStory(story: Story): CinematicInstance;
+}
+
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };
+export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type ScrollDrawInstance, type ScrollDrawOptions, type Story, type StoryAnimation, type StoryEasing, type StoryScene, createBounce, createElastic, createSpring, scrollDraw };

package/dist/index.d.ts

@@ -150,6 +150,77 @@ declare function createElastic({ amplitude, period, }?: {
     period?: number;
 }): (t: number) => number;
 
+type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+/** A traced path that strokes itself on across a scroll range. */
+interface DrawAnimation {
+    type: 'draw';
+    /** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
+    target: string;
+    /** SVG path data, in canvas coordinates. */
+    d: string;
+    /** Pre-measured total path length (px). */
+    length: number;
+    /** Scroll progress where the draw begins, e.g. "20%". */
+    start: string;
+    /** Scroll progress where the draw completes, e.g. "50%". */
+    end: string;
+    stroke: string;
+    strokeWidth: number;
+    easing: StoryEasing;
+}
+/** Any layer fading opacity across a scroll range. */
+interface FadeAnimation {
+    type: 'fade';
+    target: string;
+    start: string;
+    end: string;
+    from: number;
+    to: number;
+}
+type StoryAnimation = DrawAnimation | FadeAnimation;
+interface StoryScene {
+    id: string;
+    /** Optional background layer (a product photo) as a data URL or remote URL. */
+    background?: string;
+    animations: StoryAnimation[];
+}
+interface Story {
+    version: 1;
+    /** Total scroll height of the experience, e.g. "400vh". */
+    totalHeight: string;
+    /** The authoring viewBox the coordinates are expressed in. */
+    canvas: {
+        width: number;
+        height: number;
+    };
+    scenes: StoryScene[];
+}
+
+interface CinematicOptions {
+    /** Mount point — a selector or element. Becomes the scroll wrapper. */
+    wrapper: string | HTMLElement;
+}
+interface CinematicInstance {
+    /** Stop the scroll loop and detach observers (built DOM is left in place). */
+    destroy: () => void;
+    /** Current global scroll progress through the story (0–1). */
+    getProgress: () => number;
+}
+/**
+ * The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
+ * a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
+ * the user scrolls, all driven off the wrapper's scroll progress.
+ *
+ *   import { Cinematic } from "svg-scroll-draw";
+ *   import story from "./story.json";
+ *   new Cinematic({ wrapper: "#app" }).loadStory(story);
+ */
+declare class Cinematic {
+    private mount;
+    constructor(options: CinematicOptions);
+    loadStory(story: Story): CinematicInstance;
+}
+
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };
+export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type ScrollDrawInstance, type ScrollDrawOptions, type Story, type StoryAnimation, type StoryEasing, type StoryScene, createBounce, createElastic, createSpring, scrollDraw };

package/dist/index.mjs

@@ -1,3 +1,4 @@
-function Ze({tension:e=2.5,friction:s=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,s)}function ze({bounces:e=3,decay:s=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,s)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<r;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<r;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<r;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function Ve({amplitude:e=1,period:s=.4}={}){let r=Math.max(1,e),o=Math.max(.1,s),d=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={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),bounce:ze(),elastic:Ve()};function Te(e="top bottom"){let s=e.trim();if(/^\d+(\.\d+)?%$/.test(s))return {element:"top",viewport:s};let[r="top",o="bottom"]=s.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function We(e,s,r,o){switch(o){case "top":return e+r;case "center":return e+r+s/2;case "bottom":return e+r+s;default:return e+r}}function He(e,s){if(/^\d+(\.\d+)?%$/.test(e))return s*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return s/2;case "bottom":return s;default:return s}}function we(e){let s=e.tagName.toLowerCase();if(s==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(s==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function et(e,s,r){return Math.min(r,Math.max(s,e))}function ne(e,s,r,o){return r===s?0:et((e-s)/(r-s)*o,0,1)}function Le(e,s,r,o,d){let m=We(e.top,e.height,s,o.element)-He(o.viewport,r),b=We(e.top,e.height,s,d.element)-He(d.viewport,r);return {tStart:m,tEnd:b}}function qe(e){let s=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(s)return [parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16),parseInt(s[3]+s[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[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 ve(e,s,r){let o=qe(e),d=qe(s);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*r)},${Math.round(o[1]+(d[1]-o[1])*r)},${Math.round(o[2]+(d[2]-o[2])*r)})`}function Ge(e,s){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,s);}var Be={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},tt=0;function rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function nt(e){let s=e.getAttribute("stroke"),r=e.getAttribute("fill");!s||s==="none"?Ge("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Ge("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,s,r){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 d(){let m=r==="x"?window.scrollX:window.scrollY,b=e-m,$=s-m,R=r==="x";o.innerHTML=`
-      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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",d,{passive:true}),d(),o}function De(e,s,r){let o=(s.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*r).toFixed(4))})}function _e(e,s={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Pe=0,rootMargin:Ie="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:N,clip:xe,autoplay:Xe=false,duration:Ue=1e3,native:je=true,onProgress:le,onStart:me,onComplete:oe}=s,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Fe=Te($.start??"top bottom"),Ce=Te($.end??"bottom top"),P=typeof Ee=="string"?document.querySelector(Ee):Ee??null,W=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,A=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,k=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let n=t*100;switch(G){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 x=G?[]:Array.from(e.querySelectorAll(o)),v=[],H=[],B=0,_=0,M=false,O=false,E=0,pe=false,q=-1,de=-1,T=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Oe=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function Re(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function Ne(){let t=e.getBoundingClientRect(),n,l,g;if(P){let L=P.getBoundingClientRect();n=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else n=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let C=Le({top:n,height:l},g,Re(),Fe,Ce);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=st(B,_,D));}function Je(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=n==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=n==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),W&&S?l.style.stroke=ve(W,S,t):S&&(l.style.stroke=S),I!==null&&A!==null?l.style.strokeWidth=`${I+(A-I)*t}`:A!==null&&(l.style.strokeWidth=`${A}`),F!==null&&k!==null?l.style.fillOpacity=`${F+(k-F)*t}`:k!==null&&(l.style.fillOpacity=`${k}`),N&&l.tagName.toLowerCase()==="path"&&H[g]&&l.setAttribute("d",De(H[g],N,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,n)=>{t.style.strokeDasharray=`${v[n]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[n]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&H[n]&&t.setAttribute("d",H[n]);});}if(x.forEach(t=>{nt(t);let n=we(t);v.push(n),t.tagName.toLowerCase()==="path"?H.push(t.getAttribute("d")??""):H.push(""),r?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=u==="reverse"?`${n}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),A!==null&&(t.style.strokeWidth=`${A}`),k!==null&&(t.style.fillOpacity=`${k}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=u==="reverse"?"0":`${n}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(r)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(r)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(je===false||!rt()||!x.length||typeof b!="string"||!(b in Be)||G||D!=="y"||P||d!==1||R!==0||h||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++tt}`,n=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${n};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Be[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=Le({top:i.top,height:i.height},ue(),Re(),Fe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Ue),n=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),z=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*z}`:`${v[y]*(1-z)}`,m&&(f.style.opacity=u==="reverse"?`${1-z}`:`${z}`),W&&S?f.style.stroke=ve(W,S,z):S&&(f.style.stroke=S),I!==null&&A!==null?f.style.strokeWidth=`${I+(A-I)*z}`:A!==null&&(f.style.strokeWidth=`${A}`),F!==null&&k!==null?f.style.fillOpacity=`${F+(k-F)*z}`:k!==null&&(f.style.fillOpacity=`${k}`),N&&f.tagName.toLowerCase()==="path"&&H[y]&&f.setAttribute("d",De(H[y],N,z)),y===0&&(le?.(z),e.style.setProperty("--scroll-draw-progress",String(z))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(c){if(T)return;let i=c-n;O||(O=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{n=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}f||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),n=performance.now(),l=0,T=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),n=null);});},{root:P??null,threshold:Pe,rootMargin:Ie}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){T||(T=true,l=performance.now()-n,cancelAnimationFrame(E));},resume(){T&&(T=false,n=performance.now()-l,E=requestAnimationFrame(C));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,T=true,l=i*t,n=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();Ne();function ge(){if(!pe||T)return;let t=performance.now(),n=ue(),l=d;if(fe!==false){let a=t-Oe,p=a>0?Math.abs(n-(ye<0?n:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=n,Oe=t;let g=ce?de===-1||n>=de?"forward":"reverse":u;de=n;let C=_-B,L=true;if(G){let a=Z(ne(n,B,_,l));h&&!ce&&(q=Math.max(q,a),a=q),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(n,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*C,c=Z(ne(n,B+w,_+w,l));h&&!ce&&(q=Math.max(q,c),c=q),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),W&&S?a.style.stroke=ve(W,S,c):S&&(a.style.stroke=S),I!==null&&A!==null?a.style.strokeWidth=`${I+(A-I)*c}`:A!==null&&(a.style.strokeWidth=`${A}`),F!==null&&k!==null?a.style.fillOpacity=`${F+(k-F)*c}`:k!==null&&(a.style.fillOpacity=`${k}`),N&&a.tagName.toLowerCase()==="path"&&H[p]&&a.setAttribute("d",De(H[p],N,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(n,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(n,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Se=new IntersectionObserver(t=>{t.forEach(n=>{pe=n.isIntersecting,pe&&!T?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Pe,rootMargin:Ie}),Ae;function be(){clearTimeout(Ae),Ae=setTimeout(()=>{x.forEach((t,n)=>{v[n]=we(t),t.style.strokeDasharray=`${v[n]}`;}),Ne();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Se.observe(e),ae):Se.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Se.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Ae),Me?.remove();},replay(){q=-1,de=-1,ye=-1,O=false,M=false,V=0,T=false,U.clear(),clearTimeout(X),he();},pause(){T=true,cancelAnimationFrame(E);},resume(){T&&(T=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let n=Math.min(1,Math.max(0,t));te=n,q=n,T=true,cancelAnimationFrame(E),Je(n,u);},getProgress(){return te}}}function ut(e,s){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?_e(o,s):(console.warn("[svg-scroll-draw] Container not found:",e),r)}export{ze as createBounce,Ve as createElastic,Ze as createSpring,ut as scrollDraw};
+function nt({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function Be({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),f=0,v=[];for(let i=0;i<n;i++){let b=Math.pow(d,i);v.push(b),f+=b;}let S=[0],P=0;for(let i=0;i<n;i++)P+=v[i]/f,S.push(P);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let b=0;b<n;b++)if(i<=S[b+1]){let X=(i-S[b])/(S[b+1]-S[b]);if(b===0)return X*(2-X);let T=1-Math.pow(o,b);return T+(1-T)*(2*X-1)*(2*X-1)}return 1}}function _e({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return f=>f<=0?0:f>=1?1:n*Math.pow(2,-10*f)*Math.sin((f-d)*(2*Math.PI)/o)+1}var te={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),bounce:Be(),elastic:_e()};function Le(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 Ve(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 Ge(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 st(e,r,n){return Math.min(n,Math.max(r,e))}function le(e,r,n,o){return n===r?0:st((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,d){let f=Ve(e.top,e.height,r,o.element)-Ge(o.viewport,n),v=Ve(e.top,e.height,r,d.element)-Ge(d.viewport,n);return {tStart:f,tEnd:v}}function ze(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 Se(e,r,n){let o=ze(e),d=ze(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function je(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Xe={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ot=0;function it(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function at(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?je("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&je("Element has a fill \u2014 it may obscure the stroke animation.",e);}function lt(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 d(){let f=n==="x"?window.scrollX:window.scrollY,v=e-f,S=r-f,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`left:${v}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${v}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;${P?`left:${S}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${S}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",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let v=parseFloat(f),S=o[d++]??v;return String(+(v+(S-v)*n).toFixed(4))})}function Ue(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:d=1,fade:f=false,easing:v="linear",trigger:S={},stagger:P=0,direction:i="forward",once:b=false,debug:X=false,axis:T="y",scrollContainer:ce,autoReverse:re=false,delay:A=0,strokeColor:y,strokeWidth:l,fillOpacity:w,waypoints:h,velocityScale:Y=false,threshold:Fe=0,rootMargin:Oe="0px",repeat:ne=0,repeatDelay:Ae=0,morphTo:G,clip:ke,autoplay:Je=false,duration:Ke=1e3,native:Qe=true,onProgress:me,onStart:de,onComplete:ue}=r,J=ke===true?"left":typeof ke=="string"?ke:false,se=typeof v=="function"?v:te[v]??te.linear,Ne=Le(S.start??"top bottom"),He=Le(S.end??"bottom top"),H=typeof ce=="string"?document.querySelector(ce):ce??null,z=Array.isArray(y)?y[0]:null,I=Array.isArray(y)?y[1]:typeof y=="string"?y:null,R=Array.isArray(l)?l[0]:null,C=Array.isArray(l)?l[1]:typeof l=="number"?l:null,q=Array.isArray(w)?w[0]:null,F=Array.isArray(w)?w[1]:typeof w=="number"?w:null;function oe(t){let s=t*100;switch(J){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 L=J?[]:Array.from(e.querySelectorAll(o)),$=[],B=[],K=0,Q=0,D=false,V=false,M=0,ye=false,_=-1,he=-1,O=false,ie=0,U=0,Z,$e=null,ee=new Set,ge=-1,Re=performance.now();function pe(){return H?T==="x"?H.scrollLeft:H.scrollTop:T==="x"?window.scrollX:window.scrollY}function qe(){return H?T==="x"?H.clientWidth:H.clientHeight:T==="x"?window.innerWidth:window.innerHeight}function We(){let t=e.getBoundingClientRect(),s,u,x;if(H){let N=H.getBoundingClientRect();s=T==="x"?t.left-N.left+H.scrollLeft:t.top-N.top+H.scrollTop,u=T==="x"?t.width:t.height,x=pe();}else s=T==="x"?t.left:t.top,u=T==="x"?t.width:t.height,x=pe();let W=De({top:s,height:u},x,qe(),Ne,He);K=W.tStart,Q=W.tEnd,X&&process.env.NODE_ENV!=="production"&&($e?.remove(),$e=lt(K,Q,T));}function Ze(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),J){let u=s==="reverse"?1-t:t;e.style.clipPath=oe(u);return}L.forEach((u,x)=>{u.style.strokeDashoffset=s==="reverse"?`${$[x]*t}`:`${$[x]*(1-t)}`,f&&(u.style.opacity=s==="reverse"?`${1-t}`:`${t}`),z&&I?u.style.stroke=Se(z,I,t):I&&(u.style.stroke=I),R!==null&&C!==null?u.style.strokeWidth=`${R+(C-R)*t}`:C!==null&&(u.style.strokeWidth=`${C}`),q!==null&&F!==null?u.style.fillOpacity=`${q+(F-q)*t}`:F!==null&&(u.style.fillOpacity=`${F}`),G&&u.tagName.toLowerCase()==="path"&&B[x]&&u.setAttribute("d",Pe(B[x],G,t));});}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),J){e.style.clipPath=oe(0);return}L.forEach((t,s)=>{t.style.strokeDasharray=`${$[s]}`,t.style.strokeDashoffset=i==="reverse"?"0":`${$[s]}`,f?t.style.opacity=i==="reverse"?"1":"0":t.style.opacity="",z&&(t.style.stroke=z),R!==null&&(t.style.strokeWidth=`${R}`),q!==null&&(t.style.fillOpacity=`${q}`),G&&t.tagName.toLowerCase()==="path"&&B[s]&&t.setAttribute("d",B[s]);});}if(L.forEach(t=>{at(t);let s=Ee(t);$.push(s),t.tagName.toLowerCase()==="path"?B.push(t.getAttribute("d")??""):B.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=i==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),I&&(t.style.stroke=I),C!==null&&(t.style.strokeWidth=`${C}`),F!==null&&(t.style.fillOpacity=`${F}`),G&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",G)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=i==="reverse"?"0":`${s}`,f?t.style.opacity=i==="reverse"?"1":"0":t.style.opacity="",z&&(t.style.stroke=z),R!==null&&(t.style.strokeWidth=`${R}`),q!==null&&(t.style.fillOpacity=`${q}`));}),J){if(n)return e.style.clipPath=oe(1),ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=oe(0);}else if(n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function et(){return !(Qe===false||!it()||!L.length||typeof v!="string"||!(v in Xe)||J||T!=="y"||H||d!==1||P!==0||b||re||Y!==false||G||h||ne||A>0||me||de||ue||y!=null||l!=null||w!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function tt(){let t=`svg-scroll-draw-${++ot}`,s=i==="reverse"?"0":"var(--ssd-len)",u=i==="reverse"?"var(--ssd-len)":"0",x=`stroke-dashoffset:${s};`,W=`stroke-dashoffset:${u};`;f&&(x+=`opacity:${i==="reverse"?1:0};`,W+=`opacity:${i==="reverse"?0:1};`);let N=document.createElement("style");N.setAttribute("data-svg-scroll-draw",""),N.textContent=`@keyframes ${t}{from{${x}}to{${W}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Xe[v]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(N);function c(a,p){a.style.setProperty("--ssd-len",String($[p])),a.style.strokeDasharray=`${$[p]}`,a.style.strokeDashoffset="",a.style.opacity="",a.style.animationPlayState="",a.classList.add(t);}L.forEach(c);let g=false,k=-1;function m(){if(k>=0)return k;let a=e.getBoundingClientRect(),{tStart:p,tEnd:E}=De({top:a.top,height:a.height},pe(),qe(),Ne,He);return se(le(pe(),p,E,d))}return {destroy(){L.forEach(a=>{a.classList.remove(t),a.style.removeProperty("--ssd-len"),a.style.animationPlayState="";}),N.remove();},replay(){g=false,k=-1,L.forEach(c);},pause(){g=true,L.forEach(a=>{a.style.animationPlayState="paused";});},resume(){g&&(g=false,L.forEach(a=>{a.style.animationPlayState="running";}));},seek(a){let p=Math.min(1,Math.max(0,a));k=p,g=true,L.forEach((E,ae)=>{E.classList.remove(t),E.style.strokeDashoffset=i==="reverse"?`${$[ae]*p}`:`${$[ae]*(1-p)}`,f&&(E.style.opacity=i==="reverse"?`${1-p}`:`${p}`);});},getProgress(){return m()}}}if(et())return tt();function rt(){let t=Math.max(1,Ke),s=0,u=0;function x(m){let a=true;if(J){let p=Math.min(1,Math.max(0,m/t)),E=se(p);ie=E,e.style.setProperty("--scroll-draw-progress",String(E)),e.style.clipPath=oe(i==="reverse"?1-E:E),me?.(E),p<1&&(a=false);}else L.forEach((p,E)=>{let ae=E*P*t,fe=Math.min(1,Math.max(0,(m-ae)/t)),j=se(fe);p.style.strokeDashoffset=i==="reverse"?`${$[E]*j}`:`${$[E]*(1-j)}`,f&&(p.style.opacity=i==="reverse"?`${1-j}`:`${j}`),z&&I?p.style.stroke=Se(z,I,j):I&&(p.style.stroke=I),R!==null&&C!==null?p.style.strokeWidth=`${R+(C-R)*j}`:C!==null&&(p.style.strokeWidth=`${C}`),q!==null&&F!==null?p.style.fillOpacity=`${q+(F-q)*j}`:F!==null&&(p.style.fillOpacity=`${F}`),G&&p.tagName.toLowerCase()==="path"&&B[E]&&p.setAttribute("d",Pe(B[E],G,j)),E===0&&(me?.(j),e.style.setProperty("--scroll-draw-progress",String(j))),fe<1&&(a=false);});if(h){let p=Math.min(1,Math.max(0,m/t)),E=se(p);for(let ae in h){let fe=parseFloat(ae);E>=fe&&!ee.has(fe)&&(ee.add(fe),h[ae]?.());}}return a}function W(m){if(O)return;let a=m-s;V||(V=true,de?.());let p=x(a);if(p&&!D){D=true,x(t*(1+Math.max(0,L.length-1)*P)),ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{s=performance.now(),V=false,D=false,ee.clear(),be(),M=requestAnimationFrame(W);},Ae));return}p||(M=requestAnimationFrame(W));}function N(){cancelAnimationFrame(M),clearTimeout(Z),s=performance.now(),u=0,O=false,V=false,D=false,U=0,ee.clear(),be(),M=requestAnimationFrame(W);}let c=new IntersectionObserver(m=>{m.forEach(a=>{a.isIntersecting&&!(b&&D)?N():!a.isIntersecting&&!b&&!D&&(cancelAnimationFrame(M),clearTimeout(Z),s=null);});},{root:H??null,threshold:Fe,rootMargin:Oe}),g;function k(){clearTimeout(g),g=setTimeout(()=>{L.forEach((m,a)=>{$[a]=Ee(m),m.style.strokeDasharray=`${$[a]}`;});},150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),A>0?setTimeout(()=>c.observe(e),A):c.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),c.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),clearTimeout(g);},replay(){U=0,N();},pause(){O||(O=true,u=performance.now()-s,cancelAnimationFrame(M));},resume(){O&&(O=false,s=performance.now()-u,M=requestAnimationFrame(W));},seek(m){let a=Math.min(1,Math.max(0,m));ie=a,O=true,u=a*t,s=performance.now()-u,cancelAnimationFrame(M),x(u);},getProgress(){return ie}}}if(Je)return rt();We();function we(){if(!ye||O)return;let t=performance.now(),s=pe(),u=d;if(Y!==false){let c=t-Re,g=c>0?Math.abs(s-(ge<0?s:ge))/c:0;u=d*Math.max(.2,1+g*(typeof Y=="number"?Y:1)*.04);}ge=s,Re=t;let x=re?he===-1||s>=he?"forward":"reverse":i;he=s;let W=Q-K,N=true;if(J){let c=se(le(s,K,Q,u));b&&!re&&(_=Math.max(_,c),c=_),ie=c,e.style.setProperty("--scroll-draw-progress",String(c));let g=x==="reverse"?1-c:c;e.style.clipPath=oe(g),me?.(c),!V&&le(s,K,Q,u)>0&&(V=true,de?.()),c>=1&&!D?(D=true,ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{_=-1,V=false,D=false,e.style.clipPath=oe(0);},Ae))):c<1&&!b&&(D=false),M=requestAnimationFrame(we);return}if(L.forEach((c,g)=>{let k=g*P*W,m=se(le(s,K+k,Q+k,u));b&&!re&&(_=Math.max(_,m),m=_),ie=m,c.style.strokeDashoffset=x==="reverse"?`${$[g]*m}`:`${$[g]*(1-m)}`,f&&(c.style.opacity=x==="reverse"?`${1-m}`:`${m}`),z&&I?c.style.stroke=Se(z,I,m):I&&(c.style.stroke=I),R!==null&&C!==null?c.style.strokeWidth=`${R+(C-R)*m}`:C!==null&&(c.style.strokeWidth=`${C}`),q!==null&&F!==null?c.style.fillOpacity=`${q+(F-q)*m}`:F!==null&&(c.style.fillOpacity=`${F}`),G&&c.tagName.toLowerCase()==="path"&&B[g]&&c.setAttribute("d",Pe(B[g],G,m)),g===0&&(me?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(N=false);}),h){let c=se(le(s,K,Q,u));for(let g in h){let k=parseFloat(g);c>=k&&!ee.has(k)&&(ee.add(k),h[g]?.());}}!V&&le(s,K,Q,u)>0&&(V=true,de?.()),N&&!D?(D=true,ue?.(),U<(ne==="infinite"?1/0:ne??0)&&(U++,Z=setTimeout(()=>{_=-1,V=false,D=false,ee.clear(),be();},Ae))):!N&&!b&&(D=false),M=requestAnimationFrame(we);}let Me=new IntersectionObserver(t=>{t.forEach(s=>{ye=s.isIntersecting,ye&&!O?M=requestAnimationFrame(we):cancelAnimationFrame(M);});},{root:H??null,threshold:Fe,rootMargin:Oe}),Te;function ve(){clearTimeout(Te),Te=setTimeout(()=>{L.forEach((t,s)=>{$[s]=Ee(t),t.style.strokeDasharray=`${$[s]}`;}),We();},150);}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),A>0?setTimeout(()=>Me.observe(e),A):Me.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),Me.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Te),$e?.remove();},replay(){_=-1,he=-1,ge=-1,V=false,D=false,U=0,O=false,ee.clear(),clearTimeout(Z),be();},pause(){O=true,cancelAnimationFrame(M);},resume(){O&&(O=false,ye&&(M=requestAnimationFrame(we)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,_=s,O=true,cancelAnimationFrame(M),Ze(s,i);},getProgress(){return ie}}}var Ye="http://www.w3.org/2000/svg",ct="cinematic-photo",Ie=e=>e<0?0:e>1?1:e;function xe(e){let r=parseFloat(e);return Number.isFinite(r)?Ie(r/100):0}function ut(e){return te[e]??te.linear}var ft={destroy:()=>{},getProgress:()=>0},Ce=class{constructor(r){if(typeof document>"u"){this.mount=null;return}this.mount=typeof r.wrapper=="string"?document.querySelector(r.wrapper):r.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",r.wrapper);}loadStory(r){let n=this.mount;if(typeof window>"u"||!n)return ft;n.style.position="relative",n.style.height=r.totalHeight,n.style.display="block";let o=document.createElement("div");o.setAttribute("data-cinematic-stage",""),o.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",n.appendChild(o);let d=[];for(let A of r.scenes){if(A.background){let l=document.createElement("img");l.id=ct,l.src=A.background,l.alt="",l.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",o.appendChild(l);}let y=A.animations.filter(l=>l.type==="draw");if(y.length){let l=document.createElementNS(Ye,"svg");l.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.canvas.height}`),l.setAttribute("preserveAspectRatio","xMidYMid meet"),l.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",o.appendChild(l);for(let w of y){let h=document.createElementNS(Ye,"path");h.id=w.target.replace(/^#/,""),h.setAttribute("d",w.d),h.setAttribute("fill","none"),h.setAttribute("stroke",w.stroke),h.setAttribute("stroke-width",String(w.strokeWidth)),h.setAttribute("stroke-linecap","round"),h.setAttribute("stroke-linejoin","round");let Y=w.length||h.getTotalLength?.()||0;h.style.strokeDasharray=String(Y),h.style.strokeDashoffset=String(Y),l.appendChild(h),d.push({kind:"draw",el:h,start:xe(w.start),end:xe(w.end),ease:ut(w.easing),length:Y});}}for(let l of A.animations){if(l.type!=="fade")continue;let w=o.querySelector(l.target)??document.querySelector(l.target);w&&(w.style.opacity=String(l.from),d.push({kind:"fade",el:w,start:xe(l.start),end:xe(l.end),ease:te["ease-in-out"]??te.linear,from:l.from,to:l.to}));}}let f=0,v=()=>{let A=n.offsetHeight-window.innerHeight;return A<=0?n.getBoundingClientRect().top<=0?1:0:Ie(-n.getBoundingClientRect().top/A)},S=A=>{for(let y of d){let l=y.end-y.start,w=l<=0?A>=y.end?1:0:Ie((A-y.start)/l),h=y.ease(w);y.kind==="draw"?y.el.style.strokeDashoffset=String(y.length*(1-h)):y.el.style.opacity=String(y.from+(y.to-y.from)*h);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return S(1),{destroy:()=>{},getProgress:()=>1};let P=0,i=false,b=false,X=()=>{f=v(),S(f),i&&(P=requestAnimationFrame(X));},T=()=>{i||(i=true,P=requestAnimationFrame(X));},ce=()=>{i=false,cancelAnimationFrame(P);},re=new IntersectionObserver(A=>{for(let y of A)b=y.isIntersecting,b?T():ce();},{threshold:0});return re.observe(o),f=v(),S(f),{destroy(){ce(),re.disconnect();},getProgress:()=>f}}};function bt(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?Ue(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}
+export{Ce as Cinematic,Be as createBounce,_e as createElastic,nt as createSpring,bt as scrollDraw};

package/dist/timeline/index.cjs

@@ -1 +1,23 @@
-'use strict';function U({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(o),c=0,d=[];for(let s=0;s<r;s++){let i=Math.pow(u,s);d.push(i),c+=i;}let f=[0],b=0;for(let s=0;s<r;s++)b+=d[s]/c,f.push(b);return s=>{if(s<=0)return 0;if(s>=1)return 1;for(let i=0;i<r;i++)if(s<=f[i+1]){let w=(s-f[i])/(f[i+1]-f[i]);if(i===0)return w*(2-w);let M=1-Math.pow(o,i);return M+(1-M)*(2*w-1)*(2*w-1)}return 1}}function Z({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),o=Math.max(.1,t),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-u)*(2*Math.PI)/o)+1}var $={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),bounce:U(),elastic:Z()};function F(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function V(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function B(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function P(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function _(e,t,r){return Math.min(r,Math.max(t,e))}function W(e,t,r,o){return r===t?0:_((e-t)/(r-t)*o,0,1)}function X(e,t,r,o,u){let c=V(e.top,e.height,t,o.element)-B(o.viewport,r),d=V(e.top,e.height,t,u.element)-B(u.viewport,r);return {tStart:c,tEnd:d}}function ee(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),r;let u=o,{trigger:c={},speed:d=1,once:f=false,axis:b="y",tracks:s,onComplete:i}=t,w=F(c.start??"top bottom"),M=F(c.end??"bottom top"),A=s.map(n=>{let m=typeof n.easing=="function"?n.easing:$[n.easing??"linear"]??$.linear,l=Array.from(u.querySelectorAll(n.selector)),a=l.map(p=>P(p));return l.forEach((p,S)=>{p.style.strokeDasharray=`${a[S]}`,p.style.strokeDashoffset=`${a[S]}`,n.fade&&(p.style.opacity="0");}),{...n,elements:l,lengths:a,easeFn:m}}),L=0,k=0,E=false,h=false,g=0,I=false,y=-1,x=0;function q(){return b==="x"?window.scrollX:window.scrollY}function j(){return b==="x"?window.innerWidth:window.innerHeight}function z(){let n=u.getBoundingClientRect(),m=q(),l=b==="x"?n.left:n.top,a=b==="x"?n.width:n.height,p=X({top:l,height:a},m,j(),w,M);L=p.tStart,k=p.tEnd;}function C(n){u.style.setProperty("--scroll-draw-progress",String(n)),A.forEach(({elements:m,lengths:l,from:a,to:p,easeFn:S,fade:J})=>{let N=p-a,K=N>0?Math.min(1,Math.max(0,(n-a)/N)):0,R=S(K);m.forEach((O,Q)=>{O.style.strokeDashoffset=`${l[Q]*(1-R)}`,J&&(O.style.opacity=String(R));});});}function v(){if(!E||h)return;let n=W(q(),L,k,d);f&&(y=Math.max(y,n),n=y),x=n,C(n),n>=1&&!I?(I=true,i?.()):n<1&&!f&&(I=false),g=requestAnimationFrame(v);}z();let G=new IntersectionObserver(n=>{n.forEach(m=>{E=m.isIntersecting,E&&!h?g=requestAnimationFrame(v):cancelAnimationFrame(g);});},{threshold:0});G.observe(u);let D;function T(){clearTimeout(D),D=setTimeout(()=>{A.forEach(({elements:n,lengths:m})=>{n.forEach((l,a)=>{m[a]=P(l),l.style.strokeDasharray=`${m[a]}`;});}),z();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),{destroy(){cancelAnimationFrame(g),clearTimeout(D),G.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T);},replay(){y=-1,I=false,h=false,A.forEach(({elements:n,lengths:m,fade:l})=>{n.forEach((a,p)=>{a.style.strokeDashoffset=`${m[p]}`,l&&(a.style.opacity="0");});}),u.style.setProperty("--scroll-draw-progress","0");},pause(){h=true,cancelAnimationFrame(g);},resume(){h&&(h=false,E&&(g=requestAnimationFrame(v)));},seek(n){x=Math.min(1,Math.max(0,n)),y=x,h=true,cancelAnimationFrame(g),C(x);},getProgress(){return x}}}exports.scrollDrawTimeline=ee;
+'use strict';function ie({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),p=Math.sqrt(o),m=0,y=[];for(let a=0;a<r;a++){let c=Math.pow(p,a);y.push(c),m+=c;}let d=[0],h=0;for(let a=0;a<r;a++)h+=y[a]/m,d.push(h);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let c=0;c<r;c++)if(a<=d[c+1]){let f=(a-d[c])/(d[c+1]-d[c]);if(c===0)return f*(2-f);let T=1-Math.pow(o,c);return T+(1-T)*(2*f-1)*(2*f-1)}return 1}}function se({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),p=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-p)*(2*Math.PI)/o)+1}var R={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),bounce:ie(),elastic:se()};function G(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function X(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function _(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function q(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ae(e,n,r){return Math.min(r,Math.max(n,e))}function J(e,n,r,o){return r===n?0:ae((e-n)/(r-n)*o,0,1)}function K(e,n,r,o,p){let m=X(e.top,e.height,n,o.element)-_(o.viewport,r),y=X(e.top,e.height,n,p.element)-_(p.viewport,r);return {tStart:m,tEnd:y}}var Q=["#ff90e8","#ffc900","#5865F2","#22c55e","#f59e0b","#ef4444","#aaa","#60a5fa"];function ce(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),r;let p=o,{trigger:m={},speed:y=1,once:d=false,axis:h="y",tracks:a,onComplete:c,repeat:f,repeatDelay:T=0,debug:Z=false,label:Y}=n,ee=G(m.start??"top bottom"),te=G(m.end??"bottom top"),I=f==="infinite"?1/0:f??0,k,L=a.map(t=>{let u=typeof t.easing=="function"?t.easing:R[t.easing??"linear"]??R.linear,l=Array.from(p.querySelectorAll(t.selector)),s=l.map(i=>q(i));return l.forEach((i,b)=>{i.style.strokeDasharray=`${s[b]}`,i.style.strokeDashoffset=`${s[b]}`,t.fade&&(i.style.opacity="0");}),{...t,elements:l,lengths:s,easeFn:u}}),O=0,N=0,$=false,x=false,w=0,S=false,M=-1,E=0,g=null;Z&&(g=document.createElement("div"),Object.assign(g.style,{position:"fixed",bottom:"16px",left:"16px",zIndex:"9999",background:"rgba(0,0,0,0.88)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"10px",padding:"10px 14px",fontFamily:"monospace",fontSize:"11px",color:"#fff",minWidth:"240px",pointerEvents:"none",lineHeight:"1.4"}),document.body.appendChild(g));function ne(t){if(!g)return;let u=Y??(typeof e=="string"?e:"timeline"),l=a.map(({selector:s,from:i,to:b},C)=>{let v=Q[C%Q.length],A=b>i?Math.min(1,Math.max(0,(t-i)/(b-i))):0,F=Math.round(A*100);return `<div style="margin:4px 0">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2px">
+          <span style="color:${v};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${s}</span>
+          <span style="color:#666;margin-left:8px">${F}%</span>
+        </div>
+        <div style="height:3px;background:#2a2a2a;border-radius:2px;position:relative;overflow:hidden">
+          <div style="position:absolute;left:${i*100}%;width:${(b-i)*100}%;height:100%;background:${v}33;border-radius:2px"></div>
+          <div style="position:absolute;left:${i*100}%;width:${(b-i)*A*100}%;height:100%;background:${v};border-radius:2px;transition:width 0.05s linear"></div>
+        </div>
+      </div>`}).join("");g.innerHTML=`
+      <div style="color:#555;margin-bottom:8px;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:6px">
+        scrollDrawTimeline \xB7 ${u}
+      </div>
+      ${l}
+      <div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06)">
+        <div style="display:flex;justify-content:space-between;margin-bottom:2px">
+          <span style="color:#555">scroll</span>
+          <span style="color:#666">${Math.round(t*100)}%</span>
+        </div>
+        <div style="height:2px;background:#2a2a2a;border-radius:1px;overflow:hidden">
+          <div style="height:100%;background:#fff;border-radius:1px;width:${t*100}%;transition:width 0.05s linear"></div>
+        </div>
+      </div>`;}function j(){return h==="x"?window.scrollX:window.scrollY}function re(){return h==="x"?window.innerWidth:window.innerHeight}function B(){let t=p.getBoundingClientRect(),u=j(),l=h==="x"?t.left:t.top,s=h==="x"?t.width:t.height,i=K({top:l,height:s},u,re(),ee,te);O=i.tStart,N=i.tEnd;}function V(t){p.style.setProperty("--scroll-draw-progress",String(t)),L.forEach(({elements:u,lengths:l,from:s,to:i,easeFn:b,fade:C})=>{let v=i-s,A=v>0?Math.min(1,Math.max(0,(t-s)/v)):0,F=b(A);u.forEach((U,oe)=>{U.style.strokeDashoffset=`${l[oe]*(1-F)}`,C&&(U.style.opacity=String(F));});}),ne(t);}function W(){M=-1,S=false,L.forEach(({elements:t,lengths:u,fade:l})=>{t.forEach((s,i)=>{s.style.strokeDashoffset=`${u[i]}`,l&&(s.style.opacity="0");});}),p.style.setProperty("--scroll-draw-progress","0");}function P(){if(!$||x)return;let t=J(j(),O,N,y);d&&(M=Math.max(M,t),t=M),E=t,V(t),t>=1&&!S?(S=true,c?.(),I>0&&d&&(k=setTimeout(()=>{I!==1/0&&I--,W();},T))):t<1&&!d&&(S=false),w=requestAnimationFrame(P);}B();let H=new IntersectionObserver(t=>{t.forEach(u=>{$=u.isIntersecting,$&&!x?w=requestAnimationFrame(P):cancelAnimationFrame(w);});},{threshold:0});H.observe(p);let z;function D(){clearTimeout(z),z=setTimeout(()=>{L.forEach(({elements:t,lengths:u})=>{t.forEach((l,s)=>{u[s]=q(l),l.style.strokeDasharray=`${u[s]}`;});}),B();},150);}return window.addEventListener("resize",D),window.addEventListener("orientationchange",D),{destroy(){cancelAnimationFrame(w),clearTimeout(z),clearTimeout(k),H.disconnect(),window.removeEventListener("resize",D),window.removeEventListener("orientationchange",D),g&&(g.remove(),g=null);},replay(){I=f==="infinite"?1/0:f??0,clearTimeout(k),W(),x=false;},pause(){x=true,cancelAnimationFrame(w);},resume(){x&&(x=false,$&&(w=requestAnimationFrame(P)));},seek(t){E=Math.min(1,Math.max(0,t)),M=E,x=true,cancelAnimationFrame(w),V(E);},getProgress(){return E}}}exports.scrollDrawTimeline=ce;

package/dist/timeline/index.d.mts

@@ -41,6 +41,23 @@ interface ScrollDrawTimelineOptions {
     tracks: TimelineTrack[];
     /** Fires when all tracks have reached their full draw progress. */
     onComplete?: () => void;
+    /**
+     * Replay the timeline N times (or 'infinite') after it completes. Works with
+     * `once: true` — after completion + delay, paths reset and the animation plays
+     * again on the next scroll-into-view. With `once: false` (default) the timeline
+     * already reverses naturally on scroll-up, so repeat is a no-op.
+     */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait before each repeat. Default 0. */
+    repeatDelay?: number;
+    /**
+     * Show a developer overlay panel visualising each track's window and live
+     * fill progress. Injected into document.body as a fixed HUD, removed on destroy().
+     * Useful for tuning `from`/`to` values without guessing.
+     */
+    debug?: boolean;
+    /** Label shown in the debug panel header. Defaults to the target selector string. */
+    label?: string;
 }
 /**
  * Animate multiple path groups with independent start/end windows within a

package/dist/timeline/index.d.ts

@@ -41,6 +41,23 @@ interface ScrollDrawTimelineOptions {
     tracks: TimelineTrack[];
     /** Fires when all tracks have reached their full draw progress. */
     onComplete?: () => void;
+    /**
+     * Replay the timeline N times (or 'infinite') after it completes. Works with
+     * `once: true` — after completion + delay, paths reset and the animation plays
+     * again on the next scroll-into-view. With `once: false` (default) the timeline
+     * already reverses naturally on scroll-up, so repeat is a no-op.
+     */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait before each repeat. Default 0. */
+    repeatDelay?: number;
+    /**
+     * Show a developer overlay panel visualising each track's window and live
+     * fill progress. Injected into document.body as a fixed HUD, removed on destroy().
+     * Useful for tuning `from`/`to` values without guessing.
+     */
+    debug?: boolean;
+    /** Label shown in the debug panel header. Defaults to the target selector string. */
+    label?: string;
 }
 /**
  * Animate multiple path groups with independent start/end windows within a

package/dist/timeline/index.mjs

@@ -1 +1,23 @@
-function U({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(o),c=0,d=[];for(let s=0;s<r;s++){let i=Math.pow(u,s);d.push(i),c+=i;}let f=[0],b=0;for(let s=0;s<r;s++)b+=d[s]/c,f.push(b);return s=>{if(s<=0)return 0;if(s>=1)return 1;for(let i=0;i<r;i++)if(s<=f[i+1]){let w=(s-f[i])/(f[i+1]-f[i]);if(i===0)return w*(2-w);let M=1-Math.pow(o,i);return M+(1-M)*(2*w-1)*(2*w-1)}return 1}}function Z({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),o=Math.max(.1,t),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-u)*(2*Math.PI)/o)+1}var $={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),bounce:U(),elastic:Z()};function F(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function V(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function B(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function P(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function _(e,t,r){return Math.min(r,Math.max(t,e))}function W(e,t,r,o){return r===t?0:_((e-t)/(r-t)*o,0,1)}function X(e,t,r,o,u){let c=V(e.top,e.height,t,o.element)-B(o.viewport,r),d=V(e.top,e.height,t,u.element)-B(u.viewport,r);return {tStart:c,tEnd:d}}function ee(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),r;let u=o,{trigger:c={},speed:d=1,once:f=false,axis:b="y",tracks:s,onComplete:i}=t,w=F(c.start??"top bottom"),M=F(c.end??"bottom top"),A=s.map(n=>{let m=typeof n.easing=="function"?n.easing:$[n.easing??"linear"]??$.linear,l=Array.from(u.querySelectorAll(n.selector)),a=l.map(p=>P(p));return l.forEach((p,S)=>{p.style.strokeDasharray=`${a[S]}`,p.style.strokeDashoffset=`${a[S]}`,n.fade&&(p.style.opacity="0");}),{...n,elements:l,lengths:a,easeFn:m}}),L=0,k=0,E=false,h=false,g=0,I=false,y=-1,x=0;function q(){return b==="x"?window.scrollX:window.scrollY}function j(){return b==="x"?window.innerWidth:window.innerHeight}function z(){let n=u.getBoundingClientRect(),m=q(),l=b==="x"?n.left:n.top,a=b==="x"?n.width:n.height,p=X({top:l,height:a},m,j(),w,M);L=p.tStart,k=p.tEnd;}function C(n){u.style.setProperty("--scroll-draw-progress",String(n)),A.forEach(({elements:m,lengths:l,from:a,to:p,easeFn:S,fade:J})=>{let N=p-a,K=N>0?Math.min(1,Math.max(0,(n-a)/N)):0,R=S(K);m.forEach((O,Q)=>{O.style.strokeDashoffset=`${l[Q]*(1-R)}`,J&&(O.style.opacity=String(R));});});}function v(){if(!E||h)return;let n=W(q(),L,k,d);f&&(y=Math.max(y,n),n=y),x=n,C(n),n>=1&&!I?(I=true,i?.()):n<1&&!f&&(I=false),g=requestAnimationFrame(v);}z();let G=new IntersectionObserver(n=>{n.forEach(m=>{E=m.isIntersecting,E&&!h?g=requestAnimationFrame(v):cancelAnimationFrame(g);});},{threshold:0});G.observe(u);let D;function T(){clearTimeout(D),D=setTimeout(()=>{A.forEach(({elements:n,lengths:m})=>{n.forEach((l,a)=>{m[a]=P(l),l.style.strokeDasharray=`${m[a]}`;});}),z();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),{destroy(){cancelAnimationFrame(g),clearTimeout(D),G.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T);},replay(){y=-1,I=false,h=false,A.forEach(({elements:n,lengths:m,fade:l})=>{n.forEach((a,p)=>{a.style.strokeDashoffset=`${m[p]}`,l&&(a.style.opacity="0");});}),u.style.setProperty("--scroll-draw-progress","0");},pause(){h=true,cancelAnimationFrame(g);},resume(){h&&(h=false,E&&(g=requestAnimationFrame(v)));},seek(n){x=Math.min(1,Math.max(0,n)),y=x,h=true,cancelAnimationFrame(g),C(x);},getProgress(){return x}}}export{ee as scrollDrawTimeline};
+function ie({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),p=Math.sqrt(o),m=0,y=[];for(let a=0;a<r;a++){let c=Math.pow(p,a);y.push(c),m+=c;}let d=[0],h=0;for(let a=0;a<r;a++)h+=y[a]/m,d.push(h);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let c=0;c<r;c++)if(a<=d[c+1]){let f=(a-d[c])/(d[c+1]-d[c]);if(c===0)return f*(2-f);let T=1-Math.pow(o,c);return T+(1-T)*(2*f-1)*(2*f-1)}return 1}}function se({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),p=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-p)*(2*Math.PI)/o)+1}var R={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),bounce:ie(),elastic:se()};function G(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function X(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function _(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function q(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ae(e,n,r){return Math.min(r,Math.max(n,e))}function J(e,n,r,o){return r===n?0:ae((e-n)/(r-n)*o,0,1)}function K(e,n,r,o,p){let m=X(e.top,e.height,n,o.element)-_(o.viewport,r),y=X(e.top,e.height,n,p.element)-_(p.viewport,r);return {tStart:m,tEnd:y}}var Q=["#ff90e8","#ffc900","#5865F2","#22c55e","#f59e0b","#ef4444","#aaa","#60a5fa"];function ce(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),r;let p=o,{trigger:m={},speed:y=1,once:d=false,axis:h="y",tracks:a,onComplete:c,repeat:f,repeatDelay:T=0,debug:Z=false,label:Y}=n,ee=G(m.start??"top bottom"),te=G(m.end??"bottom top"),I=f==="infinite"?1/0:f??0,k,L=a.map(t=>{let u=typeof t.easing=="function"?t.easing:R[t.easing??"linear"]??R.linear,l=Array.from(p.querySelectorAll(t.selector)),s=l.map(i=>q(i));return l.forEach((i,b)=>{i.style.strokeDasharray=`${s[b]}`,i.style.strokeDashoffset=`${s[b]}`,t.fade&&(i.style.opacity="0");}),{...t,elements:l,lengths:s,easeFn:u}}),O=0,N=0,$=false,x=false,w=0,S=false,M=-1,E=0,g=null;Z&&(g=document.createElement("div"),Object.assign(g.style,{position:"fixed",bottom:"16px",left:"16px",zIndex:"9999",background:"rgba(0,0,0,0.88)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"10px",padding:"10px 14px",fontFamily:"monospace",fontSize:"11px",color:"#fff",minWidth:"240px",pointerEvents:"none",lineHeight:"1.4"}),document.body.appendChild(g));function ne(t){if(!g)return;let u=Y??(typeof e=="string"?e:"timeline"),l=a.map(({selector:s,from:i,to:b},C)=>{let v=Q[C%Q.length],A=b>i?Math.min(1,Math.max(0,(t-i)/(b-i))):0,F=Math.round(A*100);return `<div style="margin:4px 0">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2px">
+          <span style="color:${v};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${s}</span>
+          <span style="color:#666;margin-left:8px">${F}%</span>
+        </div>
+        <div style="height:3px;background:#2a2a2a;border-radius:2px;position:relative;overflow:hidden">
+          <div style="position:absolute;left:${i*100}%;width:${(b-i)*100}%;height:100%;background:${v}33;border-radius:2px"></div>
+          <div style="position:absolute;left:${i*100}%;width:${(b-i)*A*100}%;height:100%;background:${v};border-radius:2px;transition:width 0.05s linear"></div>
+        </div>
+      </div>`}).join("");g.innerHTML=`
+      <div style="color:#555;margin-bottom:8px;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:6px">
+        scrollDrawTimeline \xB7 ${u}
+      </div>
+      ${l}
+      <div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06)">
+        <div style="display:flex;justify-content:space-between;margin-bottom:2px">
+          <span style="color:#555">scroll</span>
+          <span style="color:#666">${Math.round(t*100)}%</span>
+        </div>
+        <div style="height:2px;background:#2a2a2a;border-radius:1px;overflow:hidden">
+          <div style="height:100%;background:#fff;border-radius:1px;width:${t*100}%;transition:width 0.05s linear"></div>
+        </div>
+      </div>`;}function j(){return h==="x"?window.scrollX:window.scrollY}function re(){return h==="x"?window.innerWidth:window.innerHeight}function B(){let t=p.getBoundingClientRect(),u=j(),l=h==="x"?t.left:t.top,s=h==="x"?t.width:t.height,i=K({top:l,height:s},u,re(),ee,te);O=i.tStart,N=i.tEnd;}function V(t){p.style.setProperty("--scroll-draw-progress",String(t)),L.forEach(({elements:u,lengths:l,from:s,to:i,easeFn:b,fade:C})=>{let v=i-s,A=v>0?Math.min(1,Math.max(0,(t-s)/v)):0,F=b(A);u.forEach((U,oe)=>{U.style.strokeDashoffset=`${l[oe]*(1-F)}`,C&&(U.style.opacity=String(F));});}),ne(t);}function W(){M=-1,S=false,L.forEach(({elements:t,lengths:u,fade:l})=>{t.forEach((s,i)=>{s.style.strokeDashoffset=`${u[i]}`,l&&(s.style.opacity="0");});}),p.style.setProperty("--scroll-draw-progress","0");}function P(){if(!$||x)return;let t=J(j(),O,N,y);d&&(M=Math.max(M,t),t=M),E=t,V(t),t>=1&&!S?(S=true,c?.(),I>0&&d&&(k=setTimeout(()=>{I!==1/0&&I--,W();},T))):t<1&&!d&&(S=false),w=requestAnimationFrame(P);}B();let H=new IntersectionObserver(t=>{t.forEach(u=>{$=u.isIntersecting,$&&!x?w=requestAnimationFrame(P):cancelAnimationFrame(w);});},{threshold:0});H.observe(p);let z;function D(){clearTimeout(z),z=setTimeout(()=>{L.forEach(({elements:t,lengths:u})=>{t.forEach((l,s)=>{u[s]=q(l),l.style.strokeDasharray=`${u[s]}`;});}),B();},150);}return window.addEventListener("resize",D),window.addEventListener("orientationchange",D),{destroy(){cancelAnimationFrame(w),clearTimeout(z),clearTimeout(k),H.disconnect(),window.removeEventListener("resize",D),window.removeEventListener("orientationchange",D),g&&(g.remove(),g=null);},replay(){I=f==="infinite"?1/0:f??0,clearTimeout(k),W(),x=false;},pause(){x=true,cancelAnimationFrame(w);},resume(){x&&(x=false,$&&(w=requestAnimationFrame(P)));},seek(t){E=Math.min(1,Math.max(0,t)),M=E,x=true,cancelAnimationFrame(w),V(E);},getProgress(){return E}}}export{ce as scrollDrawTimeline};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Scroll-driven SVG path drawing animation library — zero dependencies, ~4.4 KB gzipped, works with React, Vue, and vanilla JS",
   "keywords": [
     "svg",
@@ -109,6 +109,11 @@
       "import": "./dist/group/index.mjs",
       "require": "./dist/group/index.cjs"
     },
+    "./cinematic": {
+      "types": "./dist/cinematic/index.d.ts",
+      "import": "./dist/cinematic/index.mjs",
+      "require": "./dist/cinematic/index.cjs"
+    },
     "./timeline": {
       "types": "./dist/timeline/index.d.ts",
       "import": "./dist/timeline/index.mjs",