svg-scroll-draw 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/angular/index.cjs +3 -3
  2. package/dist/angular/index.d.mts +11 -0
  3. package/dist/angular/index.d.ts +11 -0
  4. package/dist/angular/index.mjs +3 -3
  5. package/dist/astro/index.cjs +3 -3
  6. package/dist/astro/index.d.mts +11 -0
  7. package/dist/astro/index.d.ts +11 -0
  8. package/dist/astro/index.mjs +3 -3
  9. package/dist/cdn/svg-scroll-draw.global.js +3 -3
  10. package/dist/cli/init.js +211 -0
  11. package/dist/group/index.cjs +3 -3
  12. package/dist/group/index.d.mts +11 -0
  13. package/dist/group/index.d.ts +11 -0
  14. package/dist/group/index.mjs +3 -3
  15. package/dist/index.cjs +4 -4
  16. package/dist/index.d.mts +23 -1
  17. package/dist/index.d.ts +23 -1
  18. package/dist/index.mjs +4 -4
  19. package/dist/nuxt/index.cjs +3 -3
  20. package/dist/nuxt/index.d.mts +11 -0
  21. package/dist/nuxt/index.d.ts +11 -0
  22. package/dist/nuxt/index.mjs +3 -3
  23. package/dist/react/index.cjs +3 -3
  24. package/dist/react/index.d.mts +11 -0
  25. package/dist/react/index.d.ts +11 -0
  26. package/dist/react/index.mjs +3 -3
  27. package/dist/solid/index.cjs +3 -3
  28. package/dist/solid/index.d.mts +11 -0
  29. package/dist/solid/index.d.ts +11 -0
  30. package/dist/solid/index.mjs +3 -3
  31. package/dist/svelte/index.cjs +3 -3
  32. package/dist/svelte/index.d.mts +11 -0
  33. package/dist/svelte/index.d.ts +11 -0
  34. package/dist/svelte/index.mjs +3 -3
  35. package/dist/vue/index.cjs +3 -3
  36. package/dist/vue/index.d.mts +11 -0
  37. package/dist/vue/index.d.ts +11 -0
  38. package/dist/vue/index.mjs +3 -3
  39. package/dist/web-component/index.cjs +3 -3
  40. package/dist/web-component/index.mjs +3 -3
  41. package/package.json +4 -1
