svg-scroll-draw 2.15.0 → 2.15.1

package/dist/web-component/index.cjs

@@ -1,3 +1,3 @@
-'use strict';function Mt({bounces:e=3,decay:r=.5}={}){let s=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(n),f=0,g=[];for(let v=0;v<s;v++){let $=Math.pow(c,v);g.push($),f+=$;}let w=[0],E=0;for(let v=0;v<s;v++)E+=g[v]/f,w.push(E);return v=>{if(v<=0)return 0;if(v>=1)return 1;for(let $=0;$<s;$++)if(v<=w[$+1]){let U=(v-w[$])/(w[$+1]-w[$]);if($===0)return U*(2-U);let h=1-Math.pow(n,$);return h+(1-h)*(2*U-1)*(2*U-1)}return 1}}function kt({amplitude:e=1,period:r=.4}={}){let s=Math.max(1,e),n=Math.max(.1,r),c=s<=1?n/4:n/(2*Math.PI)*Math.asin(1/s);return f=>f<=0?0:f>=1?1:s*Math.pow(2,-10*f)*Math.sin((f-c)*(2*Math.PI)/n)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Mt(),elastic:kt()};function ze(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:n}}function ot(e,r,s,n){switch(n){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function it(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 pe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(s+n)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Lt(e,r,s){return Math.min(s,Math.max(r,e))}function ue(e,r,s,n){return s===r?0:Lt((e-r)/(s-r)*n,0,1)}function lt(e,r,s){let n=e.getBoundingClientRect(),c=s==="x"?n.width:n.height;return r?{top:s==="x"?n.left-r.getBoundingClientRect().left+r.scrollLeft:n.top-r.getBoundingClientRect().top+r.scrollTop,height:c,scroll:0}:{top:s==="x"?n.left:n.top,height:c,scroll:s==="x"?window.scrollX:window.scrollY}}function He(e,r,s,n,c){let f=ot(e.top,e.height,r,n.element)-it(n.viewport,s),g=ot(e.top,e.height,r,c.element)-it(c.viewport,s);return {tStart:f,tEnd:g}}function at(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function De(e,r,s){let n=at(e),c=at(r);return !n||!c?e:`rgb(${Math.round(n[0]+(c[0]-n[0])*s)},${Math.round(n[1]+(c[1]-n[1])*s)},${Math.round(n[2]+(c[2]-n[2])*s)})`}var ut={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}};var Pe=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...r){Pe&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Dt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Pt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ct=33;function Ct(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Rt(e){let r=[];for(let s=0;s<ct;s++){let n=s/(ct-1);r.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${r.join(",")})`}function ft(e){switch(e){case "linear":return "linear";case "ease-in":return Dt;case "ease-out":return Pt;case "ease-in-out":return Ct()?Rt(ve["ease-in-out"]):null;default:return null}}var mt=Symbol.for("svg-scroll-draw.registry");function pt(){let e=globalThis;return e[mt]||(e[mt]=new Map)}function dt(e,r){pt().set(e,r);}function yt(e){pt().delete(e);}var It=0;function Ot(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function _t(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?de("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ft(e,r,s){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.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 f=s==="x"?window.scrollX:window.scrollY,g=e-f,w=r-f,E=s==="x";n.innerHTML=`
+'use strict';function Lt({bounces:e=3,decay:r=.5}={}){let s=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(n),f=0,g=[];for(let v=0;v<s;v++){let $=Math.pow(c,v);g.push($),f+=$;}let w=[0],E=0;for(let v=0;v<s;v++)E+=g[v]/f,w.push(E);return v=>{if(v<=0)return 0;if(v>=1)return 1;for(let $=0;$<s;$++)if(v<=w[$+1]){let U=(v-w[$])/(w[$+1]-w[$]);if($===0)return U*(2-U);let h=1-Math.pow(n,$);return h+(1-h)*(2*U-1)*(2*U-1)}return 1}}function Dt({amplitude:e=1,period:r=.4}={}){let s=Math.max(1,e),n=Math.max(.1,r),c=s<=1?n/4:n/(2*Math.PI)*Math.asin(1/s);return f=>f<=0?0:f>=1?1:s*Math.pow(2,-10*f)*Math.sin((f-c)*(2*Math.PI)/n)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Lt(),elastic:Dt()};function ze(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:n}}function ot(e,r,s,n){switch(n){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function it(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 pe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(s+n)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Pt(e,r,s){return Math.min(s,Math.max(r,e))}function ue(e,r,s,n){return s===r?0:Pt((e-r)/(s-r)*n,0,1)}function lt(e,r,s){let n=e.getBoundingClientRect(),c=s==="x"?n.width:n.height;return r?{top:s==="x"?n.left-r.getBoundingClientRect().left+r.scrollLeft:n.top-r.getBoundingClientRect().top+r.scrollTop,height:c,scroll:0}:{top:s==="x"?n.left:n.top,height:c,scroll:s==="x"?window.scrollX:window.scrollY}}function He(e,r,s,n,c){let f=ot(e.top,e.height,r,n.element)-it(n.viewport,s),g=ot(e.top,e.height,r,c.element)-it(c.viewport,s);return {tStart:f,tEnd:g}}function at(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function Pe(e,r,s){let n=at(e),c=at(r);return !n||!c?e:`rgb(${Math.round(n[0]+(c[0]-n[0])*s)},${Math.round(n[1]+(c[1]-n[1])*s)},${Math.round(n[2]+(c[2]-n[2])*s)})`}var ut={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}};var Ee=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...r){Ee&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Ct="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ot="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ct=33;function Rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function It(e){let r=[];for(let s=0;s<ct;s++){let n=s/(ct-1);r.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${r.join(",")})`}function ft(e){switch(e){case "linear":return "linear";case "ease-in":return Ct;case "ease-out":return Ot;case "ease-in-out":return Rt()?It(ve["ease-in-out"]):null;default:return null}}var mt=Symbol.for("svg-scroll-draw.registry");function pt(){let e=globalThis;return e[mt]||(e[mt]=new Map)}function dt(e,r){pt().set(e,r);}function yt(e){pt().delete(e);}var _t=0;function Ft(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function gt(e,r){let s="";try{s=getComputedStyle(e).getPropertyValue(r).trim();}catch{}return s||(e.getAttribute(r)??"").trim()}var ht=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Nt(e){if(!Ee)return;let r=gt(e,"stroke");if(!r||r==="none"){de("Element has no stroke \u2014 path will not be visible.",e);return}let s=(e.getAttribute("fill")??"").trim();s&&!ht.has(s)&&!ht.has(gt(e,"fill"))&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Vt(e,r,s){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.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 f=s==="x"?window.scrollX:window.scrollY,g=e-f,w=r-f,E=s==="x";n.innerHTML=`
       <div style="position:absolute;${E?`left:${g}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${g}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${E?`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(n),window.addEventListener("scroll",c,{passive:true}),c(),{el:n,destroy(){window.removeEventListener("scroll",c),n.remove();}}}var gt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,ht=/[MmLlHhVvCcSsQqTtAaZz]/g;function Nt(e,r,s){if(!Pe)return;let n=(e.match(ht)??[]).join("").toUpperCase(),c=(r.match(ht)??[]).join("").toUpperCase(),f=(e.match(gt)??[]).length,g=(r.match(gt)??[]).length;if(n!==c){de(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==g&&de(`morphTo: coordinate count differs (${f} \u2192 ${g}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function We(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let g=parseFloat(f),w=n[c++]??g;return String(+(g+(w-g)*s).toFixed(4))})}function bt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...n}=r,c=s?{...ut[s],...n}:n,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:g="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:U=0,direction:h="forward",once:ee=false,debug:wt=false,axis:te="y",scrollContainer:Ce,autoReverse:Ee=false,delay:ye=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ge=false,threshold:qe=0,rootMargin:Ge="0px",repeat:ie=0,repeatDelay:Re=0,morphTo:O,clip:Ie,autoplay:vt=false,duration:Et=1e3,native:St=true,onProgress:he,onStart:Se,onComplete:ce,onEnter:Be,onLeave:Ue,onEnterBack:je,onLeaveBack:Qe}=c,Y=Ie===true?"left":typeof Ie=="string"?Ie:false,ae=typeof v=="function"?v:ve[v]??ve.linear,Xe=ze($.start??"top bottom"),Ye=ze($.end??"bottom top"),z=typeof Ce=="string"?document.querySelector(Ce):Ce??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,R=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,I=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(Y){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 S=Y?[]:Array.from(e.querySelectorAll(g)),p=[],_=[],W=0,j=0,A=false,N=false,M=0,fe=false,q=-1,$e=-1,k=false,G=0,Q=0,K,Oe=null;function Ke(){Oe?.destroy(),Oe=null;}let Z=new Set,Ze=NaN,J=true,xe=-1,Je=performance.now(),me=NaN;function _e(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function et(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function tt(){let t=lt(e,z,te);return He(t,t.scroll,et(),Xe,Ye)}function rt(){(({tStart:W,tEnd:j}=tt())),wt&&Pe&&(Ke(),Oe=Ft(W,j,te));}function Fe(t,o=tt){dt(e,{type:"draw",getProgress:()=>t.getProgress(),getTrigger:o});let l=t.destroy;return t.destroy=()=>{l.call(t),yt(e);},t}function $t(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),Y){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=De(H,L,t):L&&(l.style.stroke=L),R!==null&&D!==null?l.style.strokeWidth=`${R+(D-R)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),I!==null&&P!==null?l.style.fillOpacity=`${I+(P-I)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),O&&l.tagName.toLowerCase()==="path"&&_[x]&&l.setAttribute("d",We(_[x],O,t));});}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),Y){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${p[o]}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),R!==null&&(t.style.strokeWidth=`${R}`),I!==null&&(t.style.fillOpacity=`${I}`),O&&t.tagName.toLowerCase()==="path"&&_[o]&&t.setAttribute("d",_[o]);});}if(S.forEach(t=>{_t(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?_.push(t.getAttribute("d")??""):_.push(""),O&&(l?Nt(_[_.length-1],O,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?"0":`${o}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),R!==null&&(t.style.strokeWidth=`${R}`),I!==null&&(t.style.fillOpacity=`${I}`));}),Y){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let nt=typeof v=="string"?ft(v):null;function xt(){return !(St===false||!Ot()||!S.length||!nt||Y||te!=="y"||z||w!==1||U!==0||ee||Ee||ge!==false||O||oe||ie||ye>0||he||Se||ce||Be||Ue||je||Qe||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Tt(){let t=++It,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,X=h==="reverse"?"0":"var(--ssd-len)",B=h==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${X};`,u=`stroke-dashoffset:${B};`;E&&(V+=`opacity:${h==="reverse"?1:0};`,u+=`opacity:${h==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${nt};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function y(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:F}=He({top:i.top,height:i.height},_e(),et(),Xe,Ye);return ae(ue(_e(),b,F,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((F,C)=>{F.classList.remove(o),F.style.strokeDashoffset=h==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(F.style.opacity=h==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return y()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(xt())return Fe(Tt());function At(){let t=Math.max(1,Et),o=0,l=0,x=false;function X(a){let d=true;if(Y){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);G=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(h==="reverse"?1-i:i),he?.(i),y<1&&(d=false);}else S.forEach((y,i)=>{let b=i*U*t,F=Math.min(1,Math.max(0,(a-b)/t)),C=ae(F);y.style.strokeDashoffset=h==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(y.style.opacity=h==="reverse"?`${1-C}`:`${C}`),H&&L?y.style.stroke=De(H,L,C):L&&(y.style.stroke=L),R!==null&&D!==null?y.style.strokeWidth=`${R+(D-R)*C}`:D!==null&&(y.style.strokeWidth=`${D}`),I!==null&&P!==null?y.style.fillOpacity=`${I+(P-I)*C}`:P!==null&&(y.style.fillOpacity=`${P}`),O&&y.tagName.toLowerCase()==="path"&&_[i]&&y.setAttribute("d",We(_[i],O,C)),i===0&&(G=C,he?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),F<1&&(d=false);});if(oe){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);for(let b in oe){let F=parseFloat(b);i>=F&&!Z.has(F)&&(Z.add(F),oe[b]?.());}}return d}function B(a){if(k)return;let d=a-o;N||(N=true,Se?.());let y=X(d);if(y&&!A){A=true,X(t*(1+Math.max(0,S.length-1)*U)),ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{o=performance.now(),N=false,A=false,Z.clear(),Te(),M=requestAnimationFrame(B);},Re));return}y||(M=requestAnimationFrame(B));}function V(){cancelAnimationFrame(M),clearTimeout(K),o=performance.now(),l=0,k=false,N=false,A=false,Q=0,x=true,G=0,Z.clear(),Te(),M=requestAnimationFrame(B);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(K),x=false);});},{root:z??null,threshold:qe,rootMargin:Ge}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ye>0?setTimeout(()=>u.observe(e),ye):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(K),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){Q=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(B));},seek(a){let d=Math.min(1,Math.max(0,a));G=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),X(l);},getProgress(){return G},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(vt)return Fe(At());rt();function Ae(){if(!fe||k)return;let t=performance.now(),o=_e();if(!J&&ge===false&&o===Ze){M=requestAnimationFrame(Ae);return}J=false,Ze=o;let l=w;if(ge!==false){let u=t-Je,m=u>0?Math.abs(o-(xe<0?o:xe))/u:0;l=w*Math.max(.2,1+m*(typeof ge=="number"?ge:1)*.04);}xe=o,Je=t;let x=Ee?$e===-1||o>=$e?"forward":"reverse":h;$e=o;let X=j-W,B=true,V=X===0?0:(o-W)/X;if(isNaN(me)||(me<=0&&V>0?Be?.():me>0&&V<=0&&Qe?.(),me<1&&V>=1?Ue?.():me>=1&&V<1&&je?.()),me=V,Y){let u=ae(ue(o,W,j,l));ee&&!Ee&&(q=Math.max(q,u),u=q),G=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),he?.(u),!N&&ue(o,W,j,l)>0&&(N=true,Se?.()),u>=1&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{q=-1,N=false,A=false,e.style.clipPath=le(0);},Re))):u<1&&!ee&&(A=false),M=requestAnimationFrame(Ae);return}if(S.forEach((u,m)=>{let T=m*U*X,a=ae(ue(o,W+T,j+T,l));ee&&!Ee&&(q=Math.max(q,a),a=q),G=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=De(H,L,a):L&&(u.style.stroke=L),R!==null&&D!==null?u.style.strokeWidth=`${R+(D-R)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),I!==null&&P!==null?u.style.fillOpacity=`${I+(P-I)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),O&&u.tagName.toLowerCase()==="path"&&_[m]&&u.setAttribute("d",We(_[m],O,a)),m===0&&(he?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(B=false);}),oe){let u=ae(ue(o,W,j,l));for(let m in oe){let T=parseFloat(m);u>=T&&!Z.has(T)&&(Z.add(T),oe[m]?.());}}!N&&ue(o,W,j,l)>0&&(N=true,Se?.()),B&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{q=-1,N=false,A=false,Z.clear(),Te(),J=true;},Re))):!B&&!ee&&(A=false),M=requestAnimationFrame(Ae);}let Ne=false;function Me(){Ne||(Ne=true,M=requestAnimationFrame(function(){Ae();}));}function ke(){Ne=false,cancelAnimationFrame(M);}let Ve=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(J=true,Me()):ke();});},{root:z??null,threshold:qe,rootMargin:Ge});function st(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),rt(),J=true;}let Le;function be(){clearTimeout(Le),Le=setTimeout(st,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let we;return typeof ResizeObserver<"u"&&(we=new ResizeObserver(()=>be()),we.observe(document.body),we.observe(document.documentElement),we.observe(e)),ye>0?setTimeout(()=>Ve.observe(e),ye):Ve.observe(e),Fe({destroy(){cancelAnimationFrame(M),clearTimeout(K),ke(),Ve.disconnect(),we?.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Le),Ke();},replay(){q=-1,$e=-1,xe=-1,N=false,A=false,Q=0,k=false,G=0,Z.clear(),clearTimeout(K),Te(),J=true,fe&&Me();},pause(){k=true,ke();},resume(){k&&(k=false,J=true,fe&&Me());},seek(t){let o=Math.min(1,Math.max(0,t));G=o,q=o,k=true,ke(),$t(o,h),J=true;},getProgress(){return G},refresh(){clearTimeout(Le),st(),fe&&!k&&Me();}},()=>({tStart:W,tEnd:j}))}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let n={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),g=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(n.speed=parseFloat(c)),f&&(n.easing=f),g&&(n.stagger=parseFloat(g)),w&&(n.direction=w),E&&(n.selector=E),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(n.once=this.getAttribute("once")!=="false"),this.instance=bt(this,n);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}
+      <div style="position:absolute;${E?`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(n),window.addEventListener("scroll",c,{passive:true}),c(),{el:n,destroy(){window.removeEventListener("scroll",c),n.remove();}}}var bt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,wt=/[MmLlHhVvCcSsQqTtAaZz]/g;function zt(e,r,s){if(!Ee)return;let n=(e.match(wt)??[]).join("").toUpperCase(),c=(r.match(wt)??[]).join("").toUpperCase(),f=(e.match(bt)??[]).length,g=(r.match(bt)??[]).length;if(n!==c){de(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==g&&de(`morphTo: coordinate count differs (${f} \u2192 ${g}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function We(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let g=parseFloat(f),w=n[c++]??g;return String(+(g+(w-g)*s).toFixed(4))})}function vt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...n}=r,c=s?{...ut[s],...n}:n,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:g="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:U=0,direction:h="forward",once:ee=false,debug:Et=false,axis:te="y",scrollContainer:Ce,autoReverse:Se=false,delay:ye=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ge=false,threshold:Ge=0,rootMargin:qe="0px",repeat:ie=0,repeatDelay:Oe=0,morphTo:I,clip:Re,autoplay:St=false,duration:$t=1e3,native:xt=true,onProgress:he,onStart:$e,onComplete:ce,onEnter:Be,onLeave:Ue,onEnterBack:je,onLeaveBack:Qe}=c,Y=Re===true?"left":typeof Re=="string"?Re:false,ae=typeof v=="function"?v:ve[v]??ve.linear,Xe=ze($.start??"top bottom"),Ye=ze($.end??"bottom top"),z=typeof Ce=="string"?document.querySelector(Ce):Ce??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,O=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,R=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(Y){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 S=Y?[]:Array.from(e.querySelectorAll(g)),p=[],_=[],W=0,j=0,A=false,N=false,M=0,fe=false,G=-1,xe=-1,k=false,q=0,Q=0,K,Ie=null;function Ke(){Ie?.destroy(),Ie=null;}let Z=new Set,Ze=NaN,J=true,Te=-1,Je=performance.now(),me=NaN;function _e(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function et(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function tt(){let t=lt(e,z,te);return He(t,t.scroll,et(),Xe,Ye)}function rt(){(({tStart:W,tEnd:j}=tt())),Et&&Ee&&(Ke(),Ie=Vt(W,j,te));}function Fe(t,o=tt){dt(e,{type:"draw",getProgress:()=>t.getProgress(),getTrigger:o});let l=t.destroy;return t.destroy=()=>{l.call(t),yt(e);},t}function Tt(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),Y){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=Pe(H,L,t):L&&(l.style.stroke=L),O!==null&&D!==null?l.style.strokeWidth=`${O+(D-O)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),R!==null&&P!==null?l.style.fillOpacity=`${R+(P-R)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),I&&l.tagName.toLowerCase()==="path"&&_[x]&&l.setAttribute("d",We(_[x],I,t));});}function Ae(){if(e.style.setProperty("--scroll-draw-progress","0"),Y){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${p[o]}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`),I&&t.tagName.toLowerCase()==="path"&&_[o]&&t.setAttribute("d",_[o]);});}if(S.forEach(t=>{Nt(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?_.push(t.getAttribute("d")??""):_.push(""),I&&(l?zt(_[_.length-1],I,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?"0":`${o}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`));}),Y){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let nt=typeof v=="string"?ft(v):null;function At(){return !(xt===false||!Ft()||!S.length||!nt||Y||te!=="y"||z||w!==1||U!==0||ee||Se||ge!==false||I||oe||ie||ye>0||he||$e||ce||Be||Ue||je||Qe||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Mt(){let t=++_t,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,X=h==="reverse"?"0":"var(--ssd-len)",B=h==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${X};`,u=`stroke-dashoffset:${B};`;E&&(V+=`opacity:${h==="reverse"?1:0};`,u+=`opacity:${h==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${nt};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function y(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:F}=He({top:i.top,height:i.height},_e(),et(),Xe,Ye);return ae(ue(_e(),b,F,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((F,C)=>{F.classList.remove(o),F.style.strokeDashoffset=h==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(F.style.opacity=h==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return y()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(At())return Fe(Mt());function kt(){let t=Math.max(1,$t),o=0,l=0,x=false;function X(a){let d=true;if(Y){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);q=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(h==="reverse"?1-i:i),he?.(i),y<1&&(d=false);}else S.forEach((y,i)=>{let b=i*U*t,F=Math.min(1,Math.max(0,(a-b)/t)),C=ae(F);y.style.strokeDashoffset=h==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(y.style.opacity=h==="reverse"?`${1-C}`:`${C}`),H&&L?y.style.stroke=Pe(H,L,C):L&&(y.style.stroke=L),O!==null&&D!==null?y.style.strokeWidth=`${O+(D-O)*C}`:D!==null&&(y.style.strokeWidth=`${D}`),R!==null&&P!==null?y.style.fillOpacity=`${R+(P-R)*C}`:P!==null&&(y.style.fillOpacity=`${P}`),I&&y.tagName.toLowerCase()==="path"&&_[i]&&y.setAttribute("d",We(_[i],I,C)),i===0&&(q=C,he?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),F<1&&(d=false);});if(oe){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);for(let b in oe){let F=parseFloat(b);i>=F&&!Z.has(F)&&(Z.add(F),oe[b]?.());}}return d}function B(a){if(k)return;let d=a-o;N||(N=true,$e?.());let y=X(d);if(y&&!A){A=true,X(t*(1+Math.max(0,S.length-1)*U)),ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{o=performance.now(),N=false,A=false,Z.clear(),Ae(),M=requestAnimationFrame(B);},Oe));return}y||(M=requestAnimationFrame(B));}function V(){cancelAnimationFrame(M),clearTimeout(K),o=performance.now(),l=0,k=false,N=false,A=false,Q=0,x=true,q=0,Z.clear(),Ae(),M=requestAnimationFrame(B);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(K),x=false);});},{root:z??null,threshold:Ge,rootMargin:qe}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ye>0?setTimeout(()=>u.observe(e),ye):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(K),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){Q=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(B));},seek(a){let d=Math.min(1,Math.max(0,a));q=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),X(l);},getProgress(){return q},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(St)return Fe(kt());rt();function Me(){if(!fe||k)return;let t=performance.now(),o=_e();if(!J&&ge===false&&o===Ze){M=requestAnimationFrame(Me);return}J=false,Ze=o;let l=w;if(ge!==false){let u=t-Je,m=u>0?Math.abs(o-(Te<0?o:Te))/u:0;l=w*Math.max(.2,1+m*(typeof ge=="number"?ge:1)*.04);}Te=o,Je=t;let x=Se?xe===-1||o>=xe?"forward":"reverse":h;xe=o;let X=j-W,B=true,V=X===0?0:(o-W)/X;if(isNaN(me)||(me<=0&&V>0?Be?.():me>0&&V<=0&&Qe?.(),me<1&&V>=1?Ue?.():me>=1&&V<1&&je?.()),me=V,Y){let u=ae(ue(o,W,j,l));ee&&!Se&&(G=Math.max(G,u),u=G),q=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),he?.(u),!N&&ue(o,W,j,l)>0&&(N=true,$e?.()),u>=1&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{G=-1,N=false,A=false,e.style.clipPath=le(0);},Oe))):u<1&&!ee&&(A=false),M=requestAnimationFrame(Me);return}if(S.forEach((u,m)=>{let T=m*U*X,a=ae(ue(o,W+T,j+T,l));ee&&!Se&&(G=Math.max(G,a),a=G),q=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=Pe(H,L,a):L&&(u.style.stroke=L),O!==null&&D!==null?u.style.strokeWidth=`${O+(D-O)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),R!==null&&P!==null?u.style.fillOpacity=`${R+(P-R)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),I&&u.tagName.toLowerCase()==="path"&&_[m]&&u.setAttribute("d",We(_[m],I,a)),m===0&&(he?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(B=false);}),oe){let u=ae(ue(o,W,j,l));for(let m in oe){let T=parseFloat(m);u>=T&&!Z.has(T)&&(Z.add(T),oe[m]?.());}}!N&&ue(o,W,j,l)>0&&(N=true,$e?.()),B&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{G=-1,N=false,A=false,Z.clear(),Ae(),J=true;},Oe))):!B&&!ee&&(A=false),M=requestAnimationFrame(Me);}let Ne=false;function ke(){Ne||(Ne=true,M=requestAnimationFrame(function(){Me();}));}function Le(){Ne=false,cancelAnimationFrame(M);}let Ve=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(J=true,ke()):Le();});},{root:z??null,threshold:Ge,rootMargin:qe});function st(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),rt(),J=true;}let De;function be(){clearTimeout(De),De=setTimeout(st,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let we;return typeof ResizeObserver<"u"&&(we=new ResizeObserver(()=>be()),we.observe(document.body),we.observe(document.documentElement),we.observe(e)),ye>0?setTimeout(()=>Ve.observe(e),ye):Ve.observe(e),Fe({destroy(){cancelAnimationFrame(M),clearTimeout(K),Le(),Ve.disconnect(),we?.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(De),Ke();},replay(){G=-1,xe=-1,Te=-1,N=false,A=false,Q=0,k=false,q=0,Z.clear(),clearTimeout(K),Ae(),J=true,fe&&ke();},pause(){k=true,Le();},resume(){k&&(k=false,J=true,fe&&ke());},seek(t){let o=Math.min(1,Math.max(0,t));q=o,G=o,k=true,Le(),Tt(o,h),J=true;},getProgress(){return q},refresh(){clearTimeout(De),st(),fe&&!k&&ke();}},()=>({tStart:W,tEnd:j}))}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let n={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),g=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(n.speed=parseFloat(c)),f&&(n.easing=f),g&&(n.stagger=parseFloat(g)),w&&(n.direction=w),E&&(n.selector=E),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(n.once=this.getAttribute("once")!=="false"),this.instance=vt(this,n);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}

package/dist/web-component/index.mjs

@@ -1,3 +1,3 @@
-function Mt({bounces:e=3,decay:r=.5}={}){let s=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(n),f=0,g=[];for(let v=0;v<s;v++){let $=Math.pow(c,v);g.push($),f+=$;}let w=[0],E=0;for(let v=0;v<s;v++)E+=g[v]/f,w.push(E);return v=>{if(v<=0)return 0;if(v>=1)return 1;for(let $=0;$<s;$++)if(v<=w[$+1]){let U=(v-w[$])/(w[$+1]-w[$]);if($===0)return U*(2-U);let h=1-Math.pow(n,$);return h+(1-h)*(2*U-1)*(2*U-1)}return 1}}function kt({amplitude:e=1,period:r=.4}={}){let s=Math.max(1,e),n=Math.max(.1,r),c=s<=1?n/4:n/(2*Math.PI)*Math.asin(1/s);return f=>f<=0?0:f>=1?1:s*Math.pow(2,-10*f)*Math.sin((f-c)*(2*Math.PI)/n)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Mt(),elastic:kt()};function ze(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:n}}function ot(e,r,s,n){switch(n){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function it(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 pe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(s+n)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Lt(e,r,s){return Math.min(s,Math.max(r,e))}function ue(e,r,s,n){return s===r?0:Lt((e-r)/(s-r)*n,0,1)}function lt(e,r,s){let n=e.getBoundingClientRect(),c=s==="x"?n.width:n.height;return r?{top:s==="x"?n.left-r.getBoundingClientRect().left+r.scrollLeft:n.top-r.getBoundingClientRect().top+r.scrollTop,height:c,scroll:0}:{top:s==="x"?n.left:n.top,height:c,scroll:s==="x"?window.scrollX:window.scrollY}}function He(e,r,s,n,c){let f=ot(e.top,e.height,r,n.element)-it(n.viewport,s),g=ot(e.top,e.height,r,c.element)-it(c.viewport,s);return {tStart:f,tEnd:g}}function at(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function De(e,r,s){let n=at(e),c=at(r);return !n||!c?e:`rgb(${Math.round(n[0]+(c[0]-n[0])*s)},${Math.round(n[1]+(c[1]-n[1])*s)},${Math.round(n[2]+(c[2]-n[2])*s)})`}var ut={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}};var Pe=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...r){Pe&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Dt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Pt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ct=33;function Ct(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Rt(e){let r=[];for(let s=0;s<ct;s++){let n=s/(ct-1);r.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${r.join(",")})`}function ft(e){switch(e){case "linear":return "linear";case "ease-in":return Dt;case "ease-out":return Pt;case "ease-in-out":return Ct()?Rt(ve["ease-in-out"]):null;default:return null}}var mt=Symbol.for("svg-scroll-draw.registry");function pt(){let e=globalThis;return e[mt]||(e[mt]=new Map)}function dt(e,r){pt().set(e,r);}function yt(e){pt().delete(e);}var It=0;function Ot(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function _t(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?de("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ft(e,r,s){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.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 f=s==="x"?window.scrollX:window.scrollY,g=e-f,w=r-f,E=s==="x";n.innerHTML=`
+function Lt({bounces:e=3,decay:r=.5}={}){let s=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(n),f=0,g=[];for(let v=0;v<s;v++){let $=Math.pow(c,v);g.push($),f+=$;}let w=[0],E=0;for(let v=0;v<s;v++)E+=g[v]/f,w.push(E);return v=>{if(v<=0)return 0;if(v>=1)return 1;for(let $=0;$<s;$++)if(v<=w[$+1]){let U=(v-w[$])/(w[$+1]-w[$]);if($===0)return U*(2-U);let h=1-Math.pow(n,$);return h+(1-h)*(2*U-1)*(2*U-1)}return 1}}function Dt({amplitude:e=1,period:r=.4}={}){let s=Math.max(1,e),n=Math.max(.1,r),c=s<=1?n/4:n/(2*Math.PI)*Math.asin(1/s);return f=>f<=0?0:f>=1?1:s*Math.pow(2,-10*f)*Math.sin((f-c)*(2*Math.PI)/n)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Lt(),elastic:Dt()};function ze(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:n}}function ot(e,r,s,n){switch(n){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function it(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 pe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(s+n)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Pt(e,r,s){return Math.min(s,Math.max(r,e))}function ue(e,r,s,n){return s===r?0:Pt((e-r)/(s-r)*n,0,1)}function lt(e,r,s){let n=e.getBoundingClientRect(),c=s==="x"?n.width:n.height;return r?{top:s==="x"?n.left-r.getBoundingClientRect().left+r.scrollLeft:n.top-r.getBoundingClientRect().top+r.scrollTop,height:c,scroll:0}:{top:s==="x"?n.left:n.top,height:c,scroll:s==="x"?window.scrollX:window.scrollY}}function He(e,r,s,n,c){let f=ot(e.top,e.height,r,n.element)-it(n.viewport,s),g=ot(e.top,e.height,r,c.element)-it(c.viewport,s);return {tStart:f,tEnd:g}}function at(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function Pe(e,r,s){let n=at(e),c=at(r);return !n||!c?e:`rgb(${Math.round(n[0]+(c[0]-n[0])*s)},${Math.round(n[1]+(c[1]-n[1])*s)},${Math.round(n[2]+(c[2]-n[2])*s)})`}var ut={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}};var Ee=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...r){Ee&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Ct="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ot="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ct=33;function Rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function It(e){let r=[];for(let s=0;s<ct;s++){let n=s/(ct-1);r.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${r.join(",")})`}function ft(e){switch(e){case "linear":return "linear";case "ease-in":return Ct;case "ease-out":return Ot;case "ease-in-out":return Rt()?It(ve["ease-in-out"]):null;default:return null}}var mt=Symbol.for("svg-scroll-draw.registry");function pt(){let e=globalThis;return e[mt]||(e[mt]=new Map)}function dt(e,r){pt().set(e,r);}function yt(e){pt().delete(e);}var _t=0;function Ft(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function gt(e,r){let s="";try{s=getComputedStyle(e).getPropertyValue(r).trim();}catch{}return s||(e.getAttribute(r)??"").trim()}var ht=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Nt(e){if(!Ee)return;let r=gt(e,"stroke");if(!r||r==="none"){de("Element has no stroke \u2014 path will not be visible.",e);return}let s=(e.getAttribute("fill")??"").trim();s&&!ht.has(s)&&!ht.has(gt(e,"fill"))&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Vt(e,r,s){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.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 f=s==="x"?window.scrollX:window.scrollY,g=e-f,w=r-f,E=s==="x";n.innerHTML=`
       <div style="position:absolute;${E?`left:${g}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${g}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${E?`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(n),window.addEventListener("scroll",c,{passive:true}),c(),{el:n,destroy(){window.removeEventListener("scroll",c),n.remove();}}}var gt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,ht=/[MmLlHhVvCcSsQqTtAaZz]/g;function Nt(e,r,s){if(!Pe)return;let n=(e.match(ht)??[]).join("").toUpperCase(),c=(r.match(ht)??[]).join("").toUpperCase(),f=(e.match(gt)??[]).length,g=(r.match(gt)??[]).length;if(n!==c){de(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==g&&de(`morphTo: coordinate count differs (${f} \u2192 ${g}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function We(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let g=parseFloat(f),w=n[c++]??g;return String(+(g+(w-g)*s).toFixed(4))})}function bt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...n}=r,c=s?{...ut[s],...n}:n,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:g="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:U=0,direction:h="forward",once:ee=false,debug:wt=false,axis:te="y",scrollContainer:Ce,autoReverse:Ee=false,delay:ye=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ge=false,threshold:qe=0,rootMargin:Ge="0px",repeat:ie=0,repeatDelay:Re=0,morphTo:O,clip:Ie,autoplay:vt=false,duration:Et=1e3,native:St=true,onProgress:he,onStart:Se,onComplete:ce,onEnter:Be,onLeave:Ue,onEnterBack:je,onLeaveBack:Qe}=c,Y=Ie===true?"left":typeof Ie=="string"?Ie:false,ae=typeof v=="function"?v:ve[v]??ve.linear,Xe=ze($.start??"top bottom"),Ye=ze($.end??"bottom top"),z=typeof Ce=="string"?document.querySelector(Ce):Ce??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,R=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,I=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(Y){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 S=Y?[]:Array.from(e.querySelectorAll(g)),p=[],_=[],W=0,j=0,A=false,N=false,M=0,fe=false,q=-1,$e=-1,k=false,G=0,Q=0,K,Oe=null;function Ke(){Oe?.destroy(),Oe=null;}let Z=new Set,Ze=NaN,J=true,xe=-1,Je=performance.now(),me=NaN;function _e(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function et(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function tt(){let t=lt(e,z,te);return He(t,t.scroll,et(),Xe,Ye)}function rt(){(({tStart:W,tEnd:j}=tt())),wt&&Pe&&(Ke(),Oe=Ft(W,j,te));}function Fe(t,o=tt){dt(e,{type:"draw",getProgress:()=>t.getProgress(),getTrigger:o});let l=t.destroy;return t.destroy=()=>{l.call(t),yt(e);},t}function $t(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),Y){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=De(H,L,t):L&&(l.style.stroke=L),R!==null&&D!==null?l.style.strokeWidth=`${R+(D-R)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),I!==null&&P!==null?l.style.fillOpacity=`${I+(P-I)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),O&&l.tagName.toLowerCase()==="path"&&_[x]&&l.setAttribute("d",We(_[x],O,t));});}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),Y){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${p[o]}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),R!==null&&(t.style.strokeWidth=`${R}`),I!==null&&(t.style.fillOpacity=`${I}`),O&&t.tagName.toLowerCase()==="path"&&_[o]&&t.setAttribute("d",_[o]);});}if(S.forEach(t=>{_t(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?_.push(t.getAttribute("d")??""):_.push(""),O&&(l?Nt(_[_.length-1],O,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?"0":`${o}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),R!==null&&(t.style.strokeWidth=`${R}`),I!==null&&(t.style.fillOpacity=`${I}`));}),Y){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let nt=typeof v=="string"?ft(v):null;function xt(){return !(St===false||!Ot()||!S.length||!nt||Y||te!=="y"||z||w!==1||U!==0||ee||Ee||ge!==false||O||oe||ie||ye>0||he||Se||ce||Be||Ue||je||Qe||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Tt(){let t=++It,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,X=h==="reverse"?"0":"var(--ssd-len)",B=h==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${X};`,u=`stroke-dashoffset:${B};`;E&&(V+=`opacity:${h==="reverse"?1:0};`,u+=`opacity:${h==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${nt};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function y(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:F}=He({top:i.top,height:i.height},_e(),et(),Xe,Ye);return ae(ue(_e(),b,F,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((F,C)=>{F.classList.remove(o),F.style.strokeDashoffset=h==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(F.style.opacity=h==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return y()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(xt())return Fe(Tt());function At(){let t=Math.max(1,Et),o=0,l=0,x=false;function X(a){let d=true;if(Y){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);G=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(h==="reverse"?1-i:i),he?.(i),y<1&&(d=false);}else S.forEach((y,i)=>{let b=i*U*t,F=Math.min(1,Math.max(0,(a-b)/t)),C=ae(F);y.style.strokeDashoffset=h==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(y.style.opacity=h==="reverse"?`${1-C}`:`${C}`),H&&L?y.style.stroke=De(H,L,C):L&&(y.style.stroke=L),R!==null&&D!==null?y.style.strokeWidth=`${R+(D-R)*C}`:D!==null&&(y.style.strokeWidth=`${D}`),I!==null&&P!==null?y.style.fillOpacity=`${I+(P-I)*C}`:P!==null&&(y.style.fillOpacity=`${P}`),O&&y.tagName.toLowerCase()==="path"&&_[i]&&y.setAttribute("d",We(_[i],O,C)),i===0&&(G=C,he?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),F<1&&(d=false);});if(oe){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);for(let b in oe){let F=parseFloat(b);i>=F&&!Z.has(F)&&(Z.add(F),oe[b]?.());}}return d}function B(a){if(k)return;let d=a-o;N||(N=true,Se?.());let y=X(d);if(y&&!A){A=true,X(t*(1+Math.max(0,S.length-1)*U)),ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{o=performance.now(),N=false,A=false,Z.clear(),Te(),M=requestAnimationFrame(B);},Re));return}y||(M=requestAnimationFrame(B));}function V(){cancelAnimationFrame(M),clearTimeout(K),o=performance.now(),l=0,k=false,N=false,A=false,Q=0,x=true,G=0,Z.clear(),Te(),M=requestAnimationFrame(B);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(K),x=false);});},{root:z??null,threshold:qe,rootMargin:Ge}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ye>0?setTimeout(()=>u.observe(e),ye):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(K),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){Q=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(B));},seek(a){let d=Math.min(1,Math.max(0,a));G=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),X(l);},getProgress(){return G},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(vt)return Fe(At());rt();function Ae(){if(!fe||k)return;let t=performance.now(),o=_e();if(!J&&ge===false&&o===Ze){M=requestAnimationFrame(Ae);return}J=false,Ze=o;let l=w;if(ge!==false){let u=t-Je,m=u>0?Math.abs(o-(xe<0?o:xe))/u:0;l=w*Math.max(.2,1+m*(typeof ge=="number"?ge:1)*.04);}xe=o,Je=t;let x=Ee?$e===-1||o>=$e?"forward":"reverse":h;$e=o;let X=j-W,B=true,V=X===0?0:(o-W)/X;if(isNaN(me)||(me<=0&&V>0?Be?.():me>0&&V<=0&&Qe?.(),me<1&&V>=1?Ue?.():me>=1&&V<1&&je?.()),me=V,Y){let u=ae(ue(o,W,j,l));ee&&!Ee&&(q=Math.max(q,u),u=q),G=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),he?.(u),!N&&ue(o,W,j,l)>0&&(N=true,Se?.()),u>=1&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{q=-1,N=false,A=false,e.style.clipPath=le(0);},Re))):u<1&&!ee&&(A=false),M=requestAnimationFrame(Ae);return}if(S.forEach((u,m)=>{let T=m*U*X,a=ae(ue(o,W+T,j+T,l));ee&&!Ee&&(q=Math.max(q,a),a=q),G=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=De(H,L,a):L&&(u.style.stroke=L),R!==null&&D!==null?u.style.strokeWidth=`${R+(D-R)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),I!==null&&P!==null?u.style.fillOpacity=`${I+(P-I)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),O&&u.tagName.toLowerCase()==="path"&&_[m]&&u.setAttribute("d",We(_[m],O,a)),m===0&&(he?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(B=false);}),oe){let u=ae(ue(o,W,j,l));for(let m in oe){let T=parseFloat(m);u>=T&&!Z.has(T)&&(Z.add(T),oe[m]?.());}}!N&&ue(o,W,j,l)>0&&(N=true,Se?.()),B&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{q=-1,N=false,A=false,Z.clear(),Te(),J=true;},Re))):!B&&!ee&&(A=false),M=requestAnimationFrame(Ae);}let Ne=false;function Me(){Ne||(Ne=true,M=requestAnimationFrame(function(){Ae();}));}function ke(){Ne=false,cancelAnimationFrame(M);}let Ve=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(J=true,Me()):ke();});},{root:z??null,threshold:qe,rootMargin:Ge});function st(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),rt(),J=true;}let Le;function be(){clearTimeout(Le),Le=setTimeout(st,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let we;return typeof ResizeObserver<"u"&&(we=new ResizeObserver(()=>be()),we.observe(document.body),we.observe(document.documentElement),we.observe(e)),ye>0?setTimeout(()=>Ve.observe(e),ye):Ve.observe(e),Fe({destroy(){cancelAnimationFrame(M),clearTimeout(K),ke(),Ve.disconnect(),we?.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Le),Ke();},replay(){q=-1,$e=-1,xe=-1,N=false,A=false,Q=0,k=false,G=0,Z.clear(),clearTimeout(K),Te(),J=true,fe&&Me();},pause(){k=true,ke();},resume(){k&&(k=false,J=true,fe&&Me());},seek(t){let o=Math.min(1,Math.max(0,t));G=o,q=o,k=true,ke(),$t(o,h),J=true;},getProgress(){return G},refresh(){clearTimeout(Le),st(),fe&&!k&&Me();}},()=>({tStart:W,tEnd:j}))}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let n={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),g=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(n.speed=parseFloat(c)),f&&(n.easing=f),g&&(n.stagger=parseFloat(g)),w&&(n.direction=w),E&&(n.selector=E),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(n.once=this.getAttribute("once")!=="false"),this.instance=bt(this,n);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}
+      <div style="position:absolute;${E?`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(n),window.addEventListener("scroll",c,{passive:true}),c(),{el:n,destroy(){window.removeEventListener("scroll",c),n.remove();}}}var bt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,wt=/[MmLlHhVvCcSsQqTtAaZz]/g;function zt(e,r,s){if(!Ee)return;let n=(e.match(wt)??[]).join("").toUpperCase(),c=(r.match(wt)??[]).join("").toUpperCase(),f=(e.match(bt)??[]).length,g=(r.match(bt)??[]).length;if(n!==c){de(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==g&&de(`morphTo: coordinate count differs (${f} \u2192 ${g}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function We(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let g=parseFloat(f),w=n[c++]??g;return String(+(g+(w-g)*s).toFixed(4))})}function vt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...n}=r,c=s?{...ut[s],...n}:n,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:g="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:U=0,direction:h="forward",once:ee=false,debug:Et=false,axis:te="y",scrollContainer:Ce,autoReverse:Se=false,delay:ye=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ge=false,threshold:Ge=0,rootMargin:qe="0px",repeat:ie=0,repeatDelay:Oe=0,morphTo:I,clip:Re,autoplay:St=false,duration:$t=1e3,native:xt=true,onProgress:he,onStart:$e,onComplete:ce,onEnter:Be,onLeave:Ue,onEnterBack:je,onLeaveBack:Qe}=c,Y=Re===true?"left":typeof Re=="string"?Re:false,ae=typeof v=="function"?v:ve[v]??ve.linear,Xe=ze($.start??"top bottom"),Ye=ze($.end??"bottom top"),z=typeof Ce=="string"?document.querySelector(Ce):Ce??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,O=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,R=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(Y){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 S=Y?[]:Array.from(e.querySelectorAll(g)),p=[],_=[],W=0,j=0,A=false,N=false,M=0,fe=false,G=-1,xe=-1,k=false,q=0,Q=0,K,Ie=null;function Ke(){Ie?.destroy(),Ie=null;}let Z=new Set,Ze=NaN,J=true,Te=-1,Je=performance.now(),me=NaN;function _e(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function et(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function tt(){let t=lt(e,z,te);return He(t,t.scroll,et(),Xe,Ye)}function rt(){(({tStart:W,tEnd:j}=tt())),Et&&Ee&&(Ke(),Ie=Vt(W,j,te));}function Fe(t,o=tt){dt(e,{type:"draw",getProgress:()=>t.getProgress(),getTrigger:o});let l=t.destroy;return t.destroy=()=>{l.call(t),yt(e);},t}function Tt(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),Y){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=Pe(H,L,t):L&&(l.style.stroke=L),O!==null&&D!==null?l.style.strokeWidth=`${O+(D-O)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),R!==null&&P!==null?l.style.fillOpacity=`${R+(P-R)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),I&&l.tagName.toLowerCase()==="path"&&_[x]&&l.setAttribute("d",We(_[x],I,t));});}function Ae(){if(e.style.setProperty("--scroll-draw-progress","0"),Y){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${p[o]}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`),I&&t.tagName.toLowerCase()==="path"&&_[o]&&t.setAttribute("d",_[o]);});}if(S.forEach(t=>{Nt(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?_.push(t.getAttribute("d")??""):_.push(""),I&&(l?zt(_[_.length-1],I,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?"0":`${o}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`));}),Y){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let nt=typeof v=="string"?ft(v):null;function At(){return !(xt===false||!Ft()||!S.length||!nt||Y||te!=="y"||z||w!==1||U!==0||ee||Se||ge!==false||I||oe||ie||ye>0||he||$e||ce||Be||Ue||je||Qe||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Mt(){let t=++_t,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,X=h==="reverse"?"0":"var(--ssd-len)",B=h==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${X};`,u=`stroke-dashoffset:${B};`;E&&(V+=`opacity:${h==="reverse"?1:0};`,u+=`opacity:${h==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${nt};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function y(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:F}=He({top:i.top,height:i.height},_e(),et(),Xe,Ye);return ae(ue(_e(),b,F,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((F,C)=>{F.classList.remove(o),F.style.strokeDashoffset=h==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(F.style.opacity=h==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return y()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(At())return Fe(Mt());function kt(){let t=Math.max(1,$t),o=0,l=0,x=false;function X(a){let d=true;if(Y){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);q=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(h==="reverse"?1-i:i),he?.(i),y<1&&(d=false);}else S.forEach((y,i)=>{let b=i*U*t,F=Math.min(1,Math.max(0,(a-b)/t)),C=ae(F);y.style.strokeDashoffset=h==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(y.style.opacity=h==="reverse"?`${1-C}`:`${C}`),H&&L?y.style.stroke=Pe(H,L,C):L&&(y.style.stroke=L),O!==null&&D!==null?y.style.strokeWidth=`${O+(D-O)*C}`:D!==null&&(y.style.strokeWidth=`${D}`),R!==null&&P!==null?y.style.fillOpacity=`${R+(P-R)*C}`:P!==null&&(y.style.fillOpacity=`${P}`),I&&y.tagName.toLowerCase()==="path"&&_[i]&&y.setAttribute("d",We(_[i],I,C)),i===0&&(q=C,he?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),F<1&&(d=false);});if(oe){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);for(let b in oe){let F=parseFloat(b);i>=F&&!Z.has(F)&&(Z.add(F),oe[b]?.());}}return d}function B(a){if(k)return;let d=a-o;N||(N=true,$e?.());let y=X(d);if(y&&!A){A=true,X(t*(1+Math.max(0,S.length-1)*U)),ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{o=performance.now(),N=false,A=false,Z.clear(),Ae(),M=requestAnimationFrame(B);},Oe));return}y||(M=requestAnimationFrame(B));}function V(){cancelAnimationFrame(M),clearTimeout(K),o=performance.now(),l=0,k=false,N=false,A=false,Q=0,x=true,q=0,Z.clear(),Ae(),M=requestAnimationFrame(B);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(K),x=false);});},{root:z??null,threshold:Ge,rootMargin:qe}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ye>0?setTimeout(()=>u.observe(e),ye):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(K),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){Q=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(B));},seek(a){let d=Math.min(1,Math.max(0,a));q=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),X(l);},getProgress(){return q},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(St)return Fe(kt());rt();function Me(){if(!fe||k)return;let t=performance.now(),o=_e();if(!J&&ge===false&&o===Ze){M=requestAnimationFrame(Me);return}J=false,Ze=o;let l=w;if(ge!==false){let u=t-Je,m=u>0?Math.abs(o-(Te<0?o:Te))/u:0;l=w*Math.max(.2,1+m*(typeof ge=="number"?ge:1)*.04);}Te=o,Je=t;let x=Se?xe===-1||o>=xe?"forward":"reverse":h;xe=o;let X=j-W,B=true,V=X===0?0:(o-W)/X;if(isNaN(me)||(me<=0&&V>0?Be?.():me>0&&V<=0&&Qe?.(),me<1&&V>=1?Ue?.():me>=1&&V<1&&je?.()),me=V,Y){let u=ae(ue(o,W,j,l));ee&&!Se&&(G=Math.max(G,u),u=G),q=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),he?.(u),!N&&ue(o,W,j,l)>0&&(N=true,$e?.()),u>=1&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{G=-1,N=false,A=false,e.style.clipPath=le(0);},Oe))):u<1&&!ee&&(A=false),M=requestAnimationFrame(Me);return}if(S.forEach((u,m)=>{let T=m*U*X,a=ae(ue(o,W+T,j+T,l));ee&&!Se&&(G=Math.max(G,a),a=G),q=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=Pe(H,L,a):L&&(u.style.stroke=L),O!==null&&D!==null?u.style.strokeWidth=`${O+(D-O)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),R!==null&&P!==null?u.style.fillOpacity=`${R+(P-R)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),I&&u.tagName.toLowerCase()==="path"&&_[m]&&u.setAttribute("d",We(_[m],I,a)),m===0&&(he?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(B=false);}),oe){let u=ae(ue(o,W,j,l));for(let m in oe){let T=parseFloat(m);u>=T&&!Z.has(T)&&(Z.add(T),oe[m]?.());}}!N&&ue(o,W,j,l)>0&&(N=true,$e?.()),B&&!A?(A=true,ce?.(),Q<(ie==="infinite"?1/0:ie??0)&&(Q++,K=setTimeout(()=>{G=-1,N=false,A=false,Z.clear(),Ae(),J=true;},Oe))):!B&&!ee&&(A=false),M=requestAnimationFrame(Me);}let Ne=false;function ke(){Ne||(Ne=true,M=requestAnimationFrame(function(){Me();}));}function Le(){Ne=false,cancelAnimationFrame(M);}let Ve=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(J=true,ke()):Le();});},{root:z??null,threshold:Ge,rootMargin:qe});function st(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),rt(),J=true;}let De;function be(){clearTimeout(De),De=setTimeout(st,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let we;return typeof ResizeObserver<"u"&&(we=new ResizeObserver(()=>be()),we.observe(document.body),we.observe(document.documentElement),we.observe(e)),ye>0?setTimeout(()=>Ve.observe(e),ye):Ve.observe(e),Fe({destroy(){cancelAnimationFrame(M),clearTimeout(K),Le(),Ve.disconnect(),we?.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(De),Ke();},replay(){G=-1,xe=-1,Te=-1,N=false,A=false,Q=0,k=false,q=0,Z.clear(),clearTimeout(K),Ae(),J=true,fe&&ke();},pause(){k=true,Le();},resume(){k&&(k=false,J=true,fe&&ke());},seek(t){let o=Math.min(1,Math.max(0,t));q=o,G=o,k=true,Le(),Tt(o,h),J=true;},getProgress(){return q},refresh(){clearTimeout(De),st(),fe&&!k&&ke();}},()=>({tStart:W,tEnd:j}))}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let n={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),g=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(n.speed=parseFloat(c)),f&&(n.easing=f),g&&(n.stagger=parseFloat(g)),w&&(n.direction=w),E&&(n.selector=E),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(n.once=this.getAttribute("once")!=="false"),this.instance=vt(this,n);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
   "keywords": [
     "svg",
@@ -455,6 +455,7 @@
   },
   "scripts": {
     "build": "tsup",
+    "build:lowmem": "node scripts/build-lowmem.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "prepare": "npm run build",

package/dist/aos/react/index.d.mts

@@ -1,44 +0,0 @@
-type AOSAnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
-interface AOSOptions {
-    /** Px from the trigger point before the animation starts. Default 120. */
-    offset?: number;
-    /** Ms to wait before animating in. Default 0. */
-    delay?: number;
-    /** Animation length in ms. Default 400. */
-    duration?: number;
-    /** An AOS easing name (`'ease-out-back'`…) or any CSS timing function. Default `'ease'`. */
-    easing?: string;
-    /** Animate only the first time the element scrolls in. Default false. */
-    once?: boolean;
-    /** Animate out again when the element scrolls past the top. Default false. */
-    mirror?: boolean;
-    /** Which edge of the element meets which edge of the window. Default `'top-bottom'`. */
-    anchorPlacement?: AOSAnchorPlacement;
-    /** Skip animations entirely: a boolean, a predicate, or a viewport class. */
-    disable?: boolean | 'phone' | 'tablet' | 'mobile' | (() => boolean);
-    /** Document event that starts AOS. Default `'DOMContentLoaded'`. */
-    startEvent?: string;
-    /** Do not watch the DOM for new `[data-aos]` elements. Default false. */
-    disableMutationObserver?: boolean;
-    /** Class added at init. Default `'aos-init'`. */
-    initClassName?: string;
-    /** Class added while animated in. Default `'aos-animate'`. */
-    animatedClassName?: string;
-    /** Also add the `data-aos` value as classes (for animate.css-style sets). Default false. */
-    useClassNames?: boolean;
-    /** Accepted for compatibility; scroll handling is batched per frame instead. */
-    throttleDelay?: number;
-    /** Accepted for compatibility; resize handling is debounced internally. */
-    debounceDelay?: number;
-}
-
-/** Start AOS for the page, and stop it on unmount. Options are read once, on mount. */
-declare function useAOS(options?: AOSOptions, refreshKey?: unknown): void;
-type AOSInitProps = AOSOptions & {
-    /** Re-measure trigger positions whenever this changes (e.g. the pathname). */
-    refreshKey?: unknown;
-};
-/** `useAOS` as a component, for a layout that cannot call hooks itself. Renders nothing. */
-declare function AOSInit({ refreshKey, ...options }: AOSInitProps): null;
-
-export { AOSInit, type AOSInitProps, useAOS };

package/dist/aos/react/index.d.ts

@@ -1,44 +0,0 @@
-type AOSAnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
-interface AOSOptions {
-    /** Px from the trigger point before the animation starts. Default 120. */
-    offset?: number;
-    /** Ms to wait before animating in. Default 0. */
-    delay?: number;
-    /** Animation length in ms. Default 400. */
-    duration?: number;
-    /** An AOS easing name (`'ease-out-back'`…) or any CSS timing function. Default `'ease'`. */
-    easing?: string;
-    /** Animate only the first time the element scrolls in. Default false. */
-    once?: boolean;
-    /** Animate out again when the element scrolls past the top. Default false. */
-    mirror?: boolean;
-    /** Which edge of the element meets which edge of the window. Default `'top-bottom'`. */
-    anchorPlacement?: AOSAnchorPlacement;
-    /** Skip animations entirely: a boolean, a predicate, or a viewport class. */
-    disable?: boolean | 'phone' | 'tablet' | 'mobile' | (() => boolean);
-    /** Document event that starts AOS. Default `'DOMContentLoaded'`. */
-    startEvent?: string;
-    /** Do not watch the DOM for new `[data-aos]` elements. Default false. */
-    disableMutationObserver?: boolean;
-    /** Class added at init. Default `'aos-init'`. */
-    initClassName?: string;
-    /** Class added while animated in. Default `'aos-animate'`. */
-    animatedClassName?: string;
-    /** Also add the `data-aos` value as classes (for animate.css-style sets). Default false. */
-    useClassNames?: boolean;
-    /** Accepted for compatibility; scroll handling is batched per frame instead. */
-    throttleDelay?: number;
-    /** Accepted for compatibility; resize handling is debounced internally. */
-    debounceDelay?: number;
-}
-
-/** Start AOS for the page, and stop it on unmount. Options are read once, on mount. */
-declare function useAOS(options?: AOSOptions, refreshKey?: unknown): void;
-type AOSInitProps = AOSOptions & {
-    /** Re-measure trigger positions whenever this changes (e.g. the pathname). */
-    refreshKey?: unknown;
-};
-/** `useAOS` as a component, for a layout that cannot call hooks itself. Renders nothing. */
-declare function AOSInit({ refreshKey, ...options }: AOSInitProps): null;
-
-export { AOSInit, type AOSInitProps, useAOS };

package/dist/horizontal/index.d.mts

@@ -1,108 +0,0 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface TriggerConfig {
-    start?: string;
-    end?: string;
-}
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
-
-interface ScrollHorizontalOptions {
-    /**
-     * Total horizontal travel distance in pixels.
-     *
-     * Default: `track.scrollWidth` minus the width it is seen through — the
-     * viewport, or the `scrollContainer`'s client width when one is given.
-     */
-    distance?: number;
-    /**
-     * Trigger window for the scroll → horizontal mapping.
-     * Default: `{ start: 'top top', end: 'bottom bottom' }` — full container height.
-     */
-    trigger?: TriggerConfig;
-    /** Easing for the horizontal movement. Default: `'linear'` (scrub feel). */
-    easing?: EasingName | ((t: number) => number);
-    /** Custom scroll container. Default: window. */
-    scrollContainer?: string | Element;
-    /**
-     * Element whose height defines the scroll window for the scrub.
-     *
-     * Default: the container of the track's nearest `position: sticky` ancestor —
-     * the `.outer` element in the CSS setup below, which is where the scroll room
-     * actually lives. Falls back to the track itself when there is no sticky
-     * ancestor.
-     *
-     * Why this is not the track: a sticky stage pins the track at exactly one
-     * viewport tall, so measuring `top top` → `bottom bottom` against it gives
-     * tStart === tEnd — a zero-length window, and a track that never moves.
-     */
-    triggerElement?: string | Element;
-    /**
-     * Honour `prefers-reduced-motion: reduce` by holding the track at its final
-     * position instead of scrubbing. Default: **`false`** — unlike every other
-     * API here, which defaults to `true`.
-     *
-     * The reasoning: this transform is scroll-linked scrubbing, not autonomous
-     * motion. It advances only as the user scrolls, 1:1 with their input, so it is
-     * direct manipulation rather than something that plays at them. And the
-     * alternative is worse than the motion — the panels are only reachable *via*
-     * the transform, inside a sticky `overflow: hidden` container, so applying a
-     * final state (or none at all) silently hides all of the content except one
-     * panel from exactly the users who asked for less motion.
-     *
-     * Set to `true` if your layout has an accessible non-transform fallback and you
-     * would rather drop the movement.
-     */
-    respectReducedMotion?: boolean;
-    onProgress?: (progress: number) => void;
-}
-interface ScrollHorizontalInstance extends ScrollDrawInstance {
-    /** Recalculate travel distance after layout change. */
-    refresh: () => void;
-}
-/**
- * Drive horizontal movement (translateX) from vertical scroll.
- *
- * The Apple / Stripe "scroll to reveal horizontal sections" pattern.
- * You handle the sticky + overflow CSS; `scrollHorizontal` drives the translateX.
- *
- * Minimal CSS setup:
- *   .outer  { height: 400vh; }
- *   .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
- *   .track  { display: flex; width: max-content; }
- *
- * @example
- * scrollHorizontal('.track', {
- *   distance: 3 * window.innerWidth,
- *   trigger:  { start: 'top top', end: 'bottom bottom' },
- *   easing:   'linear',
- * });
- */
-declare function scrollHorizontal(track: string | Element, options?: ScrollHorizontalOptions): ScrollHorizontalInstance;
-
-export { type ScrollHorizontalInstance, type ScrollHorizontalOptions, scrollHorizontal };

package/dist/horizontal/index.d.ts

@@ -1,108 +0,0 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface TriggerConfig {
-    start?: string;
-    end?: string;
-}
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
-
-interface ScrollHorizontalOptions {
-    /**
-     * Total horizontal travel distance in pixels.
-     *
-     * Default: `track.scrollWidth` minus the width it is seen through — the
-     * viewport, or the `scrollContainer`'s client width when one is given.
-     */
-    distance?: number;
-    /**
-     * Trigger window for the scroll → horizontal mapping.
-     * Default: `{ start: 'top top', end: 'bottom bottom' }` — full container height.
-     */
-    trigger?: TriggerConfig;
-    /** Easing for the horizontal movement. Default: `'linear'` (scrub feel). */
-    easing?: EasingName | ((t: number) => number);
-    /** Custom scroll container. Default: window. */
-    scrollContainer?: string | Element;
-    /**
-     * Element whose height defines the scroll window for the scrub.
-     *
-     * Default: the container of the track's nearest `position: sticky` ancestor —
-     * the `.outer` element in the CSS setup below, which is where the scroll room
-     * actually lives. Falls back to the track itself when there is no sticky
-     * ancestor.
-     *
-     * Why this is not the track: a sticky stage pins the track at exactly one
-     * viewport tall, so measuring `top top` → `bottom bottom` against it gives
-     * tStart === tEnd — a zero-length window, and a track that never moves.
-     */
-    triggerElement?: string | Element;
-    /**
-     * Honour `prefers-reduced-motion: reduce` by holding the track at its final
-     * position instead of scrubbing. Default: **`false`** — unlike every other
-     * API here, which defaults to `true`.
-     *
-     * The reasoning: this transform is scroll-linked scrubbing, not autonomous
-     * motion. It advances only as the user scrolls, 1:1 with their input, so it is
-     * direct manipulation rather than something that plays at them. And the
-     * alternative is worse than the motion — the panels are only reachable *via*
-     * the transform, inside a sticky `overflow: hidden` container, so applying a
-     * final state (or none at all) silently hides all of the content except one
-     * panel from exactly the users who asked for less motion.
-     *
-     * Set to `true` if your layout has an accessible non-transform fallback and you
-     * would rather drop the movement.
-     */
-    respectReducedMotion?: boolean;
-    onProgress?: (progress: number) => void;
-}
-interface ScrollHorizontalInstance extends ScrollDrawInstance {
-    /** Recalculate travel distance after layout change. */
-    refresh: () => void;
-}
-/**
- * Drive horizontal movement (translateX) from vertical scroll.
- *
- * The Apple / Stripe "scroll to reveal horizontal sections" pattern.
- * You handle the sticky + overflow CSS; `scrollHorizontal` drives the translateX.
- *
- * Minimal CSS setup:
- *   .outer  { height: 400vh; }
- *   .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
- *   .track  { display: flex; width: max-content; }
- *
- * @example
- * scrollHorizontal('.track', {
- *   distance: 3 * window.innerWidth,
- *   trigger:  { start: 'top top', end: 'bottom bottom' },
- *   easing:   'linear',
- * });
- */
-declare function scrollHorizontal(track: string | Element, options?: ScrollHorizontalOptions): ScrollHorizontalInstance;
-
-export { type ScrollHorizontalInstance, type ScrollHorizontalOptions, scrollHorizontal };