@@ -1,3 +1,3 @@
1
- 'use strict';function Ye({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<s;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],N=0;for(let u=0;u<s;u++)N+=b[u]/m,$.push(N);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<s;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let P=1-Math.pow(o,h);return P+(1-P)*(2*se-1)*(2*se-1)}return 1}}function Ze({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),o=Math.max(.1,n),d=s<=1?o/4:o/(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)/o)+1}var Se={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:Ye(),elastic:Ze()};function ke(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function He(e,n,s,o){switch(o){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function We(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 s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function et(e,n,s){return Math.min(s,Math.max(n,e))}function ne(e,n,s,o){return s===n?0:et((e-n)/(s-n)*o,0,1)}function Le(e,n,s,o,d){let m=He(e.top,e.height,n,o.element)-We(o.viewport,s),b=He(e.top,e.height,n,d.element)-We(d.viewport,s);return {tStart:m,tEnd:b}}function ze(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 s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,n,s){let o=ze(e),d=ze(n);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*s)},${Math.round(o[1]+(d[1]-o[1])*s)},${Math.round(o[2]+(d[2]-o[2])*s)})`}function qe(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var Ve={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 n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?qe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&qe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,n,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function d(){let m=s==="x"?window.scrollX:window.scrollY,b=e-m,$=n-m,N=s==="x";o.innerHTML=`
2
- <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>
3
- <div style="position:absolute;${N?`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 Pe(e,n,s){let o=(n.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)*s).toFixed(4))})}function Ge(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:N=0,direction:u="forward",once:h=false,debug:se=false,axis:P="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:De=0,rootMargin:Ie="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:R,clip:xe,autoplay:_e=false,duration:Xe=1e3,native:Ue=true,onProgress:le,onStart:me,onComplete:oe}=n,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Se[b]??Se.linear,Fe=ke($.start??"top bottom"),Ce=ke($.end??"bottom top"),D=typeof Ee=="string"?document.querySelector(Ee):Ee??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,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,S=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let r=t*100;switch(G){case "right":return `inset(0 0 0 ${100-r}%)`;case "top":return `inset(0 0 ${100-r}% 0)`;case "bottom":return `inset(${100-r}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-r}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Oe=performance.now();function ue(){return D?P==="x"?D.scrollLeft:D.scrollTop:P==="x"?window.scrollX:window.scrollY}function Ne(){return D?P==="x"?D.clientWidth:D.clientHeight:P==="x"?window.innerWidth:window.innerHeight}function Re(){let t=e.getBoundingClientRect(),r,l,g;if(D){let L=D.getBoundingClientRect();r=P==="x"?t.left-L.left+D.scrollLeft:t.top-L.top+D.scrollTop,l=P==="x"?t.width:t.height,g=ue();}else r=P==="x"?t.left:t.top,l=P==="x"?t.width:t.height,g=ue();let C=Le({top:r,height:l},g,Ne(),Fe,Ce);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=st(B,_,P));}function je(t,r){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=r==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=r==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=r==="reverse"?`${1-t}`:`${t}`),H&&A?l.style.stroke=ve(H,A,t):A&&(l.style.stroke=A),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&S!==null?l.style.fillOpacity=`${F+(S-F)*t}`:S!==null&&(l.style.fillOpacity=`${S}`),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}x.forEach((t,r)=>{t.style.strokeDasharray=`${v[r]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[r]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),R&&t.tagName.toLowerCase()==="path"&&W[r]&&t.setAttribute("d",W[r]);});}if(x.forEach(t=>{nt(t);let r=we(t);v.push(r),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),s?(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?`${r}`:"0",m&&(t.style.opacity="1"),A&&(t.style.stroke=A),T!==null&&(t.style.strokeWidth=`${T}`),S!==null&&(t.style.fillOpacity=`${S}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?"0":`${r}`,m?t.style.opacity=u==="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(s)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(s)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Je(){return !(Ue===false||!rt()||!x.length||typeof b!="string"||!(b in Ve)||G||P!=="y"||D||d!==1||N!==0||h||ce||fe!==false||R||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 Ke(){let t=`svg-scroll-draw-${++tt}`,r=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${r};`,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:${Ve[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(),Ne(),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(Je())return Ke();function Qe(){let t=Math.max(1,Xe),r=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*N*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&A?f.style.stroke=ve(H,A,q):A&&(f.style.stroke=A),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&S!==null?f.style.fillOpacity=`${F+(S-F)*q}`:S!==null&&(f.style.fillOpacity=`${S}`),R&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],R,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),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(k)return;let i=c-r;O||(O=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*N)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{r=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}f||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),r=performance.now(),l=0,k=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),r=null);});},{root:D??null,threshold:De,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(){k||(k=true,l=performance.now()-r,cancelAnimationFrame(E));},resume(){k&&(k=false,r=performance.now()-l,E=requestAnimationFrame(C));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,r=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(_e)return Qe();Re();function ge(){if(!pe||k)return;let t=performance.now(),r=ue(),l=d;if(fe!==false){let a=t-Oe,p=a>0?Math.abs(r-(ye<0?r:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=r,Oe=t;let g=ce?de===-1||r>=de?"forward":"reverse":u;de=r;let C=_-B,L=true;if(G){let a=Z(ne(r,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),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(r,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-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*N*C,c=Z(ne(r,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&A?a.style.stroke=ve(H,A,c):A&&(a.style.stroke=A),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&S!==null?a.style.fillOpacity=`${F+(S-F)*c}`:S!==null&&(a.style.fillOpacity=`${S}`),R&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],R,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(r,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(r,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Ae=new IntersectionObserver(t=>{t.forEach(r=>{pe=r.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:D??null,threshold:De,rootMargin:Ie}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,r)=>{v[r]=we(t),t.style.strokeDasharray=`${v[r]}`;}),Re();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Ae.observe(e),ae):Ae.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Ae.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let r=Math.min(1,Math.max(0,t));te=r,z=r,k=true,cancelAnimationFrame(E),je(r,u);},getProgress(){return te}}}var Be=class{constructor(){this.instance=null;}init(n,s={}){return this.destroy(),this.instance=Ge(n,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Be;
1
+ 'use strict';function rt({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),h=Math.sqrt(o),g=0,D=[];for(let p=0;p<s;p++){let E=Math.pow(h,p);D.push(E),g+=E;}let x=[0],S=0;for(let p=0;p<s;p++)S+=D[p]/g,x.push(S);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let E=0;E<s;E++)if(p<=x[E+1]){let G=(p-x[E])/(x[E+1]-x[E]);if(E===0)return G*(2-G);let d=1-Math.pow(o,E);return d+(1-d)*(2*G-1)*(2*G-1)}return 1}}function nt({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),o=Math.max(.1,n),h=s<=1?o/4:o/(2*Math.PI)*Math.asin(1/s);return g=>g<=0?0:g>=1?1:s*Math.pow(2,-10*g)*Math.sin((g-h)*(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:rt(),elastic:nt()};function Le(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function ze(e,n,s,o){switch(o){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function qe(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 Ee(e){let n=e.tagName.toLowerCase();if(n==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function st(e,n,s){return Math.min(s,Math.max(n,e))}function ie(e,n,s,o){return s===n?0:st((e-n)/(s-n)*o,0,1)}function De(e,n,s,o,h){let g=ze(e.top,e.height,n,o.element)-qe(o.viewport,s),D=ze(e.top,e.height,n,h.element)-qe(h.viewport,s);return {tStart:g,tEnd:D}}function Ve(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 s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,n,s){let o=Ve(e),h=Ve(n);return !o||!h?e:`rgb(${Math.round(o[0]+(h[0]-o[0])*s)},${Math.round(o[1]+(h[1]-o[1])*s)},${Math.round(o[2]+(h[2]-o[2])*s)})`}var Ge={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};function Be(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var _e={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 n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?Be("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function lt(e,n,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function h(){let g=s==="x"?window.scrollX:window.scrollY,D=e-g,x=n-g,S=s==="x";o.innerHTML=`
2
+ <div style="position:absolute;${S?`left:${D}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${D}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${S?`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",h,{passive:true}),h(),o}function Ie(e,n,s){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),h=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,g=>{let D=parseFloat(g),x=o[h++]??D;return String(+(D+(x-D)*s).toFixed(4))})}function Xe(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...o}=n,h=s?{...Ge[s],...o}:o,g=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:D="path, polyline, line, polygon, rect, circle",speed:x=1,fade:S=false,easing:p="linear",trigger:E={},stagger:G=0,direction:d="forward",once:K=false,debug:je=false,axis:N="y",scrollContainer:$e,autoReverse:me=false,delay:ue=0,strokeColor:Q,strokeWidth:Y,fillOpacity:Z,waypoints:ee,velocityScale:pe=false,threshold:Oe=0,rootMargin:Fe="0px",repeat:te=0,repeatDelay:Me=0,morphTo:H,clip:Se,autoplay:Je=false,duration:Ke=1e3,native:Qe=true,onProgress:ce,onStart:de,onComplete:ae}=h,_=Se===true?"left":typeof Se=="string"?Se:false,re=typeof p=="function"?p:Pe[p]??Pe.linear,Ce=Le(E.start??"top bottom"),Re=Le(E.end??"bottom top"),I=typeof $e=="string"?document.querySelector($e):$e??null,W=Array.isArray(Q)?Q[0]:null,T=Array.isArray(Q)?Q[1]:typeof Q=="string"?Q:null,O=Array.isArray(Y)?Y[0]:null,k=Array.isArray(Y)?Y[1]:typeof Y=="number"?Y:null,F=Array.isArray(Z)?Z[0]:null,A=Array.isArray(Z)?Z[1]:typeof Z=="number"?Z:null;function ne(t){let r=t*100;switch(_){case "right":return `inset(0 0 0 ${100-r}%)`;case "top":return `inset(0 0 ${100-r}% 0)`;case "bottom":return `inset(${100-r}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-r}% 0 0)`}}let $=_?[]:Array.from(e.querySelectorAll(D)),w=[],z=[],X=0,U=0,M=false,R=false,v=0,ye=false,q=-1,he=-1,P=false,se=0,B=0,j,Te=null,J=new Set,ge=-1,Ne=performance.now();function fe(){return I?N==="x"?I.scrollLeft:I.scrollTop:N==="x"?window.scrollX:window.scrollY}function He(){return I?N==="x"?I.clientWidth:I.clientHeight:N==="x"?window.innerWidth:window.innerHeight}function We(){let t=e.getBoundingClientRect(),r,l,y;if(I){let L=I.getBoundingClientRect();r=N==="x"?t.left-L.left+I.scrollLeft:t.top-L.top+I.scrollTop,l=N==="x"?t.width:t.height,y=fe();}else r=N==="x"?t.left:t.top,l=N==="x"?t.width:t.height,y=fe();let C=De({top:r,height:l},y,He(),Ce,Re);X=C.tStart,U=C.tEnd,je&&process.env.NODE_ENV!=="production"&&(Te?.remove(),Te=lt(X,U,N));}function Ye(t,r){if(e.style.setProperty("--scroll-draw-progress",String(t)),_){let l=r==="reverse"?1-t:t;e.style.clipPath=ne(l);return}$.forEach((l,y)=>{l.style.strokeDashoffset=r==="reverse"?`${w[y]*t}`:`${w[y]*(1-t)}`,S&&(l.style.opacity=r==="reverse"?`${1-t}`:`${t}`),W&&T?l.style.stroke=xe(W,T,t):T&&(l.style.stroke=T),O!==null&&k!==null?l.style.strokeWidth=`${O+(k-O)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),H&&l.tagName.toLowerCase()==="path"&&z[y]&&l.setAttribute("d",Ie(z[y],H,t));});}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),_){e.style.clipPath=ne(0);return}$.forEach((t,r)=>{t.style.strokeDasharray=`${w[r]}`,t.style.strokeDashoffset=d==="reverse"?"0":`${w[r]}`,S?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),O!==null&&(t.style.strokeWidth=`${O}`),F!==null&&(t.style.fillOpacity=`${F}`),H&&t.tagName.toLowerCase()==="path"&&z[r]&&t.setAttribute("d",z[r]);});}if($.forEach(t=>{at(t);let r=Ee(t);w.push(r),t.tagName.toLowerCase()==="path"?z.push(t.getAttribute("d")??""):z.push(""),g?(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=d==="reverse"?`${r}`:"0",S&&(t.style.opacity="1"),T&&(t.style.stroke=T),k!==null&&(t.style.strokeWidth=`${k}`),A!==null&&(t.style.fillOpacity=`${A}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=d==="reverse"?"0":`${r}`,S?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),O!==null&&(t.style.strokeWidth=`${O}`),F!==null&&(t.style.fillOpacity=`${F}`));}),_){if(g)return e.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(g)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ze(){return !(Qe===false||!it()||!$.length||typeof p!="string"||!(p in _e)||_||N!=="y"||I||x!==1||G!==0||K||me||pe!==false||H||ee||te||ue>0||ce||de||ae||Q!=null||Y!=null||Z!=null||(E.start??"top bottom").trim()!=="top bottom"||(E.end??"bottom top").trim()!=="bottom top")}function et(){let t=`svg-scroll-draw-${++ot}`,r=d==="reverse"?"0":"var(--ssd-len)",l=d==="reverse"?"var(--ssd-len)":"0",y=`stroke-dashoffset:${r};`,C=`stroke-dashoffset:${l};`;S&&(y+=`opacity:${d==="reverse"?1:0};`,C+=`opacity:${d==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${y}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${_e[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,c){i.style.setProperty("--ssd-len",String(w[c])),i.style.strokeDasharray=`${w[c]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}$.forEach(a);let f=false,b=-1;function u(){if(b>=0)return b;let i=e.getBoundingClientRect(),{tStart:c,tEnd:m}=De({top:i.top,height:i.height},fe(),He(),Ce,Re);return re(ie(fe(),c,m,x))}return {destroy(){$.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){f=false,b=-1,$.forEach(a);},pause(){f=true,$.forEach(i=>{i.style.animationPlayState="paused";});},resume(){f&&(f=false,$.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let c=Math.min(1,Math.max(0,i));b=c,f=true,$.forEach((m,oe)=>{m.classList.remove(t),m.style.strokeDashoffset=d==="reverse"?`${w[oe]*c}`:`${w[oe]*(1-c)}`,S&&(m.style.opacity=d==="reverse"?`${1-c}`:`${c}`);});},getProgress(){return u()}}}if(Ze())return et();function tt(){let t=Math.max(1,Ke),r=0,l=0;function y(u){let i=true;if(_){let c=Math.min(1,Math.max(0,u/t)),m=re(c);se=m,e.style.setProperty("--scroll-draw-progress",String(m)),e.style.clipPath=ne(d==="reverse"?1-m:m),ce?.(m),c<1&&(i=false);}else $.forEach((c,m)=>{let oe=m*G*t,le=Math.min(1,Math.max(0,(u-oe)/t)),V=re(le);c.style.strokeDashoffset=d==="reverse"?`${w[m]*V}`:`${w[m]*(1-V)}`,S&&(c.style.opacity=d==="reverse"?`${1-V}`:`${V}`),W&&T?c.style.stroke=xe(W,T,V):T&&(c.style.stroke=T),O!==null&&k!==null?c.style.strokeWidth=`${O+(k-O)*V}`:k!==null&&(c.style.strokeWidth=`${k}`),F!==null&&A!==null?c.style.fillOpacity=`${F+(A-F)*V}`:A!==null&&(c.style.fillOpacity=`${A}`),H&&c.tagName.toLowerCase()==="path"&&z[m]&&c.setAttribute("d",Ie(z[m],H,V)),m===0&&(ce?.(V),e.style.setProperty("--scroll-draw-progress",String(V))),le<1&&(i=false);});if(ee){let c=Math.min(1,Math.max(0,u/t)),m=re(c);for(let oe in ee){let le=parseFloat(oe);m>=le&&!J.has(le)&&(J.add(le),ee[oe]?.());}}return i}function C(u){if(P)return;let i=u-r;R||(R=true,de?.());let c=y(i);if(c&&!M){M=true,y(t*(1+Math.max(0,$.length-1)*G)),ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,j=setTimeout(()=>{r=performance.now(),R=false,M=false,J.clear(),be(),v=requestAnimationFrame(C);},Me));return}c||(v=requestAnimationFrame(C));}function L(){cancelAnimationFrame(v),clearTimeout(j),r=performance.now(),l=0,P=false,R=false,M=false,B=0,J.clear(),be(),v=requestAnimationFrame(C);}let a=new IntersectionObserver(u=>{u.forEach(i=>{i.isIntersecting&&!(K&&M)?L():!i.isIntersecting&&!K&&!M&&(cancelAnimationFrame(v),clearTimeout(j),r=null);});},{root:I??null,threshold:Oe,rootMargin:Fe}),f;function b(){clearTimeout(f),f=setTimeout(()=>{$.forEach((u,i)=>{w[i]=Ee(u),u.style.strokeDasharray=`${w[i]}`;});},150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),ue>0?setTimeout(()=>a.observe(e),ue):a.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),a.disconnect(),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(f);},replay(){B=0,L();},pause(){P||(P=true,l=performance.now()-r,cancelAnimationFrame(v));},resume(){P&&(P=false,r=performance.now()-l,v=requestAnimationFrame(C));},seek(u){let i=Math.min(1,Math.max(0,u));se=i,P=true,l=i*t,r=performance.now()-l,cancelAnimationFrame(v),y(l);},getProgress(){return se}}}if(Je)return tt();We();function we(){if(!ye||P)return;let t=performance.now(),r=fe(),l=x;if(pe!==false){let a=t-Ne,f=a>0?Math.abs(r-(ge<0?r:ge))/a:0;l=x*Math.max(.2,1+f*(typeof pe=="number"?pe:1)*.04);}ge=r,Ne=t;let y=me?he===-1||r>=he?"forward":"reverse":d;he=r;let C=U-X,L=true;if(_){let a=re(ie(r,X,U,l));K&&!me&&(q=Math.max(q,a),a=q),se=a,e.style.setProperty("--scroll-draw-progress",String(a));let f=y==="reverse"?1-a:a;e.style.clipPath=ne(f),ce?.(a),!R&&ie(r,X,U,l)>0&&(R=true,de?.()),a>=1&&!M?(M=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,j=setTimeout(()=>{q=-1,R=false,M=false,e.style.clipPath=ne(0);},Me))):a<1&&!K&&(M=false),v=requestAnimationFrame(we);return}if($.forEach((a,f)=>{let b=f*G*C,u=re(ie(r,X+b,U+b,l));K&&!me&&(q=Math.max(q,u),u=q),se=u,a.style.strokeDashoffset=y==="reverse"?`${w[f]*u}`:`${w[f]*(1-u)}`,S&&(a.style.opacity=y==="reverse"?`${1-u}`:`${u}`),W&&T?a.style.stroke=xe(W,T,u):T&&(a.style.stroke=T),O!==null&&k!==null?a.style.strokeWidth=`${O+(k-O)*u}`:k!==null&&(a.style.strokeWidth=`${k}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*u}`:A!==null&&(a.style.fillOpacity=`${A}`),H&&a.tagName.toLowerCase()==="path"&&z[f]&&a.setAttribute("d",Ie(z[f],H,u)),f===0&&(ce?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(L=false);}),ee){let a=re(ie(r,X,U,l));for(let f in ee){let b=parseFloat(f);a>=b&&!J.has(b)&&(J.add(b),ee[f]?.());}}!R&&ie(r,X,U,l)>0&&(R=true,de?.()),L&&!M?(M=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,j=setTimeout(()=>{q=-1,R=false,M=false,J.clear(),be();},Me))):!L&&!K&&(M=false),v=requestAnimationFrame(we);}let ke=new IntersectionObserver(t=>{t.forEach(r=>{ye=r.isIntersecting,ye&&!P?v=requestAnimationFrame(we):cancelAnimationFrame(v);});},{root:I??null,threshold:Oe,rootMargin:Fe}),Ae;function ve(){clearTimeout(Ae),Ae=setTimeout(()=>{$.forEach((t,r)=>{w[r]=Ee(t),t.style.strokeDasharray=`${w[r]}`;}),We();},150);}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),ue>0?setTimeout(()=>ke.observe(e),ue):ke.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),ke.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Ae),Te?.remove();},replay(){q=-1,he=-1,ge=-1,R=false,M=false,B=0,P=false,J.clear(),clearTimeout(j),be();},pause(){P=true,cancelAnimationFrame(v);},resume(){P&&(P=false,ye&&(v=requestAnimationFrame(we)));},seek(t){let r=Math.min(1,Math.max(0,t));se=r,q=r,P=true,cancelAnimationFrame(v),Ye(r,d);},getProgress(){return se}}}var Ue=class{constructor(){this.instance=null;}init(n,s={}){return this.destroy(),this.instance=Xe(n,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Ue;
@@ -1,9 +1,20 @@
1
1
  type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
+ type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
2
3
  interface TriggerConfig {
3
4
  start?: string;
4
5
  end?: string;
5
6
  }
6
7
  interface ScrollDrawOptions {
8
+ /**
9
+ * Apply a named preset as the base configuration. User-supplied options
10
+ * always override the preset. Available presets:
11
+ * - `'sketch'` — staggered ease-in draw, pencil feel
12
+ * - `'reveal'` — fade + ease-out, draws once on viewport entry
13
+ * - `'typewriter'` — fast linear draw with stagger
14
+ * - `'cinematic'` — slow ease-in-out with fade, dramatic entrance
15
+ * - `'spring'` — spring easing, bouncy organic feel
16
+ */
17
+ preset?: PresetName;
7
18
  selector?: string;
8
19
  speed?: number;
9
20
  fade?: boolean;
@@ -1,9 +1,20 @@
1
1
  type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
+ type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
2
3
  interface TriggerConfig {
3
4
  start?: string;
4
5
  end?: string;
5
6
  }
6
7
  interface ScrollDrawOptions {
8
+ /**
9
+ * Apply a named preset as the base configuration. User-supplied options
10
+ * always override the preset. Available presets:
11
+ * - `'sketch'` — staggered ease-in draw, pencil feel
12
+ * - `'reveal'` — fade + ease-out, draws once on viewport entry
13
+ * - `'typewriter'` — fast linear draw with stagger
14
+ * - `'cinematic'` — slow ease-in-out with fade, dramatic entrance
15
+ * - `'spring'` — spring easing, bouncy organic feel
16
+ */
17
+ preset?: PresetName;
7
18
  selector?: string;
8
19
  speed?: number;
9
20
  fade?: boolean;
@@ -1,3 +1,3 @@
1
- function Ye({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<s;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],N=0;for(let u=0;u<s;u++)N+=b[u]/m,$.push(N);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<s;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let P=1-Math.pow(o,h);return P+(1-P)*(2*se-1)*(2*se-1)}return 1}}function Ze({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),o=Math.max(.1,n),d=s<=1?o/4:o/(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)/o)+1}var Se={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:Ye(),elastic:Ze()};function ke(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function He(e,n,s,o){switch(o){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function We(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 s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function et(e,n,s){return Math.min(s,Math.max(n,e))}function ne(e,n,s,o){return s===n?0:et((e-n)/(s-n)*o,0,1)}function Le(e,n,s,o,d){let m=He(e.top,e.height,n,o.element)-We(o.viewport,s),b=He(e.top,e.height,n,d.element)-We(d.viewport,s);return {tStart:m,tEnd:b}}function ze(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 s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,n,s){let o=ze(e),d=ze(n);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*s)},${Math.round(o[1]+(d[1]-o[1])*s)},${Math.round(o[2]+(d[2]-o[2])*s)})`}function qe(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var Ve={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 n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?qe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&qe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,n,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function d(){let m=s==="x"?window.scrollX:window.scrollY,b=e-m,$=n-m,N=s==="x";o.innerHTML=`
2
- <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>
3
- <div style="position:absolute;${N?`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 Pe(e,n,s){let o=(n.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)*s).toFixed(4))})}function Ge(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:N=0,direction:u="forward",once:h=false,debug:se=false,axis:P="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:De=0,rootMargin:Ie="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:R,clip:xe,autoplay:_e=false,duration:Xe=1e3,native:Ue=true,onProgress:le,onStart:me,onComplete:oe}=n,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Se[b]??Se.linear,Fe=ke($.start??"top bottom"),Ce=ke($.end??"bottom top"),D=typeof Ee=="string"?document.querySelector(Ee):Ee??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,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,S=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let r=t*100;switch(G){case "right":return `inset(0 0 0 ${100-r}%)`;case "top":return `inset(0 0 ${100-r}% 0)`;case "bottom":return `inset(${100-r}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-r}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Oe=performance.now();function ue(){return D?P==="x"?D.scrollLeft:D.scrollTop:P==="x"?window.scrollX:window.scrollY}function Ne(){return D?P==="x"?D.clientWidth:D.clientHeight:P==="x"?window.innerWidth:window.innerHeight}function Re(){let t=e.getBoundingClientRect(),r,l,g;if(D){let L=D.getBoundingClientRect();r=P==="x"?t.left-L.left+D.scrollLeft:t.top-L.top+D.scrollTop,l=P==="x"?t.width:t.height,g=ue();}else r=P==="x"?t.left:t.top,l=P==="x"?t.width:t.height,g=ue();let C=Le({top:r,height:l},g,Ne(),Fe,Ce);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=st(B,_,P));}function je(t,r){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=r==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=r==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=r==="reverse"?`${1-t}`:`${t}`),H&&A?l.style.stroke=ve(H,A,t):A&&(l.style.stroke=A),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&S!==null?l.style.fillOpacity=`${F+(S-F)*t}`:S!==null&&(l.style.fillOpacity=`${S}`),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}x.forEach((t,r)=>{t.style.strokeDasharray=`${v[r]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[r]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),R&&t.tagName.toLowerCase()==="path"&&W[r]&&t.setAttribute("d",W[r]);});}if(x.forEach(t=>{nt(t);let r=we(t);v.push(r),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),s?(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?`${r}`:"0",m&&(t.style.opacity="1"),A&&(t.style.stroke=A),T!==null&&(t.style.strokeWidth=`${T}`),S!==null&&(t.style.fillOpacity=`${S}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?"0":`${r}`,m?t.style.opacity=u==="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(s)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(s)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Je(){return !(Ue===false||!rt()||!x.length||typeof b!="string"||!(b in Ve)||G||P!=="y"||D||d!==1||N!==0||h||ce||fe!==false||R||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 Ke(){let t=`svg-scroll-draw-${++tt}`,r=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${r};`,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:${Ve[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(),Ne(),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(Je())return Ke();function Qe(){let t=Math.max(1,Xe),r=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*N*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&A?f.style.stroke=ve(H,A,q):A&&(f.style.stroke=A),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&S!==null?f.style.fillOpacity=`${F+(S-F)*q}`:S!==null&&(f.style.fillOpacity=`${S}`),R&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],R,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),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(k)return;let i=c-r;O||(O=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*N)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{r=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}f||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),r=performance.now(),l=0,k=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),r=null);});},{root:D??null,threshold:De,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(){k||(k=true,l=performance.now()-r,cancelAnimationFrame(E));},resume(){k&&(k=false,r=performance.now()-l,E=requestAnimationFrame(C));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,r=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(_e)return Qe();Re();function ge(){if(!pe||k)return;let t=performance.now(),r=ue(),l=d;if(fe!==false){let a=t-Oe,p=a>0?Math.abs(r-(ye<0?r:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=r,Oe=t;let g=ce?de===-1||r>=de?"forward":"reverse":u;de=r;let C=_-B,L=true;if(G){let a=Z(ne(r,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),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(r,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-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*N*C,c=Z(ne(r,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&A?a.style.stroke=ve(H,A,c):A&&(a.style.stroke=A),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&S!==null?a.style.fillOpacity=`${F+(S-F)*c}`:S!==null&&(a.style.fillOpacity=`${S}`),R&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],R,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(r,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(r,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Ae=new IntersectionObserver(t=>{t.forEach(r=>{pe=r.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:D??null,threshold:De,rootMargin:Ie}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,r)=>{v[r]=we(t),t.style.strokeDasharray=`${v[r]}`;}),Re();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Ae.observe(e),ae):Ae.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Ae.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let r=Math.min(1,Math.max(0,t));te=r,z=r,k=true,cancelAnimationFrame(E),je(r,u);},getProgress(){return te}}}var Be=class{constructor(){this.instance=null;}init(n,s={}){return this.destroy(),this.instance=Ge(n,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Be as ScrollDrawRef};
1
+ function rt({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),h=Math.sqrt(o),g=0,D=[];for(let p=0;p<s;p++){let E=Math.pow(h,p);D.push(E),g+=E;}let x=[0],S=0;for(let p=0;p<s;p++)S+=D[p]/g,x.push(S);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let E=0;E<s;E++)if(p<=x[E+1]){let G=(p-x[E])/(x[E+1]-x[E]);if(E===0)return G*(2-G);let d=1-Math.pow(o,E);return d+(1-d)*(2*G-1)*(2*G-1)}return 1}}function nt({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),o=Math.max(.1,n),h=s<=1?o/4:o/(2*Math.PI)*Math.asin(1/s);return g=>g<=0?0:g>=1?1:s*Math.pow(2,-10*g)*Math.sin((g-h)*(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:rt(),elastic:nt()};function Le(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function ze(e,n,s,o){switch(o){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function qe(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 Ee(e){let n=e.tagName.toLowerCase();if(n==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function st(e,n,s){return Math.min(s,Math.max(n,e))}function ie(e,n,s,o){return s===n?0:st((e-n)/(s-n)*o,0,1)}function De(e,n,s,o,h){let g=ze(e.top,e.height,n,o.element)-qe(o.viewport,s),D=ze(e.top,e.height,n,h.element)-qe(h.viewport,s);return {tStart:g,tEnd:D}}function Ve(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 s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,n,s){let o=Ve(e),h=Ve(n);return !o||!h?e:`rgb(${Math.round(o[0]+(h[0]-o[0])*s)},${Math.round(o[1]+(h[1]-o[1])*s)},${Math.round(o[2]+(h[2]-o[2])*s)})`}var Ge={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};function Be(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var _e={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 n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?Be("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function lt(e,n,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function h(){let g=s==="x"?window.scrollX:window.scrollY,D=e-g,x=n-g,S=s==="x";o.innerHTML=`
2
+ <div style="position:absolute;${S?`left:${D}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${D}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${S?`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",h,{passive:true}),h(),o}function Ie(e,n,s){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),h=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,g=>{let D=parseFloat(g),x=o[h++]??D;return String(+(D+(x-D)*s).toFixed(4))})}function Xe(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...o}=n,h=s?{...Ge[s],...o}:o,g=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:D="path, polyline, line, polygon, rect, circle",speed:x=1,fade:S=false,easing:p="linear",trigger:E={},stagger:G=0,direction:d="forward",once:K=false,debug:je=false,axis:N="y",scrollContainer:$e,autoReverse:me=false,delay:ue=0,strokeColor:Q,strokeWidth:Y,fillOpacity:Z,waypoints:ee,velocityScale:pe=false,threshold:Oe=0,rootMargin:Fe="0px",repeat:te=0,repeatDelay:Me=0,morphTo:H,clip:Se,autoplay:Je=false,duration:Ke=1e3,native:Qe=true,onProgress:ce,onStart:de,onComplete:ae}=h,_=Se===true?"left":typeof Se=="string"?Se:false,re=typeof p=="function"?p:Pe[p]??Pe.linear,Ce=Le(E.start??"top bottom"),Re=Le(E.end??"bottom top"),I=typeof $e=="string"?document.querySelector($e):$e??null,W=Array.isArray(Q)?Q[0]:null,T=Array.isArray(Q)?Q[1]:typeof Q=="string"?Q:null,O=Array.isArray(Y)?Y[0]:null,k=Array.isArray(Y)?Y[1]:typeof Y=="number"?Y:null,F=Array.isArray(Z)?Z[0]:null,A=Array.isArray(Z)?Z[1]:typeof Z=="number"?Z:null;function ne(t){let r=t*100;switch(_){case "right":return `inset(0 0 0 ${100-r}%)`;case "top":return `inset(0 0 ${100-r}% 0)`;case "bottom":return `inset(${100-r}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-r}% 0 0)`}}let $=_?[]:Array.from(e.querySelectorAll(D)),w=[],z=[],X=0,U=0,M=false,R=false,v=0,ye=false,q=-1,he=-1,P=false,se=0,B=0,j,Te=null,J=new Set,ge=-1,Ne=performance.now();function fe(){return I?N==="x"?I.scrollLeft:I.scrollTop:N==="x"?window.scrollX:window.scrollY}function He(){return I?N==="x"?I.clientWidth:I.clientHeight:N==="x"?window.innerWidth:window.innerHeight}function We(){let t=e.getBoundingClientRect(),r,l,y;if(I){let L=I.getBoundingClientRect();r=N==="x"?t.left-L.left+I.scrollLeft:t.top-L.top+I.scrollTop,l=N==="x"?t.width:t.height,y=fe();}else r=N==="x"?t.left:t.top,l=N==="x"?t.width:t.height,y=fe();let C=De({top:r,height:l},y,He(),Ce,Re);X=C.tStart,U=C.tEnd,je&&process.env.NODE_ENV!=="production"&&(Te?.remove(),Te=lt(X,U,N));}function Ye(t,r){if(e.style.setProperty("--scroll-draw-progress",String(t)),_){let l=r==="reverse"?1-t:t;e.style.clipPath=ne(l);return}$.forEach((l,y)=>{l.style.strokeDashoffset=r==="reverse"?`${w[y]*t}`:`${w[y]*(1-t)}`,S&&(l.style.opacity=r==="reverse"?`${1-t}`:`${t}`),W&&T?l.style.stroke=xe(W,T,t):T&&(l.style.stroke=T),O!==null&&k!==null?l.style.strokeWidth=`${O+(k-O)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),H&&l.tagName.toLowerCase()==="path"&&z[y]&&l.setAttribute("d",Ie(z[y],H,t));});}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),_){e.style.clipPath=ne(0);return}$.forEach((t,r)=>{t.style.strokeDasharray=`${w[r]}`,t.style.strokeDashoffset=d==="reverse"?"0":`${w[r]}`,S?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),O!==null&&(t.style.strokeWidth=`${O}`),F!==null&&(t.style.fillOpacity=`${F}`),H&&t.tagName.toLowerCase()==="path"&&z[r]&&t.setAttribute("d",z[r]);});}if($.forEach(t=>{at(t);let r=Ee(t);w.push(r),t.tagName.toLowerCase()==="path"?z.push(t.getAttribute("d")??""):z.push(""),g?(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=d==="reverse"?`${r}`:"0",S&&(t.style.opacity="1"),T&&(t.style.stroke=T),k!==null&&(t.style.strokeWidth=`${k}`),A!==null&&(t.style.fillOpacity=`${A}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=d==="reverse"?"0":`${r}`,S?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),O!==null&&(t.style.strokeWidth=`${O}`),F!==null&&(t.style.fillOpacity=`${F}`));}),_){if(g)return e.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(g)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ze(){return !(Qe===false||!it()||!$.length||typeof p!="string"||!(p in _e)||_||N!=="y"||I||x!==1||G!==0||K||me||pe!==false||H||ee||te||ue>0||ce||de||ae||Q!=null||Y!=null||Z!=null||(E.start??"top bottom").trim()!=="top bottom"||(E.end??"bottom top").trim()!=="bottom top")}function et(){let t=`svg-scroll-draw-${++ot}`,r=d==="reverse"?"0":"var(--ssd-len)",l=d==="reverse"?"var(--ssd-len)":"0",y=`stroke-dashoffset:${r};`,C=`stroke-dashoffset:${l};`;S&&(y+=`opacity:${d==="reverse"?1:0};`,C+=`opacity:${d==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${y}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${_e[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,c){i.style.setProperty("--ssd-len",String(w[c])),i.style.strokeDasharray=`${w[c]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}$.forEach(a);let f=false,b=-1;function u(){if(b>=0)return b;let i=e.getBoundingClientRect(),{tStart:c,tEnd:m}=De({top:i.top,height:i.height},fe(),He(),Ce,Re);return re(ie(fe(),c,m,x))}return {destroy(){$.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){f=false,b=-1,$.forEach(a);},pause(){f=true,$.forEach(i=>{i.style.animationPlayState="paused";});},resume(){f&&(f=false,$.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let c=Math.min(1,Math.max(0,i));b=c,f=true,$.forEach((m,oe)=>{m.classList.remove(t),m.style.strokeDashoffset=d==="reverse"?`${w[oe]*c}`:`${w[oe]*(1-c)}`,S&&(m.style.opacity=d==="reverse"?`${1-c}`:`${c}`);});},getProgress(){return u()}}}if(Ze())return et();function tt(){let t=Math.max(1,Ke),r=0,l=0;function y(u){let i=true;if(_){let c=Math.min(1,Math.max(0,u/t)),m=re(c);se=m,e.style.setProperty("--scroll-draw-progress",String(m)),e.style.clipPath=ne(d==="reverse"?1-m:m),ce?.(m),c<1&&(i=false);}else $.forEach((c,m)=>{let oe=m*G*t,le=Math.min(1,Math.max(0,(u-oe)/t)),V=re(le);c.style.strokeDashoffset=d==="reverse"?`${w[m]*V}`:`${w[m]*(1-V)}`,S&&(c.style.opacity=d==="reverse"?`${1-V}`:`${V}`),W&&T?c.style.stroke=xe(W,T,V):T&&(c.style.stroke=T),O!==null&&k!==null?c.style.strokeWidth=`${O+(k-O)*V}`:k!==null&&(c.style.strokeWidth=`${k}`),F!==null&&A!==null?c.style.fillOpacity=`${F+(A-F)*V}`:A!==null&&(c.style.fillOpacity=`${A}`),H&&c.tagName.toLowerCase()==="path"&&z[m]&&c.setAttribute("d",Ie(z[m],H,V)),m===0&&(ce?.(V),e.style.setProperty("--scroll-draw-progress",String(V))),le<1&&(i=false);});if(ee){let c=Math.min(1,Math.max(0,u/t)),m=re(c);for(let oe in ee){let le=parseFloat(oe);m>=le&&!J.has(le)&&(J.add(le),ee[oe]?.());}}return i}function C(u){if(P)return;let i=u-r;R||(R=true,de?.());let c=y(i);if(c&&!M){M=true,y(t*(1+Math.max(0,$.length-1)*G)),ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,j=setTimeout(()=>{r=performance.now(),R=false,M=false,J.clear(),be(),v=requestAnimationFrame(C);},Me));return}c||(v=requestAnimationFrame(C));}function L(){cancelAnimationFrame(v),clearTimeout(j),r=performance.now(),l=0,P=false,R=false,M=false,B=0,J.clear(),be(),v=requestAnimationFrame(C);}let a=new IntersectionObserver(u=>{u.forEach(i=>{i.isIntersecting&&!(K&&M)?L():!i.isIntersecting&&!K&&!M&&(cancelAnimationFrame(v),clearTimeout(j),r=null);});},{root:I??null,threshold:Oe,rootMargin:Fe}),f;function b(){clearTimeout(f),f=setTimeout(()=>{$.forEach((u,i)=>{w[i]=Ee(u),u.style.strokeDasharray=`${w[i]}`;});},150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),ue>0?setTimeout(()=>a.observe(e),ue):a.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),a.disconnect(),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(f);},replay(){B=0,L();},pause(){P||(P=true,l=performance.now()-r,cancelAnimationFrame(v));},resume(){P&&(P=false,r=performance.now()-l,v=requestAnimationFrame(C));},seek(u){let i=Math.min(1,Math.max(0,u));se=i,P=true,l=i*t,r=performance.now()-l,cancelAnimationFrame(v),y(l);},getProgress(){return se}}}if(Je)return tt();We();function we(){if(!ye||P)return;let t=performance.now(),r=fe(),l=x;if(pe!==false){let a=t-Ne,f=a>0?Math.abs(r-(ge<0?r:ge))/a:0;l=x*Math.max(.2,1+f*(typeof pe=="number"?pe:1)*.04);}ge=r,Ne=t;let y=me?he===-1||r>=he?"forward":"reverse":d;he=r;let C=U-X,L=true;if(_){let a=re(ie(r,X,U,l));K&&!me&&(q=Math.max(q,a),a=q),se=a,e.style.setProperty("--scroll-draw-progress",String(a));let f=y==="reverse"?1-a:a;e.style.clipPath=ne(f),ce?.(a),!R&&ie(r,X,U,l)>0&&(R=true,de?.()),a>=1&&!M?(M=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,j=setTimeout(()=>{q=-1,R=false,M=false,e.style.clipPath=ne(0);},Me))):a<1&&!K&&(M=false),v=requestAnimationFrame(we);return}if($.forEach((a,f)=>{let b=f*G*C,u=re(ie(r,X+b,U+b,l));K&&!me&&(q=Math.max(q,u),u=q),se=u,a.style.strokeDashoffset=y==="reverse"?`${w[f]*u}`:`${w[f]*(1-u)}`,S&&(a.style.opacity=y==="reverse"?`${1-u}`:`${u}`),W&&T?a.style.stroke=xe(W,T,u):T&&(a.style.stroke=T),O!==null&&k!==null?a.style.strokeWidth=`${O+(k-O)*u}`:k!==null&&(a.style.strokeWidth=`${k}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*u}`:A!==null&&(a.style.fillOpacity=`${A}`),H&&a.tagName.toLowerCase()==="path"&&z[f]&&a.setAttribute("d",Ie(z[f],H,u)),f===0&&(ce?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(L=false);}),ee){let a=re(ie(r,X,U,l));for(let f in ee){let b=parseFloat(f);a>=b&&!J.has(b)&&(J.add(b),ee[f]?.());}}!R&&ie(r,X,U,l)>0&&(R=true,de?.()),L&&!M?(M=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,j=setTimeout(()=>{q=-1,R=false,M=false,J.clear(),be();},Me))):!L&&!K&&(M=false),v=requestAnimationFrame(we);}let ke=new IntersectionObserver(t=>{t.forEach(r=>{ye=r.isIntersecting,ye&&!P?v=requestAnimationFrame(we):cancelAnimationFrame(v);});},{root:I??null,threshold:Oe,rootMargin:Fe}),Ae;function ve(){clearTimeout(Ae),Ae=setTimeout(()=>{$.forEach((t,r)=>{w[r]=Ee(t),t.style.strokeDasharray=`${w[r]}`;}),We();},150);}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),ue>0?setTimeout(()=>ke.observe(e),ue):ke.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),ke.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Ae),Te?.remove();},replay(){q=-1,he=-1,ge=-1,R=false,M=false,B=0,P=false,J.clear(),clearTimeout(j),be();},pause(){P=true,cancelAnimationFrame(v);},resume(){P&&(P=false,ye&&(v=requestAnimationFrame(we)));},seek(t){let r=Math.min(1,Math.max(0,t));se=r,q=r,P=true,cancelAnimationFrame(v),Ye(r,d);},getProgress(){return se}}}var Ue=class{constructor(){this.instance=null;}init(n,s={}){return this.destroy(),this.instance=Xe(n,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Ue as ScrollDrawRef};
@@ -1,3 +1,3 @@
1
- '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=`
2
- <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>
3
- <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;
1
+ 'use strict';function _e({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),g=Math.sqrt(o),h=0,L=[];for(let p=0;p<n;p++){let S=Math.pow(g,p);L.push(S),h+=S;}let E=[0],k=0;for(let p=0;p<n;p++)k+=L[p]/h,E.push(k);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let S=0;S<n;S++)if(p<=E[S+1]){let z=(p-E[S])/(E[S+1]-E[S]);if(S===0)return z*(2-z);let d=1-Math.pow(o,S);return d+(1-d)*(2*z-1)*(2*z-1)}return 1}}function je({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),g=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return h=>h<=0?0:h>=1?1:n*Math.pow(2,-10*h)*Math.sin((h-g)*(2*Math.PI)/o)+1}var Se={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:_e(),elastic:je()};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 Ge(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 ze(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 nt(e,r,n){return Math.min(n,Math.max(r,e))}function ie(e,r,n,o){return n===r?0:nt((e-r)/(n-r)*o,0,1)}function Ie(e,r,n,o,g){let h=Ge(e.top,e.height,r,o.element)-ze(o.viewport,n),L=Ge(e.top,e.height,r,g.element)-ze(g.viewport,n);return {tStart:h,tEnd:L}}function Be(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,n){let o=Be(e),g=Be(r);return !o||!g?e:`rgb(${Math.round(o[0]+(g[0]-o[0])*n)},${Math.round(o[1]+(g[1]-o[1])*n)},${Math.round(o[2]+(g[2]-o[2])*n)})`}var Oe={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};function Xe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Je={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},st=0;function ot(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function it(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Xe("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Xe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function at(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 g(){let h=n==="x"?window.scrollX:window.scrollY,L=e-h,E=r-h,k=n==="x";o.innerHTML=`
2
+ <div style="position:absolute;${k?`left:${L}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${L}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${k?`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(o),window.addEventListener("scroll",g,{passive:true}),g(),o}function Ce(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),g=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,h=>{let L=parseFloat(h),E=o[g++]??L;return String(+(L+(E-L)*n).toFixed(4))})}function Ae(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...o}=r,g=n?{...Oe[n],...o}:o,h=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:L="path, polyline, line, polygon, rect, circle",speed:E=1,fade:k=false,easing:p="linear",trigger:S={},stagger:z=0,direction:d="forward",once:Y=false,debug:Ue=false,axis:R="y",scrollContainer:ke,autoReverse:me=false,delay:ce=0,strokeColor:K,strokeWidth:Q,fillOpacity:Z,waypoints:ee,velocityScale:pe=false,threshold:Fe=0,rootMargin:Ne="0px",repeat:te=0,repeatDelay:$e=0,morphTo:H,clip:Me,autoplay:Ye=false,duration:Ke=1e3,native:Qe=true,onProgress:ue,onStart:de,onComplete:ae}=g,_=Me===true?"left":typeof Me=="string"?Me:false,re=typeof p=="function"?p:Se[p]??Se.linear,Re=Le(S.start??"top bottom"),He=Le(S.end??"bottom top"),I=typeof ke=="string"?document.querySelector(ke):ke??null,q=Array.isArray(K)?K[0]:null,$=Array.isArray(K)?K[1]:typeof K=="string"?K:null,O=Array.isArray(Q)?Q[0]:null,M=Array.isArray(Q)?Q[1]:typeof Q=="number"?Q:null,C=Array.isArray(Z)?Z[0]:null,T=Array.isArray(Z)?Z[1]:typeof Z=="number"?Z:null;function ne(t){let s=t*100;switch(_){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 x=_?[]:Array.from(e.querySelectorAll(L)),w=[],W=[],j=0,X=0,A=false,N=false,v=0,ye=false,V=-1,ge=-1,D=false,se=0,B=0,J,Te=null,U=new Set,he=-1,qe=performance.now();function fe(){return I?R==="x"?I.scrollLeft:I.scrollTop:R==="x"?window.scrollX:window.scrollY}function We(){return I?R==="x"?I.clientWidth:I.clientHeight:R==="x"?window.innerWidth:window.innerHeight}function Ve(){let t=e.getBoundingClientRect(),s,l,y;if(I){let P=I.getBoundingClientRect();s=R==="x"?t.left-P.left+I.scrollLeft:t.top-P.top+I.scrollTop,l=R==="x"?t.width:t.height,y=fe();}else s=R==="x"?t.left:t.top,l=R==="x"?t.width:t.height,y=fe();let F=Ie({top:s,height:l},y,We(),Re,He);j=F.tStart,X=F.tEnd,Ue&&process.env.NODE_ENV!=="production"&&(Te?.remove(),Te=at(j,X,R));}function Ze(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),_){let l=s==="reverse"?1-t:t;e.style.clipPath=ne(l);return}x.forEach((l,y)=>{l.style.strokeDashoffset=s==="reverse"?`${w[y]*t}`:`${w[y]*(1-t)}`,k&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),q&&$?l.style.stroke=xe(q,$,t):$&&(l.style.stroke=$),O!==null&&M!==null?l.style.strokeWidth=`${O+(M-O)*t}`:M!==null&&(l.style.strokeWidth=`${M}`),C!==null&&T!==null?l.style.fillOpacity=`${C+(T-C)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),H&&l.tagName.toLowerCase()==="path"&&W[y]&&l.setAttribute("d",Ce(W[y],H,t));});}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),_){e.style.clipPath=ne(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=d==="reverse"?"0":`${w[s]}`,k?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",q&&(t.style.stroke=q),O!==null&&(t.style.strokeWidth=`${O}`),C!==null&&(t.style.fillOpacity=`${C}`),H&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{it(t);let s=Ee(t);w.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),h?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=d==="reverse"?`${s}`:"0",k&&(t.style.opacity="1"),$&&(t.style.stroke=$),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=d==="reverse"?"0":`${s}`,k?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",q&&(t.style.stroke=q),O!==null&&(t.style.strokeWidth=`${O}`),C!==null&&(t.style.fillOpacity=`${C}`));}),_){if(h)return e.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(h)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function et(){return !(Qe===false||!ot()||!x.length||typeof p!="string"||!(p in Je)||_||R!=="y"||I||E!==1||z!==0||Y||me||pe!==false||H||ee||te||ce>0||ue||de||ae||K!=null||Q!=null||Z!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function tt(){let t=`svg-scroll-draw-${++st}`,s=d==="reverse"?"0":"var(--ssd-len)",l=d==="reverse"?"var(--ssd-len)":"0",y=`stroke-dashoffset:${s};`,F=`stroke-dashoffset:${l};`;k&&(y+=`opacity:${d==="reverse"?1:0};`,F+=`opacity:${d==="reverse"?0:1};`);let P=document.createElement("style");P.setAttribute("data-svg-scroll-draw",""),P.textContent=`@keyframes ${t}{from{${y}}to{${F}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Je[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(P);function a(i,u){i.style.setProperty("--ssd-len",String(w[u])),i.style.strokeDasharray=`${w[u]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let f=false,b=-1;function c(){if(b>=0)return b;let i=e.getBoundingClientRect(),{tStart:u,tEnd:m}=Ie({top:i.top,height:i.height},fe(),We(),Re,He);return re(ie(fe(),u,m,E))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),P.remove();},replay(){f=false,b=-1,x.forEach(a);},pause(){f=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){f&&(f=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let u=Math.min(1,Math.max(0,i));b=u,f=true,x.forEach((m,oe)=>{m.classList.remove(t),m.style.strokeDashoffset=d==="reverse"?`${w[oe]*u}`:`${w[oe]*(1-u)}`,k&&(m.style.opacity=d==="reverse"?`${1-u}`:`${u}`);});},getProgress(){return c()}}}if(et())return tt();function rt(){let t=Math.max(1,Ke),s=0,l=0;function y(c){let i=true;if(_){let u=Math.min(1,Math.max(0,c/t)),m=re(u);se=m,e.style.setProperty("--scroll-draw-progress",String(m)),e.style.clipPath=ne(d==="reverse"?1-m:m),ue?.(m),u<1&&(i=false);}else x.forEach((u,m)=>{let oe=m*z*t,le=Math.min(1,Math.max(0,(c-oe)/t)),G=re(le);u.style.strokeDashoffset=d==="reverse"?`${w[m]*G}`:`${w[m]*(1-G)}`,k&&(u.style.opacity=d==="reverse"?`${1-G}`:`${G}`),q&&$?u.style.stroke=xe(q,$,G):$&&(u.style.stroke=$),O!==null&&M!==null?u.style.strokeWidth=`${O+(M-O)*G}`:M!==null&&(u.style.strokeWidth=`${M}`),C!==null&&T!==null?u.style.fillOpacity=`${C+(T-C)*G}`:T!==null&&(u.style.fillOpacity=`${T}`),H&&u.tagName.toLowerCase()==="path"&&W[m]&&u.setAttribute("d",Ce(W[m],H,G)),m===0&&(ue?.(G),e.style.setProperty("--scroll-draw-progress",String(G))),le<1&&(i=false);});if(ee){let u=Math.min(1,Math.max(0,c/t)),m=re(u);for(let oe in ee){let le=parseFloat(oe);m>=le&&!U.has(le)&&(U.add(le),ee[oe]?.());}}return i}function F(c){if(D)return;let i=c-s;N||(N=true,de?.());let u=y(i);if(u&&!A){A=true,y(t*(1+Math.max(0,x.length-1)*z)),ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,J=setTimeout(()=>{s=performance.now(),N=false,A=false,U.clear(),be(),v=requestAnimationFrame(F);},$e));return}u||(v=requestAnimationFrame(F));}function P(){cancelAnimationFrame(v),clearTimeout(J),s=performance.now(),l=0,D=false,N=false,A=false,B=0,U.clear(),be(),v=requestAnimationFrame(F);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(Y&&A)?P():!i.isIntersecting&&!Y&&!A&&(cancelAnimationFrame(v),clearTimeout(J),s=null);});},{root:I??null,threshold:Fe,rootMargin:Ne}),f;function b(){clearTimeout(f),f=setTimeout(()=>{x.forEach((c,i)=>{w[i]=Ee(c),c.style.strokeDasharray=`${w[i]}`;});},150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),ce>0?setTimeout(()=>a.observe(e),ce):a.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(J),a.disconnect(),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(f);},replay(){B=0,P();},pause(){D||(D=true,l=performance.now()-s,cancelAnimationFrame(v));},resume(){D&&(D=false,s=performance.now()-l,v=requestAnimationFrame(F));},seek(c){let i=Math.min(1,Math.max(0,c));se=i,D=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(v),y(l);},getProgress(){return se}}}if(Ye)return rt();Ve();function we(){if(!ye||D)return;let t=performance.now(),s=fe(),l=E;if(pe!==false){let a=t-qe,f=a>0?Math.abs(s-(he<0?s:he))/a:0;l=E*Math.max(.2,1+f*(typeof pe=="number"?pe:1)*.04);}he=s,qe=t;let y=me?ge===-1||s>=ge?"forward":"reverse":d;ge=s;let F=X-j,P=true;if(_){let a=re(ie(s,j,X,l));Y&&!me&&(V=Math.max(V,a),a=V),se=a,e.style.setProperty("--scroll-draw-progress",String(a));let f=y==="reverse"?1-a:a;e.style.clipPath=ne(f),ue?.(a),!N&&ie(s,j,X,l)>0&&(N=true,de?.()),a>=1&&!A?(A=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,J=setTimeout(()=>{V=-1,N=false,A=false,e.style.clipPath=ne(0);},$e))):a<1&&!Y&&(A=false),v=requestAnimationFrame(we);return}if(x.forEach((a,f)=>{let b=f*z*F,c=re(ie(s,j+b,X+b,l));Y&&!me&&(V=Math.max(V,c),c=V),se=c,a.style.strokeDashoffset=y==="reverse"?`${w[f]*c}`:`${w[f]*(1-c)}`,k&&(a.style.opacity=y==="reverse"?`${1-c}`:`${c}`),q&&$?a.style.stroke=xe(q,$,c):$&&(a.style.stroke=$),O!==null&&M!==null?a.style.strokeWidth=`${O+(M-O)*c}`:M!==null&&(a.style.strokeWidth=`${M}`),C!==null&&T!==null?a.style.fillOpacity=`${C+(T-C)*c}`:T!==null&&(a.style.fillOpacity=`${T}`),H&&a.tagName.toLowerCase()==="path"&&W[f]&&a.setAttribute("d",Ce(W[f],H,c)),f===0&&(ue?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(P=false);}),ee){let a=re(ie(s,j,X,l));for(let f in ee){let b=parseFloat(f);a>=b&&!U.has(b)&&(U.add(b),ee[f]?.());}}!N&&ie(s,j,X,l)>0&&(N=true,de?.()),P&&!A?(A=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,J=setTimeout(()=>{V=-1,N=false,A=false,U.clear(),be();},$e))):!P&&!Y&&(A=false),v=requestAnimationFrame(we);}let De=new IntersectionObserver(t=>{t.forEach(s=>{ye=s.isIntersecting,ye&&!D?v=requestAnimationFrame(we):cancelAnimationFrame(v);});},{root:I??null,threshold:Fe,rootMargin:Ne}),Pe;function ve(){clearTimeout(Pe),Pe=setTimeout(()=>{x.forEach((t,s)=>{w[s]=Ee(t),t.style.strokeDasharray=`${w[s]}`;}),Ve();},150);}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),ce>0?setTimeout(()=>De.observe(e),ce):De.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(J),De.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Pe),Te?.remove();},replay(){V=-1,ge=-1,he=-1,N=false,A=false,B=0,D=false,U.clear(),clearTimeout(J),be();},pause(){D=true,cancelAnimationFrame(v);},resume(){D&&(D=false,ye&&(v=requestAnimationFrame(we)));},seek(t){let s=Math.min(1,Math.max(0,t));se=s,V=s,D=true,cancelAnimationFrame(v),Ze(s,d);},getProgress(){return se}}}function lt(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?Ae(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function At(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 Ae(r,n)})}exports.initScrollDraw=At;exports.scrollDraw=lt;
@@ -1,9 +1,20 @@
1
1
  type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
+ type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
2
3
  interface TriggerConfig {
3
4
  start?: string;
4
5
  end?: string;
5
6
  }
6
7
  interface ScrollDrawOptions {
8
+ /**
9
+ * Apply a named preset as the base configuration. User-supplied options
10
+ * always override the preset. Available presets:
11
+ * - `'sketch'` — staggered ease-in draw, pencil feel
12
+ * - `'reveal'` — fade + ease-out, draws once on viewport entry
13
+ * - `'typewriter'` — fast linear draw with stagger
14
+ * - `'cinematic'` — slow ease-in-out with fade, dramatic entrance
15
+ * - `'spring'` — spring easing, bouncy organic feel
16
+ */
17
+ preset?: PresetName;
7
18
  selector?: string;
8
19
  speed?: number;
9
20
  fade?: boolean;
@@ -1,9 +1,20 @@
1
1
  type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
+ type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
2
3
  interface TriggerConfig {
3
4
  start?: string;
4
5
  end?: string;
5
6
  }
6
7
  interface ScrollDrawOptions {
8
+ /**
9
+ * Apply a named preset as the base configuration. User-supplied options
10
+ * always override the preset. Available presets:
11
+ * - `'sketch'` — staggered ease-in draw, pencil feel
12
+ * - `'reveal'` — fade + ease-out, draws once on viewport entry
13
+ * - `'typewriter'` — fast linear draw with stagger
14
+ * - `'cinematic'` — slow ease-in-out with fade, dramatic entrance
15
+ * - `'spring'` — spring easing, bouncy organic feel
16
+ */
17
+ preset?: PresetName;
7
18
  selector?: string;
8
19
  speed?: number;
9
20
  fade?: boolean;
@@ -1,3 +1,3 @@
1
- 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=`
2
- <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>
3
- <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};
1
+ function _e({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),g=Math.sqrt(o),h=0,L=[];for(let p=0;p<n;p++){let S=Math.pow(g,p);L.push(S),h+=S;}let E=[0],k=0;for(let p=0;p<n;p++)k+=L[p]/h,E.push(k);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let S=0;S<n;S++)if(p<=E[S+1]){let z=(p-E[S])/(E[S+1]-E[S]);if(S===0)return z*(2-z);let d=1-Math.pow(o,S);return d+(1-d)*(2*z-1)*(2*z-1)}return 1}}function je({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),g=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return h=>h<=0?0:h>=1?1:n*Math.pow(2,-10*h)*Math.sin((h-g)*(2*Math.PI)/o)+1}var Se={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:_e(),elastic:je()};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 Ge(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 ze(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 nt(e,r,n){return Math.min(n,Math.max(r,e))}function ie(e,r,n,o){return n===r?0:nt((e-r)/(n-r)*o,0,1)}function Ie(e,r,n,o,g){let h=Ge(e.top,e.height,r,o.element)-ze(o.viewport,n),L=Ge(e.top,e.height,r,g.element)-ze(g.viewport,n);return {tStart:h,tEnd:L}}function Be(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,n){let o=Be(e),g=Be(r);return !o||!g?e:`rgb(${Math.round(o[0]+(g[0]-o[0])*n)},${Math.round(o[1]+(g[1]-o[1])*n)},${Math.round(o[2]+(g[2]-o[2])*n)})`}var Oe={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};function Xe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Je={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},st=0;function ot(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function it(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Xe("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Xe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function at(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 g(){let h=n==="x"?window.scrollX:window.scrollY,L=e-h,E=r-h,k=n==="x";o.innerHTML=`
2
+ <div style="position:absolute;${k?`left:${L}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${L}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${k?`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(o),window.addEventListener("scroll",g,{passive:true}),g(),o}function Ce(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),g=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,h=>{let L=parseFloat(h),E=o[g++]??L;return String(+(L+(E-L)*n).toFixed(4))})}function Ae(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...o}=r,g=n?{...Oe[n],...o}:o,h=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:L="path, polyline, line, polygon, rect, circle",speed:E=1,fade:k=false,easing:p="linear",trigger:S={},stagger:z=0,direction:d="forward",once:Y=false,debug:Ue=false,axis:R="y",scrollContainer:ke,autoReverse:me=false,delay:ce=0,strokeColor:K,strokeWidth:Q,fillOpacity:Z,waypoints:ee,velocityScale:pe=false,threshold:Fe=0,rootMargin:Ne="0px",repeat:te=0,repeatDelay:$e=0,morphTo:H,clip:Me,autoplay:Ye=false,duration:Ke=1e3,native:Qe=true,onProgress:ue,onStart:de,onComplete:ae}=g,_=Me===true?"left":typeof Me=="string"?Me:false,re=typeof p=="function"?p:Se[p]??Se.linear,Re=Le(S.start??"top bottom"),He=Le(S.end??"bottom top"),I=typeof ke=="string"?document.querySelector(ke):ke??null,q=Array.isArray(K)?K[0]:null,$=Array.isArray(K)?K[1]:typeof K=="string"?K:null,O=Array.isArray(Q)?Q[0]:null,M=Array.isArray(Q)?Q[1]:typeof Q=="number"?Q:null,C=Array.isArray(Z)?Z[0]:null,T=Array.isArray(Z)?Z[1]:typeof Z=="number"?Z:null;function ne(t){let s=t*100;switch(_){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 x=_?[]:Array.from(e.querySelectorAll(L)),w=[],W=[],j=0,X=0,A=false,N=false,v=0,ye=false,V=-1,ge=-1,D=false,se=0,B=0,J,Te=null,U=new Set,he=-1,qe=performance.now();function fe(){return I?R==="x"?I.scrollLeft:I.scrollTop:R==="x"?window.scrollX:window.scrollY}function We(){return I?R==="x"?I.clientWidth:I.clientHeight:R==="x"?window.innerWidth:window.innerHeight}function Ve(){let t=e.getBoundingClientRect(),s,l,y;if(I){let P=I.getBoundingClientRect();s=R==="x"?t.left-P.left+I.scrollLeft:t.top-P.top+I.scrollTop,l=R==="x"?t.width:t.height,y=fe();}else s=R==="x"?t.left:t.top,l=R==="x"?t.width:t.height,y=fe();let F=Ie({top:s,height:l},y,We(),Re,He);j=F.tStart,X=F.tEnd,Ue&&process.env.NODE_ENV!=="production"&&(Te?.remove(),Te=at(j,X,R));}function Ze(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),_){let l=s==="reverse"?1-t:t;e.style.clipPath=ne(l);return}x.forEach((l,y)=>{l.style.strokeDashoffset=s==="reverse"?`${w[y]*t}`:`${w[y]*(1-t)}`,k&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),q&&$?l.style.stroke=xe(q,$,t):$&&(l.style.stroke=$),O!==null&&M!==null?l.style.strokeWidth=`${O+(M-O)*t}`:M!==null&&(l.style.strokeWidth=`${M}`),C!==null&&T!==null?l.style.fillOpacity=`${C+(T-C)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),H&&l.tagName.toLowerCase()==="path"&&W[y]&&l.setAttribute("d",Ce(W[y],H,t));});}function be(){if(e.style.setProperty("--scroll-draw-progress","0"),_){e.style.clipPath=ne(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=d==="reverse"?"0":`${w[s]}`,k?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",q&&(t.style.stroke=q),O!==null&&(t.style.strokeWidth=`${O}`),C!==null&&(t.style.fillOpacity=`${C}`),H&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{it(t);let s=Ee(t);w.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),h?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=d==="reverse"?`${s}`:"0",k&&(t.style.opacity="1"),$&&(t.style.stroke=$),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=d==="reverse"?"0":`${s}`,k?t.style.opacity=d==="reverse"?"1":"0":t.style.opacity="",q&&(t.style.stroke=q),O!==null&&(t.style.strokeWidth=`${O}`),C!==null&&(t.style.fillOpacity=`${C}`));}),_){if(h)return e.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(h)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function et(){return !(Qe===false||!ot()||!x.length||typeof p!="string"||!(p in Je)||_||R!=="y"||I||E!==1||z!==0||Y||me||pe!==false||H||ee||te||ce>0||ue||de||ae||K!=null||Q!=null||Z!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function tt(){let t=`svg-scroll-draw-${++st}`,s=d==="reverse"?"0":"var(--ssd-len)",l=d==="reverse"?"var(--ssd-len)":"0",y=`stroke-dashoffset:${s};`,F=`stroke-dashoffset:${l};`;k&&(y+=`opacity:${d==="reverse"?1:0};`,F+=`opacity:${d==="reverse"?0:1};`);let P=document.createElement("style");P.setAttribute("data-svg-scroll-draw",""),P.textContent=`@keyframes ${t}{from{${y}}to{${F}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Je[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(P);function a(i,u){i.style.setProperty("--ssd-len",String(w[u])),i.style.strokeDasharray=`${w[u]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let f=false,b=-1;function c(){if(b>=0)return b;let i=e.getBoundingClientRect(),{tStart:u,tEnd:m}=Ie({top:i.top,height:i.height},fe(),We(),Re,He);return re(ie(fe(),u,m,E))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),P.remove();},replay(){f=false,b=-1,x.forEach(a);},pause(){f=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){f&&(f=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let u=Math.min(1,Math.max(0,i));b=u,f=true,x.forEach((m,oe)=>{m.classList.remove(t),m.style.strokeDashoffset=d==="reverse"?`${w[oe]*u}`:`${w[oe]*(1-u)}`,k&&(m.style.opacity=d==="reverse"?`${1-u}`:`${u}`);});},getProgress(){return c()}}}if(et())return tt();function rt(){let t=Math.max(1,Ke),s=0,l=0;function y(c){let i=true;if(_){let u=Math.min(1,Math.max(0,c/t)),m=re(u);se=m,e.style.setProperty("--scroll-draw-progress",String(m)),e.style.clipPath=ne(d==="reverse"?1-m:m),ue?.(m),u<1&&(i=false);}else x.forEach((u,m)=>{let oe=m*z*t,le=Math.min(1,Math.max(0,(c-oe)/t)),G=re(le);u.style.strokeDashoffset=d==="reverse"?`${w[m]*G}`:`${w[m]*(1-G)}`,k&&(u.style.opacity=d==="reverse"?`${1-G}`:`${G}`),q&&$?u.style.stroke=xe(q,$,G):$&&(u.style.stroke=$),O!==null&&M!==null?u.style.strokeWidth=`${O+(M-O)*G}`:M!==null&&(u.style.strokeWidth=`${M}`),C!==null&&T!==null?u.style.fillOpacity=`${C+(T-C)*G}`:T!==null&&(u.style.fillOpacity=`${T}`),H&&u.tagName.toLowerCase()==="path"&&W[m]&&u.setAttribute("d",Ce(W[m],H,G)),m===0&&(ue?.(G),e.style.setProperty("--scroll-draw-progress",String(G))),le<1&&(i=false);});if(ee){let u=Math.min(1,Math.max(0,c/t)),m=re(u);for(let oe in ee){let le=parseFloat(oe);m>=le&&!U.has(le)&&(U.add(le),ee[oe]?.());}}return i}function F(c){if(D)return;let i=c-s;N||(N=true,de?.());let u=y(i);if(u&&!A){A=true,y(t*(1+Math.max(0,x.length-1)*z)),ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,J=setTimeout(()=>{s=performance.now(),N=false,A=false,U.clear(),be(),v=requestAnimationFrame(F);},$e));return}u||(v=requestAnimationFrame(F));}function P(){cancelAnimationFrame(v),clearTimeout(J),s=performance.now(),l=0,D=false,N=false,A=false,B=0,U.clear(),be(),v=requestAnimationFrame(F);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(Y&&A)?P():!i.isIntersecting&&!Y&&!A&&(cancelAnimationFrame(v),clearTimeout(J),s=null);});},{root:I??null,threshold:Fe,rootMargin:Ne}),f;function b(){clearTimeout(f),f=setTimeout(()=>{x.forEach((c,i)=>{w[i]=Ee(c),c.style.strokeDasharray=`${w[i]}`;});},150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),ce>0?setTimeout(()=>a.observe(e),ce):a.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(J),a.disconnect(),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(f);},replay(){B=0,P();},pause(){D||(D=true,l=performance.now()-s,cancelAnimationFrame(v));},resume(){D&&(D=false,s=performance.now()-l,v=requestAnimationFrame(F));},seek(c){let i=Math.min(1,Math.max(0,c));se=i,D=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(v),y(l);},getProgress(){return se}}}if(Ye)return rt();Ve();function we(){if(!ye||D)return;let t=performance.now(),s=fe(),l=E;if(pe!==false){let a=t-qe,f=a>0?Math.abs(s-(he<0?s:he))/a:0;l=E*Math.max(.2,1+f*(typeof pe=="number"?pe:1)*.04);}he=s,qe=t;let y=me?ge===-1||s>=ge?"forward":"reverse":d;ge=s;let F=X-j,P=true;if(_){let a=re(ie(s,j,X,l));Y&&!me&&(V=Math.max(V,a),a=V),se=a,e.style.setProperty("--scroll-draw-progress",String(a));let f=y==="reverse"?1-a:a;e.style.clipPath=ne(f),ue?.(a),!N&&ie(s,j,X,l)>0&&(N=true,de?.()),a>=1&&!A?(A=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,J=setTimeout(()=>{V=-1,N=false,A=false,e.style.clipPath=ne(0);},$e))):a<1&&!Y&&(A=false),v=requestAnimationFrame(we);return}if(x.forEach((a,f)=>{let b=f*z*F,c=re(ie(s,j+b,X+b,l));Y&&!me&&(V=Math.max(V,c),c=V),se=c,a.style.strokeDashoffset=y==="reverse"?`${w[f]*c}`:`${w[f]*(1-c)}`,k&&(a.style.opacity=y==="reverse"?`${1-c}`:`${c}`),q&&$?a.style.stroke=xe(q,$,c):$&&(a.style.stroke=$),O!==null&&M!==null?a.style.strokeWidth=`${O+(M-O)*c}`:M!==null&&(a.style.strokeWidth=`${M}`),C!==null&&T!==null?a.style.fillOpacity=`${C+(T-C)*c}`:T!==null&&(a.style.fillOpacity=`${T}`),H&&a.tagName.toLowerCase()==="path"&&W[f]&&a.setAttribute("d",Ce(W[f],H,c)),f===0&&(ue?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(P=false);}),ee){let a=re(ie(s,j,X,l));for(let f in ee){let b=parseFloat(f);a>=b&&!U.has(b)&&(U.add(b),ee[f]?.());}}!N&&ie(s,j,X,l)>0&&(N=true,de?.()),P&&!A?(A=true,ae?.(),B<(te==="infinite"?1/0:te??0)&&(B++,J=setTimeout(()=>{V=-1,N=false,A=false,U.clear(),be();},$e))):!P&&!Y&&(A=false),v=requestAnimationFrame(we);}let De=new IntersectionObserver(t=>{t.forEach(s=>{ye=s.isIntersecting,ye&&!D?v=requestAnimationFrame(we):cancelAnimationFrame(v);});},{root:I??null,threshold:Fe,rootMargin:Ne}),Pe;function ve(){clearTimeout(Pe),Pe=setTimeout(()=>{x.forEach((t,s)=>{w[s]=Ee(t),t.style.strokeDasharray=`${w[s]}`;}),Ve();},150);}return window.addEventListener("resize",ve),window.addEventListener("orientationchange",ve),ce>0?setTimeout(()=>De.observe(e),ce):De.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(J),De.disconnect(),window.removeEventListener("resize",ve),window.removeEventListener("orientationchange",ve),clearTimeout(Pe),Te?.remove();},replay(){V=-1,ge=-1,he=-1,N=false,A=false,B=0,D=false,U.clear(),clearTimeout(J),be();},pause(){D=true,cancelAnimationFrame(v);},resume(){D&&(D=false,ye&&(v=requestAnimationFrame(we)));},seek(t){let s=Math.min(1,Math.max(0,t));se=s,V=s,D=true,cancelAnimationFrame(v),Ze(s,d);},getProgress(){return se}}}function lt(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?Ae(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function At(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 Ae(r,n)})}export{At as initScrollDraw,lt as scrollDraw};
@@ -1,3 +1,3 @@
1
- "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=`
2
- <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>
3
- <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);})();
1
+ "use strict";var SvgScrollDraw=(()=>{var Fe=Object.defineProperty;var ut=Object.getOwnPropertyDescriptor;var ft=Object.getOwnPropertyNames;var mt=Object.prototype.hasOwnProperty;var pt=(e,r)=>{for(var n in r)Fe(e,n,{get:r[n],enumerable:!0})},dt=(e,r,n,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of ft(r))!mt.call(e,c)&&c!==n&&Fe(e,c,{get:()=>r[c],enumerable:!(s=ut(r,c))||s.enumerable});return e};var yt=e=>dt(Fe({},"__esModule",{value:!0}),e);var kt={};pt(kt,{Cinematic:()=>De,PRESETS:()=>$e,createBounce:()=>Ne,createElastic:()=>Re,createSpring:()=>Ze,scrollDraw:()=>At});function Ze({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function Ne({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),s=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(s),p=0,x=[];for(let d=0;d<n;d++){let A=Math.pow(c,d);x.push(A),p+=A}let b=[0],$=0;for(let d=0;d<n;d++)$+=x[d]/p,b.push($);return d=>{if(d<=0)return 0;if(d>=1)return 1;for(let A=0;A<n;A++)if(d<=b[A+1]){let W=(d-b[A])/(b[A+1]-b[A]);if(A===0)return W*(2-W);let w=1-Math.pow(s,A);return w+(1-w)*(2*W-1)*(2*W-1)}return 1}}function Re({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),s=Math.max(.1,r),c=n<=1?s/4:s/(2*Math.PI)*Math.asin(1/n);return p=>p<=0?0:p>=1?1:n*Math.pow(2,-10*p)*Math.sin((p-c)*(2*Math.PI)/s)+1}var re={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:Ne(),elastic:Re()};function He(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 Ke(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 Ae(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 gt(e,r,n){return Math.min(n,Math.max(r,e))}function ue(e,r,n,s){return n===r?0:gt((e-r)/(n-r)*s,0,1)}function qe(e,r,n,s,c){let p=Je(e.top,e.height,r,s.element)-Ke(s.viewport,n),x=Je(e.top,e.height,r,c.element)-Ke(c.viewport,n);return{tStart:p,tEnd:x}}function Qe(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 ke(e,r,n){let s=Qe(e),c=Qe(r);return!s||!c?e:`rgb(${Math.round(s[0]+(c[0]-s[0])*n)},${Math.round(s[1]+(c[1]-s[1])*n)},${Math.round(s[2]+(c[2]-s[2])*n)})`}var $e={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:!1},reveal:{easing:"ease-out",fade:!0,speed:1.2,once:!0},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:!0,speed:.75},spring:{easing:"spring",speed:1.1}};function et(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r)}var tt={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ht=0;function bt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function wt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?et("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&et("Element has a fill \u2014 it may obscure the stroke animation.",e)}function vt(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 c(){let p=n==="x"?window.scrollX:window.scrollY,x=e-p,b=r-p,$=n==="x";s.innerHTML=`
2
+ <div style="position:absolute;${$?`left:${x}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${x}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${$?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}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",c,{passive:!0}),c(),s}function We(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let x=parseFloat(p),b=s[c++]??x;return String(+(x+(b-x)*n).toFixed(4))})}function Me(e,r={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...s}=r,c=n?{...$e[n],...s}:s,p=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:x="path, polyline, line, polygon, rect, circle",speed:b=1,fade:$=!1,easing:d="linear",trigger:A={},stagger:W=0,direction:w="forward",once:B=!1,debug:ye=!1,axis:y="y",scrollContainer:v,autoReverse:u=!1,delay:E=0,strokeColor:g,strokeWidth:G,fillOpacity:ne,waypoints:se,velocityScale:ge=!1,threshold:ze=0,rootMargin:Be="0px",repeat:oe=0,repeatDelay:Pe=0,morphTo:_,clip:Le,autoplay:nt=!1,duration:st=1e3,native:ot=!0,onProgress:pe,onStart:he,onComplete:fe}=c,K=Le===!0?"left":typeof Le=="string"?Le:!1,ie=typeof d=="function"?d:re[d]??re.linear,_e=He(A.start??"top bottom"),je=He(A.end??"bottom top"),R=typeof v=="string"?document.querySelector(v):v??null,j=Array.isArray(g)?g[0]:null,I=Array.isArray(g)?g[1]:typeof g=="string"?g:null,H=Array.isArray(G)?G[0]:null,C=Array.isArray(G)?G[1]:typeof G=="number"?G:null,q=Array.isArray(ne)?ne[0]:null,O=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null;function ae(t){let o=t*100;switch(K){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 P=K?[]:Array.from(e.querySelectorAll(x)),T=[],X=[],Q=0,Z=0,L=!1,z=!1,D=0,be=!1,U=-1,we=-1,F=!1,le=0,J=0,ee,Ie=null,te=new Set,ve=-1,Xe=performance.now();function de(){return R?y==="x"?R.scrollLeft:R.scrollTop:y==="x"?window.scrollX:window.scrollY}function Ue(){return R?y==="x"?R.clientWidth:R.clientHeight:y==="x"?window.innerWidth:window.innerHeight}function Ye(){let t=e.getBoundingClientRect(),o,l,k;if(R){let N=R.getBoundingClientRect();o=y==="x"?t.left-N.left+R.scrollLeft:t.top-N.top+R.scrollTop,l=y==="x"?t.width:t.height,k=de()}else o=y==="x"?t.left:t.top,l=y==="x"?t.width:t.height,k=de();let V=qe({top:o,height:l},k,Ue(),_e,je);Q=V.tStart,Z=V.tEnd,ye&&process.env.NODE_ENV!=="production"&&(Ie?.remove(),Ie=vt(Q,Z,y))}function it(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),K){let l=o==="reverse"?1-t:t;e.style.clipPath=ae(l);return}P.forEach((l,k)=>{l.style.strokeDashoffset=o==="reverse"?`${T[k]*t}`:`${T[k]*(1-t)}`,$&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),j&&I?l.style.stroke=ke(j,I,t):I&&(l.style.stroke=I),H!==null&&C!==null?l.style.strokeWidth=`${H+(C-H)*t}`:C!==null&&(l.style.strokeWidth=`${C}`),q!==null&&O!==null?l.style.fillOpacity=`${q+(O-q)*t}`:O!==null&&(l.style.fillOpacity=`${O}`),_&&l.tagName.toLowerCase()==="path"&&X[k]&&l.setAttribute("d",We(X[k],_,t))})}function Se(){if(e.style.setProperty("--scroll-draw-progress","0"),K){e.style.clipPath=ae(0);return}P.forEach((t,o)=>{t.style.strokeDasharray=`${T[o]}`,t.style.strokeDashoffset=w==="reverse"?"0":`${T[o]}`,$?t.style.opacity=w==="reverse"?"1":"0":t.style.opacity="",j&&(t.style.stroke=j),H!==null&&(t.style.strokeWidth=`${H}`),q!==null&&(t.style.fillOpacity=`${q}`),_&&t.tagName.toLowerCase()==="path"&&X[o]&&t.setAttribute("d",X[o])})}if(P.forEach(t=>{wt(t);let o=Ae(t);T.push(o),t.tagName.toLowerCase()==="path"?X.push(t.getAttribute("d")??""):X.push(""),p?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=w==="reverse"?`${o}`:"0",$&&(t.style.opacity="1"),I&&(t.style.stroke=I),C!==null&&(t.style.strokeWidth=`${C}`),O!==null&&(t.style.fillOpacity=`${O}`),_&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",_)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=w==="reverse"?"0":`${o}`,$?t.style.opacity=w==="reverse"?"1":"0":t.style.opacity="",j&&(t.style.stroke=j),H!==null&&(t.style.strokeWidth=`${H}`),q!==null&&(t.style.fillOpacity=`${q}`))}),K){if(p)return e.style.clipPath=ae(1),fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ae(0)}else if(p)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function at(){return!(ot===!1||!bt()||!P.length||typeof d!="string"||!(d in tt)||K||y!=="y"||R||b!==1||W!==0||B||u||ge!==!1||_||se||oe||E>0||pe||he||fe||g!=null||G!=null||ne!=null||(A.start??"top bottom").trim()!=="top bottom"||(A.end??"bottom top").trim()!=="bottom top")}function lt(){let t=`svg-scroll-draw-${++ht}`,o=w==="reverse"?"0":"var(--ssd-len)",l=w==="reverse"?"var(--ssd-len)":"0",k=`stroke-dashoffset:${o};`,V=`stroke-dashoffset:${l};`;$&&(k+=`opacity:${w==="reverse"?1:0};`,V+=`opacity:${w==="reverse"?0:1};`);let N=document.createElement("style");N.setAttribute("data-svg-scroll-draw",""),N.textContent=`@keyframes ${t}{from{${k}}to{${V}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${tt[d]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(N);function a(i,m){i.style.setProperty("--ssd-len",String(T[m])),i.style.strokeDasharray=`${T[m]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t)}P.forEach(a);let h=!1,M=-1;function f(){if(M>=0)return M;let i=e.getBoundingClientRect(),{tStart:m,tEnd:S}=qe({top:i.top,height:i.height},de(),Ue(),_e,je);return ie(ue(de(),m,S,b))}return{destroy(){P.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState=""}),N.remove()},replay(){h=!1,M=-1,P.forEach(a)},pause(){h=!0,P.forEach(i=>{i.style.animationPlayState="paused"})},resume(){h&&(h=!1,P.forEach(i=>{i.style.animationPlayState="running"}))},seek(i){let m=Math.min(1,Math.max(0,i));M=m,h=!0,P.forEach((S,ce)=>{S.classList.remove(t),S.style.strokeDashoffset=w==="reverse"?`${T[ce]*m}`:`${T[ce]*(1-m)}`,$&&(S.style.opacity=w==="reverse"?`${1-m}`:`${m}`)})},getProgress(){return f()}}}if(at())return lt();function ct(){let t=Math.max(1,st),o=0,l=0;function k(f){let i=!0;if(K){let m=Math.min(1,Math.max(0,f/t)),S=ie(m);le=S,e.style.setProperty("--scroll-draw-progress",String(S)),e.style.clipPath=ae(w==="reverse"?1-S:S),pe?.(S),m<1&&(i=!1)}else P.forEach((m,S)=>{let ce=S*W*t,me=Math.min(1,Math.max(0,(f-ce)/t)),Y=ie(me);m.style.strokeDashoffset=w==="reverse"?`${T[S]*Y}`:`${T[S]*(1-Y)}`,$&&(m.style.opacity=w==="reverse"?`${1-Y}`:`${Y}`),j&&I?m.style.stroke=ke(j,I,Y):I&&(m.style.stroke=I),H!==null&&C!==null?m.style.strokeWidth=`${H+(C-H)*Y}`:C!==null&&(m.style.strokeWidth=`${C}`),q!==null&&O!==null?m.style.fillOpacity=`${q+(O-q)*Y}`:O!==null&&(m.style.fillOpacity=`${O}`),_&&m.tagName.toLowerCase()==="path"&&X[S]&&m.setAttribute("d",We(X[S],_,Y)),S===0&&(pe?.(Y),e.style.setProperty("--scroll-draw-progress",String(Y))),me<1&&(i=!1)});if(se){let m=Math.min(1,Math.max(0,f/t)),S=ie(m);for(let ce in se){let me=parseFloat(ce);S>=me&&!te.has(me)&&(te.add(me),se[ce]?.())}}return i}function V(f){if(F)return;let i=f-o;z||(z=!0,he?.());let m=k(i);if(m&&!L){L=!0,k(t*(1+Math.max(0,P.length-1)*W)),fe?.(),J<(oe==="infinite"?1/0:oe??0)&&(J++,ee=setTimeout(()=>{o=performance.now(),z=!1,L=!1,te.clear(),Se(),D=requestAnimationFrame(V)},Pe));return}m||(D=requestAnimationFrame(V))}function N(){cancelAnimationFrame(D),clearTimeout(ee),o=performance.now(),l=0,F=!1,z=!1,L=!1,J=0,te.clear(),Se(),D=requestAnimationFrame(V)}let a=new IntersectionObserver(f=>{f.forEach(i=>{i.isIntersecting&&!(B&&L)?N():!i.isIntersecting&&!B&&!L&&(cancelAnimationFrame(D),clearTimeout(ee),o=null)})},{root:R??null,threshold:ze,rootMargin:Be}),h;function M(){clearTimeout(h),h=setTimeout(()=>{P.forEach((f,i)=>{T[i]=Ae(f),f.style.strokeDasharray=`${T[i]}`})},150)}return window.addEventListener("resize",M),window.addEventListener("orientationchange",M),E>0?setTimeout(()=>a.observe(e),E):a.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(ee),a.disconnect(),window.removeEventListener("resize",M),window.removeEventListener("orientationchange",M),clearTimeout(h)},replay(){J=0,N()},pause(){F||(F=!0,l=performance.now()-o,cancelAnimationFrame(D))},resume(){F&&(F=!1,o=performance.now()-l,D=requestAnimationFrame(V))},seek(f){let i=Math.min(1,Math.max(0,f));le=i,F=!0,l=i*t,o=performance.now()-l,cancelAnimationFrame(D),k(l)},getProgress(){return le}}}if(nt)return ct();Ye();function Ee(){if(!be||F)return;let t=performance.now(),o=de(),l=b;if(ge!==!1){let a=t-Xe,h=a>0?Math.abs(o-(ve<0?o:ve))/a:0;l=b*Math.max(.2,1+h*(typeof ge=="number"?ge:1)*.04)}ve=o,Xe=t;let k=u?we===-1||o>=we?"forward":"reverse":w;we=o;let V=Z-Q,N=!0;if(K){let a=ie(ue(o,Q,Z,l));B&&!u&&(U=Math.max(U,a),a=U),le=a,e.style.setProperty("--scroll-draw-progress",String(a));let h=k==="reverse"?1-a:a;e.style.clipPath=ae(h),pe?.(a),!z&&ue(o,Q,Z,l)>0&&(z=!0,he?.()),a>=1&&!L?(L=!0,fe?.(),J<(oe==="infinite"?1/0:oe??0)&&(J++,ee=setTimeout(()=>{U=-1,z=!1,L=!1,e.style.clipPath=ae(0)},Pe))):a<1&&!B&&(L=!1),D=requestAnimationFrame(Ee);return}if(P.forEach((a,h)=>{let M=h*W*V,f=ie(ue(o,Q+M,Z+M,l));B&&!u&&(U=Math.max(U,f),f=U),le=f,a.style.strokeDashoffset=k==="reverse"?`${T[h]*f}`:`${T[h]*(1-f)}`,$&&(a.style.opacity=k==="reverse"?`${1-f}`:`${f}`),j&&I?a.style.stroke=ke(j,I,f):I&&(a.style.stroke=I),H!==null&&C!==null?a.style.strokeWidth=`${H+(C-H)*f}`:C!==null&&(a.style.strokeWidth=`${C}`),q!==null&&O!==null?a.style.fillOpacity=`${q+(O-q)*f}`:O!==null&&(a.style.fillOpacity=`${O}`),_&&a.tagName.toLowerCase()==="path"&&X[h]&&a.setAttribute("d",We(X[h],_,f)),h===0&&(pe?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(N=!1)}),se){let a=ie(ue(o,Q,Z,l));for(let h in se){let M=parseFloat(h);a>=M&&!te.has(M)&&(te.add(M),se[h]?.())}}!z&&ue(o,Q,Z,l)>0&&(z=!0,he?.()),N&&!L?(L=!0,fe?.(),J<(oe==="infinite"?1/0:oe??0)&&(J++,ee=setTimeout(()=>{U=-1,z=!1,L=!1,te.clear(),Se()},Pe))):!N&&!B&&(L=!1),D=requestAnimationFrame(Ee)}let Ce=new IntersectionObserver(t=>{t.forEach(o=>{be=o.isIntersecting,be&&!F?D=requestAnimationFrame(Ee):cancelAnimationFrame(D)})},{root:R??null,threshold:ze,rootMargin:Be}),Oe;function xe(){clearTimeout(Oe),Oe=setTimeout(()=>{P.forEach((t,o)=>{T[o]=Ae(t),t.style.strokeDasharray=`${T[o]}`}),Ye()},150)}return window.addEventListener("resize",xe),window.addEventListener("orientationchange",xe),E>0?setTimeout(()=>Ce.observe(e),E):Ce.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(ee),Ce.disconnect(),window.removeEventListener("resize",xe),window.removeEventListener("orientationchange",xe),clearTimeout(Oe),Ie?.remove()},replay(){U=-1,we=-1,ve=-1,z=!1,L=!1,J=0,F=!1,te.clear(),clearTimeout(ee),Se()},pause(){F=!0,cancelAnimationFrame(D)},resume(){F&&(F=!1,be&&(D=requestAnimationFrame(Ee)))},seek(t){let o=Math.min(1,Math.max(0,t));le=o,U=o,F=!0,cancelAnimationFrame(D),it(o,w)},getProgress(){return le}}}var rt="http://www.w3.org/2000/svg",St="cinematic-photo",Ve=e=>e<0?0:e>1?1:e;function Te(e){let r=parseFloat(e);return Number.isFinite(r)?Ve(r/100):0}function Et(e){return re[e]??re.linear}var xt={destroy:()=>{},getProgress:()=>0},De=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 xt;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 c=[];for(let y of r.scenes){if(y.background){let u=document.createElement("img");u.id=St,u.src=y.background,u.alt="",u.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",s.appendChild(u)}let v=y.animations.filter(u=>u.type==="draw");if(v.length){let u=document.createElementNS(rt,"svg");u.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.canvas.height}`),u.setAttribute("preserveAspectRatio","xMidYMid meet"),u.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",s.appendChild(u);for(let E of v){let g=document.createElementNS(rt,"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 G=E.length||g.getTotalLength?.()||0;g.style.strokeDasharray=String(G),g.style.strokeDashoffset=String(G),u.appendChild(g),c.push({kind:"draw",el:g,start:Te(E.start),end:Te(E.end),ease:Et(E.easing),length:G})}}for(let u of y.animations){if(u.type!=="fade")continue;let E=s.querySelector(u.target)??document.querySelector(u.target);E&&(E.style.opacity=String(u.from),c.push({kind:"fade",el:E,start:Te(u.start),end:Te(u.end),ease:re["ease-in-out"]??re.linear,from:u.from,to:u.to}))}}let p=0,x=()=>{let y=n.offsetHeight-window.innerHeight;return y<=0?n.getBoundingClientRect().top<=0?1:0:Ve(-n.getBoundingClientRect().top/y)},b=y=>{for(let v of c){let u=v.end-v.start,E=u<=0?y>=v.end?1:0:Ve((y-v.start)/u),g=v.ease(E);v.kind==="draw"?v.el.style.strokeDashoffset=String(v.length*(1-g)):v.el.style.opacity=String(v.from+(v.to-v.from)*g)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return b(1),{destroy:()=>{},getProgress:()=>1};let $=0,d=!1,A=!1,W=()=>{p=x(),b(p),d&&($=requestAnimationFrame(W))},w=()=>{d||(d=!0,$=requestAnimationFrame(W))},B=()=>{d=!1,cancelAnimationFrame($)},ye=new IntersectionObserver(y=>{for(let v of y)A=v.isIntersecting,A?w():B()},{threshold:0});return ye.observe(s),p=x(),b(p),{destroy(){B(),ye.disconnect()},getProgress:()=>p}}};function At(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?Me(s,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}var Ge=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},s=this.getAttribute("speed"),c=this.getAttribute("easing"),p=this.getAttribute("stagger"),x=this.getAttribute("direction"),b=this.getAttribute("selector");s&&(n.speed=parseFloat(s)),c&&(n.easing=c),p&&(n.stagger=parseFloat(p)),x&&(n.direction=x),b&&(n.selector=b),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.instance=Me(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Ge);return yt(kt);})();