svg-scroll-draw 2.16.0 → 2.16.1

package/README.md

@@ -307,7 +307,9 @@ export default function Hero() {
 }
 ```
 
-> **Next.js App Router:** add `'use client'` to any component that uses these wrappers.
+> **Next.js App Router:** `svg-scroll-draw/react` is marked `"use client"` (from 2.16.1), so a Server
+> Component can render these components directly. Options that are functions, such as `onProgress`,
+> cannot cross from server to client: put those in a `'use client'` component of your own.
 
 #### Vue 3
 

package/dist/react/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';var gr=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var gr__default=/*#__PURE__*/_interopDefault(gr);function Ut({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,n)),i=Math.sqrt(t),o=0,a=[];for(let p=0;p<r;p++){let S=Math.pow(i,p);a.push(S),o+=S;}let u=[0],m=0;for(let p=0;p<r;p++)m+=a[p]/o,u.push(m);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let S=0;S<r;S++)if(p<=u[S+1]){let R=(p-u[S])/(u[S+1]-u[S]);if(S===0)return R*(2-R);let M=1-Math.pow(t,S);return M+(1-M)*(2*R-1)*(2*R-1)}return 1}}function jt({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),t=Math.max(.1,n),i=r<=1?t/4:t/(2*Math.PI)*Math.asin(1/r);return o=>o<=0?0:o>=1?1:r*Math.pow(2,-10*o)*Math.sin((o-i)*(2*Math.PI)/t)+1}var Z={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:Ut(),elastic:jt()};function ht(e,n,r){return Math.min(r,Math.max(n,e))}function se(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",t="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:t}}function bt(e,n,r,t){switch(t){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function wt(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 J(e,n,r,t){return r===n?0:ht((e-n)/(r-n)*t,0,1)}function we(e,n,r,t,i){let o=bt(e.top,e.height,n,t.element)-wt(t.viewport,r),a=bt(e.top,e.height,n,i.element)-wt(i.viewport,r);return {tStart:o,tEnd:a}}function Ke(e,n,r){let t=e.getBoundingClientRect(),i=r==="x"?t.width:t.height;return n?{top:r==="x"?t.left-n.getBoundingClientRect().left+n.scrollLeft:t.top-n.getBoundingClientRect().top+n.scrollTop,height:i,scroll:0}:{top:r==="x"?t.left:t.top,height:i,scroll:r==="x"?window.scrollX:window.scrollY}}function Ve(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),t=parseFloat(e.getAttribute("height")??"0");return 2*(r+t)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function vt(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let t=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return t?[parseInt(t[1]),parseInt(t[2]),parseInt(t[3])]:null}function _e(e,n,r){let t=vt(e),i=vt(n);return !t||!i?e:`rgb(${Math.round(t[0]+(i[0]-t[0])*r)},${Math.round(t[1]+(i[1]-t[1])*r)},${Math.round(t[2]+(i[2]-t[2])*r)})`}var Et={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 Be=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ve(e,...n){Be&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var Xt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Yt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",St=33;function Qt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Zt(e){let n=[];for(let r=0;r<St;r++){let t=r/(St-1);n.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${n.join(",")})`}function et(e){switch(e){case "linear":return "linear";case "ease-in":return Xt;case "ease-out":return Yt;case "ease-in-out":return Qt()?Zt(Z["ease-in-out"]):null;default:return null}}var Tt=Symbol.for("svg-scroll-draw.registry");function xt(){let e=globalThis;return e[Tt]||(e[Tt]=new Map)}function Pe(e,n){xt().set(e,n);}function Ce(e){xt().delete(e);}var Jt=0;function Kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function At(e,n){let r="";try{r=getComputedStyle(e).getPropertyValue(n).trim();}catch{}return r||(e.getAttribute(n)??"").trim()}var Mt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function er(e){if(!Be)return;let n=At(e,"stroke");if(!n||n==="none"){ve("Element has no stroke \u2014 path will not be visible.",e);return}let r=(e.getAttribute("fill")??"").trim();r&&!Mt.has(r)&&!Mt.has(At(e,"fill"))&&ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function tr(e,n,r){let t=document.createElement("div");t.setAttribute("data-svg-scroll-draw-debug",""),t.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 o=r==="x"?window.scrollX:window.scrollY,a=e-o,u=n-o,m=r==="x";t.innerHTML=`
       <div style="position:absolute;${m?`left:${a}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${a}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;${m?`left:${u}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${u}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(t),window.addEventListener("scroll",i,{passive:true}),i(),{el:t,destroy(){window.removeEventListener("scroll",i),t.remove();}}}var Lt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Pt=/[MmLlHhVvCcSsQqTtAaZz]/g;function rr(e,n,r){if(!Be)return;let t=(e.match(Pt)??[]).join("").toUpperCase(),i=(n.match(Pt)??[]).join("").toUpperCase(),o=(e.match(Lt)??[]).length,a=(n.match(Lt)??[]).length;if(t!==i){ve(`morphTo: command sequence differs (${t||"\u2205"} \u2192 ${i||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}o!==a&&ve(`morphTo: coordinate count differs (${o} \u2192 ${a}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function at(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,o=>{let a=parseFloat(o),u=t[i++]??a;return String(+(a+(u-a)*r).toFixed(4))})}function Ct(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,i=r?{...Et[r],...t}:t,o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:a="path, polyline, line, polygon, rect, circle",speed:u=1,fade:m=false,easing:p="linear",trigger:S={},stagger:R=0,direction:M="forward",once:re=false,debug:Ee=false,axis:H="y",scrollContainer:W,autoReverse:O=false,delay:z=0,strokeColor:L,strokeWidth:P,fillOpacity:x,waypoints:b,velocityScale:C=false,threshold:k=0,rootMargin:w="0px",repeat:g=0,repeatDelay:j=0,morphTo:N,clip:B,autoplay:X=false,duration:ie=1e3,native:le=true,onProgress:d,onStart:$,onComplete:y,onEnter:I,onLeave:A,onEnterBack:V,onLeaveBack:pe}=i,ne=B===true?"left":typeof B=="string"?B:false,xe=typeof p=="function"?p:Z[p]??Z.linear,$e=se(S.start??"top bottom"),He=se(S.end??"bottom top"),Se=typeof W=="string"?document.querySelector(W):W??null,Te=Array.isArray(L)?L[0]:null,ce=Array.isArray(L)?L[1]:typeof L=="string"?L:null,ue=Array.isArray(P)?P[0]:null,K=Array.isArray(P)?P[1]:typeof P=="number"?P:null,de=Array.isArray(x)?x[0]:null,oe=Array.isArray(x)?x[1]:typeof x=="number"?x:null;function Re(s){let c=s*100;switch(ne){case "right":return `inset(0 0 0 ${100-c}%)`;case "top":return `inset(0 0 ${100-c}% 0)`;case "bottom":return `inset(${100-c}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-c}% 0 0)`}}let G=ne?[]:Array.from(e.querySelectorAll(a)),F=[],l=[],f=0,ge=0,_=false,U=false,Y=0,Me=false,ye=-1,ae=-1,ee=false,he=0,Ie=0,Fe,rt=null;function ct(){rt?.destroy(),rt=null;}let Oe=new Set,ut=NaN,De=true,je=-1,mt=performance.now(),ze=NaN;function nt(){return Se?H==="x"?Se.scrollLeft:Se.scrollTop:H==="x"?window.scrollX:window.scrollY}function ft(){return Se?H==="x"?Se.clientWidth:Se.clientHeight:H==="x"?window.innerWidth:window.innerHeight}function pt(){let s=Ke(e,Se,H);return we(s,s.scroll,ft(),$e,He)}function dt(){(({tStart:f,tEnd:ge}=pt())),Ee&&Be&&(ct(),rt=tr(f,ge,H));}function ot(s,c=pt){Pe(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:c});let E=s.destroy;return s.destroy=()=>{E.call(s),Ce(e);},s}function qt(s,c){if(e.style.setProperty("--scroll-draw-progress",String(s)),ne){let E=c==="reverse"?1-s:s;e.style.clipPath=Re(E);return}G.forEach((E,me)=>{E.style.strokeDashoffset=c==="reverse"?`${F[me]*s}`:`${F[me]*(1-s)}`,m&&(E.style.opacity=c==="reverse"?`${1-s}`:`${s}`),Te&&ce?E.style.stroke=_e(Te,ce,s):ce&&(E.style.stroke=ce),ue!==null&&K!==null?E.style.strokeWidth=`${ue+(K-ue)*s}`:K!==null&&(E.style.strokeWidth=`${K}`),de!==null&&oe!==null?E.style.fillOpacity=`${de+(oe-de)*s}`:oe!==null&&(E.style.fillOpacity=`${oe}`),N&&E.tagName.toLowerCase()==="path"&&l[me]&&E.setAttribute("d",at(l[me],N,s));});}function Xe(){if(e.style.setProperty("--scroll-draw-progress","0"),ne){e.style.clipPath=Re(0);return}G.forEach((s,c)=>{s.style.strokeDasharray=`${F[c]}`,s.style.strokeDashoffset=M==="reverse"?"0":`${F[c]}`,m?s.style.opacity=M==="reverse"?"1":"0":s.style.opacity="",Te&&(s.style.stroke=Te),ue!==null&&(s.style.strokeWidth=`${ue}`),de!==null&&(s.style.fillOpacity=`${de}`),N&&s.tagName.toLowerCase()==="path"&&l[c]&&s.setAttribute("d",l[c]);});}if(G.forEach(s=>{er(s);let c=Ve(s);F.push(c);let E=s.tagName.toLowerCase()==="path";E?l.push(s.getAttribute("d")??""):l.push(""),N&&(E?rr(l[l.length-1],N,s):ve(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),o?(s.style.strokeDasharray=`${c}`,s.style.strokeDashoffset=M==="reverse"?`${c}`:"0",m&&(s.style.opacity="1"),ce&&(s.style.stroke=ce),K!==null&&(s.style.strokeWidth=`${K}`),oe!==null&&(s.style.fillOpacity=`${oe}`),N&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",N)):(s.style.strokeDasharray=`${c}`,s.style.strokeDashoffset=M==="reverse"?"0":`${c}`,m?s.style.opacity=M==="reverse"?"1":"0":s.style.opacity="",Te&&(s.style.stroke=Te),ue!==null&&(s.style.strokeWidth=`${ue}`),de!==null&&(s.style.fillOpacity=`${de}`));}),ne){if(o)return e.style.clipPath=Re(1),y?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=Re(0);}else if(o)return y?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let gt=typeof p=="string"?et(p):null;function Wt(){return !(le===false||!Kt()||!G.length||!gt||ne||H!=="y"||Se||u!==1||R!==0||re||O||C!==false||N||b||g||z>0||d||$||y||I||A||V||pe||L!=null||P!=null||x!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function Bt(){let s=++Jt,c=`svg-scroll-draw-${s}`,E=`svg-scroll-draw-host-${s}`,me=`--svg-scroll-draw-${s}`,Ne=M==="reverse"?"0":"var(--ssd-len)",ke=M==="reverse"?"var(--ssd-len)":"0",Le=`stroke-dashoffset:${Ne};`,T=`stroke-dashoffset:${ke};`;m&&(Le+=`opacity:${M==="reverse"?1:0};`,T+=`opacity:${M==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${c}{from{${Le}}to{${T}}}.${E}{view-timeline-name:${me};view-timeline-axis:block;}.${c}{animation-name:${c};animation-duration:auto;animation-timing-function:${gt};animation-fill-mode:both;animation-timeline:${me};animation-range:cover 0% cover 100%;}`,document.head.appendChild(D),e.classList.add(E);function fe(h,te){h.style.setProperty("--ssd-len",String(F[te])),h.style.strokeDasharray=`${F[te]}`,h.style.strokeDashoffset="",h.style.opacity="",h.style.animationPlayState="",h.classList.add(c);}G.forEach(fe);let v=false,q=-1;function Q(){if(q>=0)return q;let h=e.getBoundingClientRect(),{tStart:te,tEnd:Ae}=we({top:h.top,height:h.height},nt(),ft(),$e,He);return xe(J(nt(),te,Ae,u))}return {destroy(){e.classList.remove(E),G.forEach(h=>{h.classList.remove(c),h.style.removeProperty("--ssd-len"),h.style.animationPlayState="";}),D.remove();},replay(){v=false,q=-1,G.forEach(fe);},pause(){v=true,G.forEach(h=>{h.style.animationPlayState="paused";});},resume(){v&&(v=false,G.forEach(h=>{h.style.animationPlayState="running";}));},seek(h){let te=Math.min(1,Math.max(0,h));q=te,v=true,G.forEach((Ae,be)=>{Ae.classList.remove(c),Ae.style.strokeDashoffset=M==="reverse"?`${F[be]*te}`:`${F[be]*(1-te)}`,m&&(Ae.style.opacity=M==="reverse"?`${1-te}`:`${te}`);});},getProgress(){return Q()},refresh(){G.forEach((h,te)=>{F[te]=Ve(h),h.style.setProperty("--ssd-len",String(F[te])),h.style.strokeDasharray=`${F[te]}`;});}}}if(Wt())return ot(Bt());function Gt(){let s=Math.max(1,ie),c=0,E=0,me=false;function Ne(v){let q=true;if(ne){let Q=Math.min(1,Math.max(0,v/s)),h=xe(Q);he=h,e.style.setProperty("--scroll-draw-progress",String(h)),e.style.clipPath=Re(M==="reverse"?1-h:h),d?.(h),Q<1&&(q=false);}else G.forEach((Q,h)=>{let te=h*R*s,Ae=Math.min(1,Math.max(0,(v-te)/s)),be=xe(Ae);Q.style.strokeDashoffset=M==="reverse"?`${F[h]*be}`:`${F[h]*(1-be)}`,m&&(Q.style.opacity=M==="reverse"?`${1-be}`:`${be}`),Te&&ce?Q.style.stroke=_e(Te,ce,be):ce&&(Q.style.stroke=ce),ue!==null&&K!==null?Q.style.strokeWidth=`${ue+(K-ue)*be}`:K!==null&&(Q.style.strokeWidth=`${K}`),de!==null&&oe!==null?Q.style.fillOpacity=`${de+(oe-de)*be}`:oe!==null&&(Q.style.fillOpacity=`${oe}`),N&&Q.tagName.toLowerCase()==="path"&&l[h]&&Q.setAttribute("d",at(l[h],N,be)),h===0&&(he=be,d?.(be),e.style.setProperty("--scroll-draw-progress",String(be))),Ae<1&&(q=false);});if(b){let Q=Math.min(1,Math.max(0,v/s)),h=xe(Q);for(let te in b){let Ae=parseFloat(te);h>=Ae&&!Oe.has(Ae)&&(Oe.add(Ae),b[te]?.());}}return q}function ke(v){if(ee)return;let q=v-c;U||(U=true,$?.());let Q=Ne(q);if(Q&&!_){_=true,Ne(s*(1+Math.max(0,G.length-1)*R)),y?.(),Ie<(g==="infinite"?1/0:g??0)&&(Ie++,Fe=setTimeout(()=>{c=performance.now(),U=false,_=false,Oe.clear(),Xe(),Y=requestAnimationFrame(ke);},j));return}Q||(Y=requestAnimationFrame(ke));}function Le(){cancelAnimationFrame(Y),clearTimeout(Fe),c=performance.now(),E=0,ee=false,U=false,_=false,Ie=0,me=true,he=0,Oe.clear(),Xe(),Y=requestAnimationFrame(ke);}let T=new IntersectionObserver(v=>{v.forEach(q=>{q.isIntersecting&&!(re&&_)?Le():!q.isIntersecting&&!re&&!_&&(cancelAnimationFrame(Y),clearTimeout(Fe),me=false);});},{root:Se??null,threshold:k,rootMargin:w}),D;function fe(){clearTimeout(D),D=setTimeout(()=>{G.forEach((v,q)=>{F[q]=Ve(v),v.style.strokeDasharray=`${F[q]}`;});},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),z>0?setTimeout(()=>T.observe(e),z):T.observe(e),{destroy(){cancelAnimationFrame(Y),clearTimeout(Fe),T.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(D);},replay(){Ie=0,Le();},pause(){ee||!me||(ee=true,E=performance.now()-c,cancelAnimationFrame(Y));},resume(){ee&&(ee=false,me=true,c=performance.now()-E,Y=requestAnimationFrame(ke));},seek(v){let q=Math.min(1,Math.max(0,v));he=q,ee=true,E=q*s,c=performance.now()-E,cancelAnimationFrame(Y),Ne(E);},getProgress(){return he},refresh(){clearTimeout(D),G.forEach((v,q)=>{F[q]=Ve(v),v.style.strokeDasharray=`${F[q]}`;});}}}if(X)return ot(Gt());dt();function Ye(){if(!Me||ee)return;let s=performance.now(),c=nt();if(!De&&C===false&&c===ut){Y=requestAnimationFrame(Ye);return}De=false,ut=c;let E=u;if(C!==false){let T=s-mt,D=T>0?Math.abs(c-(je<0?c:je))/T:0;E=u*Math.max(.2,1+D*(typeof C=="number"?C:1)*.04);}je=c,mt=s;let me=O?ae===-1||c>=ae?"forward":"reverse":M;ae=c;let Ne=ge-f,ke=true,Le=Ne===0?0:(c-f)/Ne;if(isNaN(ze)||(ze<=0&&Le>0?I?.():ze>0&&Le<=0&&pe?.(),ze<1&&Le>=1?A?.():ze>=1&&Le<1&&V?.()),ze=Le,ne){let T=xe(J(c,f,ge,E));re&&!O&&(ye=Math.max(ye,T),T=ye),he=T,e.style.setProperty("--scroll-draw-progress",String(T));let D=me==="reverse"?1-T:T;e.style.clipPath=Re(D),d?.(T),!U&&J(c,f,ge,E)>0&&(U=true,$?.()),T>=1&&!_?(_=true,y?.(),Ie<(g==="infinite"?1/0:g??0)&&(Ie++,Fe=setTimeout(()=>{ye=-1,U=false,_=false,e.style.clipPath=Re(0);},j))):T<1&&!re&&(_=false),Y=requestAnimationFrame(Ye);return}if(G.forEach((T,D)=>{let fe=D*R*Ne,v=xe(J(c,f+fe,ge+fe,E));re&&!O&&(ye=Math.max(ye,v),v=ye),he=v,T.style.strokeDashoffset=me==="reverse"?`${F[D]*v}`:`${F[D]*(1-v)}`,m&&(T.style.opacity=me==="reverse"?`${1-v}`:`${v}`),Te&&ce?T.style.stroke=_e(Te,ce,v):ce&&(T.style.stroke=ce),ue!==null&&K!==null?T.style.strokeWidth=`${ue+(K-ue)*v}`:K!==null&&(T.style.strokeWidth=`${K}`),de!==null&&oe!==null?T.style.fillOpacity=`${de+(oe-de)*v}`:oe!==null&&(T.style.fillOpacity=`${oe}`),N&&T.tagName.toLowerCase()==="path"&&l[D]&&T.setAttribute("d",at(l[D],N,v)),D===0&&(d?.(v),e.style.setProperty("--scroll-draw-progress",String(v))),v<1&&(ke=false);}),b){let T=xe(J(c,f,ge,E));for(let D in b){let fe=parseFloat(D);T>=fe&&!Oe.has(fe)&&(Oe.add(fe),b[D]?.());}}!U&&J(c,f,ge,E)>0&&(U=true,$?.()),ke&&!_?(_=true,y?.(),Ie<(g==="infinite"?1/0:g??0)&&(Ie++,Fe=setTimeout(()=>{ye=-1,U=false,_=false,Oe.clear(),Xe(),De=true;},j))):!ke&&!re&&(_=false),Y=requestAnimationFrame(Ye);}let st=false;function Qe(){st||(st=true,Y=requestAnimationFrame(function(){Ye();}));}function Ze(){st=false,cancelAnimationFrame(Y);}let it=new IntersectionObserver(s=>{s.forEach(c=>{Me=c.isIntersecting,Me&&!ee?(De=true,Qe()):Ze();});},{root:Se??null,threshold:k,rootMargin:w});function yt(){G.forEach((s,c)=>{F[c]=Ve(s),s.style.strokeDasharray=`${F[c]}`;}),dt(),De=true;}let Je;function qe(){clearTimeout(Je),Je=setTimeout(yt,150);}window.addEventListener("resize",qe),window.addEventListener("orientationchange",qe);let We;return typeof ResizeObserver<"u"&&(We=new ResizeObserver(()=>qe()),We.observe(document.body),We.observe(document.documentElement),We.observe(e)),z>0?setTimeout(()=>it.observe(e),z):it.observe(e),ot({destroy(){cancelAnimationFrame(Y),clearTimeout(Fe),Ze(),it.disconnect(),We?.disconnect(),window.removeEventListener("resize",qe),window.removeEventListener("orientationchange",qe),clearTimeout(Je),ct();},replay(){ye=-1,ae=-1,je=-1,U=false,_=false,Ie=0,ee=false,he=0,Oe.clear(),clearTimeout(Fe),Xe(),De=true,Me&&Qe();},pause(){ee=true,Ze();},resume(){ee&&(ee=false,De=true,Me&&Qe());},seek(s){let c=Math.min(1,Math.max(0,s));he=c,ye=c,ee=true,Ze(),qt(c,M),De=true;},getProgress(){return he},refresh(){clearTimeout(Je),yt(),Me&&!ee&&Qe();}},()=>({tStart:f,tEnd:ge}))}function nr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function $t(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let i=[],o=[],a=t[2].trim();if(a)for(let u of a.split(/[\s,]+/)){let m=u.match(/^([-+]?[\d.eE]+)(.*)$/);i.push(m?parseFloat(m[1]):0),o.push(m?m[2]:"");}n.push({fn:t[1],nums:i,units:o});}return n}function or(e,n,r){let t=$t(e),i=$t(n);return t.length===0||t.length!==i.length?r<1?e:n:t.map((o,a)=>{let u=i[a];return o.fn!==u.fn||o.nums.length!==u.nums.length?r<1?`${o.fn}(${o.nums.map((m,p)=>`${m}${o.units[p]}`).join(", ")})`:`${u.fn}(${u.nums.map((m,p)=>`${m}${u.units[p]}`).join(", ")})`:`${o.fn}(${o.nums.map((m,p)=>`${m+(u.nums[p]-m)*r}${o.units[p]}`).join(", ")})`}).join(" ")}function Rt(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),i=String(n);if(nr(t))return _e(t,i,r);if(t.includes("("))return or(t,i,r);let o=t.match(/^([-+]?[\d.]+)(.*)$/),a=i.match(/^([-+]?[\d.]+)(.*)$/);if(o&&a){let u=parseFloat(o[1]),m=parseFloat(a[1]);return `${u+(m-u)*r}${o[2]||a[2]}`}return r<1?t:i}function sr(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var ir=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),ar=0,kt="--scroll-draw-progress";function lr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function It(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:t,trigger:i={},easing:o="ease-out",speed:a=1,once:u=false,axis:m="y",scrollContainer:p,native:S=true,velocityScale:R=false,respectReducedMotion:M=true,triggerElement:re,onProgress:Ee,onComplete:H,onEnter:W,onLeave:O,onEnterBack:z,onLeaveBack:L}=n,P=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,x=typeof o=="function"?o:Z[o]??Z["ease-out"],b=se(i.start??"top bottom"),C=se(i.end??"bottom top"),k=re??e,w=typeof p=="string"?document.querySelector(p):p??null,g=Object.entries(t).map(([l,f])=>({prop:sr(l),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function j(){let l=window.getComputedStyle(e);for(let f of g)f.from===""&&(f.from=l.getPropertyValue(f.prop).trim()||"0");}function N(){for(let l of g)e.style.setProperty(l.prop,String(l.to));}let B=new Map;for(let l of [...g.map(f=>f.prop),kt])B.set(l,e.style.getPropertyValue(l));function X(){for(let[l,f]of B)f?e.style.setProperty(l,f):e.style.removeProperty(l);}if(P)return N(),H?.(),{...r,destroy:X,getProgress:()=>1};j();let ie=typeof o=="string"?et(o):null;function le(){if(!S||!lr()||!ie||m!=="y"||w||k!==e||u||a!==1||Ee||H||W||O||z||L||R!==false||(i.start??"top bottom").trim()!=="top bottom"||(i.end??"bottom top").trim()!=="bottom top")return  false;for(let l of g)if(!ir.has(l.prop))return  false;return  true}function d(){let l=`ssd-a-${++ar}`,f=g.map(ae=>`${ae.prop}:${ae.from}`).join(";"),ge=g.map(ae=>`${ae.prop}:${ae.to}`).join(";"),_=document.createElement("style");_.setAttribute("data-ssd-animate",""),_.textContent=`@keyframes ${l}{from{${f}}to{${ge}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${ie};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(_),e.classList.add(l);let U=()=>m==="x"?window.scrollX:window.scrollY,Y=()=>m==="x"?window.innerWidth:window.innerHeight,Me=()=>{let ae=e.getBoundingClientRect();return we({top:ae.top,height:ae.height},U(),Y(),b,C)};Pe(e,{type:"animate",getProgress:()=>ye.getProgress(),getTrigger:Me});let ye={destroy(){e.classList.remove(l),_.remove(),e.style.animationPlayState="",X(),Ce(e);},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(ae){let ee=Math.min(1,Math.max(0,ae));e.classList.remove(l);for(let he of g)e.style.setProperty(he.prop,Rt(he.from,he.to,ee));},getProgress(){let{tStart:ae,tEnd:ee}=Me();return x(J(U(),ae,ee,a))}};return ye}if(le())return d();let $=0,y=0,I=0,A=false,V=false,pe=-1,ne=0,xe=false,$e=NaN,He=-1,Se=0,Te=()=>w?m==="x"?w.scrollLeft:w.scrollTop:m==="x"?window.scrollX:window.scrollY,ce=()=>w?m==="x"?w.clientWidth:w.clientHeight:m==="x"?window.innerWidth:window.innerHeight;function ue(){let l=Ke(k,w,m),f=we(l,l.scroll,ce(),b,C);$=f.tStart,y=f.tEnd;}function K(l){e.style.setProperty(kt,String(l));for(let f of g)e.style.setProperty(f.prop,Rt(f.from,f.to,l));Ee?.(l);}function de(l){if(isNaN($e)){$e=l;return}$e<=0&&l>0?W?.():$e>0&&l<=0&&L?.(),$e<1&&l>=1?O?.():$e>=1&&l<1&&z?.(),$e=l;}function oe(){if(!A||V)return;let l=performance.now(),f=Te(),ge=a;if(R!==false){let Y=l-Se,Me=Y>0?Math.abs(f-(He<0?f:He))/Y:0;ge=a*Math.max(.2,1+Me*(typeof R=="number"?R:1)*.04);}He=f,Se=l;let _=y===$?0:(f-$)/(y-$);de(_);let U=x(J(f,$,y,ge));u&&(pe=Math.max(pe,U),U=pe),ne=U,K(U),U>=1&&!xe?(xe=true,H?.()):U<1&&!u&&(xe=false),I=requestAnimationFrame(oe);}ue(),y===$&&ve("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let l=x(J(Te(),$,y,a));u&&l>0&&(pe=l),ne=l,K(l);}let Re=new IntersectionObserver(l=>{l.forEach(f=>{A=f.isIntersecting,A&&!V?I=requestAnimationFrame(oe):cancelAnimationFrame(I);});},{root:w??null}),G;function F(){clearTimeout(G),G=setTimeout(ue,150);}return window.addEventListener("resize",F),window.addEventListener("orientationchange",F),Re.observe(e),Pe(e,{type:"animate",getProgress:()=>ne,getTrigger:()=>({tStart:$,tEnd:y})}),{destroy(){cancelAnimationFrame(I),Re.disconnect(),window.removeEventListener("resize",F),window.removeEventListener("orientationchange",F),clearTimeout(G),X(),Ce(e);},replay(){pe=-1,xe=false,ne=0,V=false,K(0);},pause(){V=true,cancelAnimationFrame(I);},resume(){V&&(V=false,A&&(I=requestAnimationFrame(oe)));},seek(l){let f=Math.min(1,Math.max(0,l));ne=f,pe=f,V=true,cancelAnimationFrame(I),K(f);},getProgress(){return ne}}}var lt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Nt(e,n){if(typeof window>"u")return lt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return ve("scrollCounter: element not found:",e),lt;let t=r,{from:i=0,to:o,format:a,easing:u="ease-out",trigger:m={},once:p=true,decimals:S,onComplete:R}=n,M=S!==void 0?d=>d.toFixed(S):a??(d=>String(Math.round(d))),re=typeof u=="function"?u:Z[u]??Z["ease-out"],Ee=se(m.start??"top 80%"),H=se(m.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=M(o),R?.(),lt;let O=0,z=0,L=0,P=false,x=false,b=-1,C=0,k=false,w=()=>window.scrollY,g=()=>window.innerHeight;function j(){let d=t.getBoundingClientRect(),$=we({top:d.top,height:d.height},w(),g(),Ee,H);O=$.tStart,z=$.tEnd;}function N(d){t.textContent=M(i+(o-i)*d),t.style.setProperty("--scroll-draw-progress",String(d));}function B(){if(!P||x)return;let d=re(J(w(),O,z,1));p&&(b=Math.max(b,d),d=b),C=d,N(d),d>=1&&!k?(k=true,R?.()):d<1&&!p&&(k=false),L=requestAnimationFrame(B);}j();{let d=re(J(w(),O,z,1));p&&d>0&&(b=d),C=d,N(d);}let X=new IntersectionObserver(d=>{d.forEach($=>{P=$.isIntersecting,P&&!x?L=requestAnimationFrame(B):cancelAnimationFrame(L);});}),ie;function le(){clearTimeout(ie),ie=setTimeout(j,150);}return window.addEventListener("resize",le),window.addEventListener("orientationchange",le),X.observe(t),Pe(t,{type:"counter",getProgress:()=>C,getTrigger:()=>({tStart:O,tEnd:z})}),{destroy(){cancelAnimationFrame(L),X.disconnect(),window.removeEventListener("resize",le),window.removeEventListener("orientationchange",le),clearTimeout(ie),Ce(t);},replay(){b=-1,k=false,C=0,x=false,N(0);},pause(){x=true,cancelAnimationFrame(L);},resume(){x&&(x=false,P&&(L=requestAnimationFrame(B)));},seek(d){let $=Math.min(1,Math.max(0,d));C=$,b=$,x=true,cancelAnimationFrame(L),N($);},getProgress(){return C}}}var Ft={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ot(e,n={}){if(typeof window>"u")return Ft;let r=typeof e=="string"?document.querySelector(e):e;if(!r||r.tagName.toLowerCase()!=="video")return ve("scrollVideo: <video> element not found:",e),Ft;let t=r,{trigger:i={},easing:o="linear",once:a=false,axis:u="y",preload:m="auto",onReady:p,onComplete:S,onProgress:R}=n,M=window.matchMedia("(prefers-reduced-motion: reduce)").matches,re=typeof o=="function"?o:Z[o]??Z.linear,Ee=se(i.start??"top top"),H=se(i.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=m);let W=n.from??0,O=n.to,z=0,L=0,P=0,x=false,b=false,C=-1,k=0,w=false,g=false,j=()=>u==="x"?window.scrollX:window.scrollY,N=()=>u==="x"?window.innerWidth:window.innerHeight;function B(){let A=t.getBoundingClientRect(),V=u==="x"?A.left:A.top,pe=u==="x"?A.width:A.height,ne=we({top:V,height:pe},j(),N(),Ee,H);z=ne.tStart,L=ne.tEnd;}let X=NaN;function ie(A){if(!g)return;let V=O??t.duration??0,pe=W+(V-W)*A;pe!==X&&(X=pe,t.currentTime=pe),t.style.setProperty("--scroll-draw-progress",String(A)),R?.(A);}function le(){if(!x||b||!g||M)return;let A=re(J(j(),z,L,1));a&&(C=Math.max(C,A),A=C),k=A,ie(A),A>=1&&!w?(w=true,S?.()):A<1&&!a&&(w=false),P=requestAnimationFrame(le);}function d(){if(g=true,O===void 0&&(O=t.duration),M){ie(1),p?.();return}B(),p?.(),x&&!b&&(P=requestAnimationFrame(le));}t.readyState>=1?d():t.addEventListener("loadedmetadata",d,{once:true}),g||B();let $=new IntersectionObserver(A=>{A.forEach(V=>{x=V.isIntersecting,x&&!b&&g?P=requestAnimationFrame(le):cancelAnimationFrame(P);});}),y;function I(){clearTimeout(y),y=setTimeout(B,150);}return window.addEventListener("resize",I),window.addEventListener("orientationchange",I),$.observe(t),Pe(t,{type:"video",getProgress:()=>k,getTrigger:()=>({tStart:z,tEnd:L})}),{destroy(){cancelAnimationFrame(P),$.disconnect(),t.removeEventListener("loadedmetadata",d),window.removeEventListener("resize",I),window.removeEventListener("orientationchange",I),clearTimeout(y),Ce(t);},replay(){C=-1,w=false,k=0,b=false,X=NaN,ie(0);},pause(){b=true,cancelAnimationFrame(P);},resume(){b&&(b=false,x&&g&&(P=requestAnimationFrame(le)));},seek(A){let V=Math.min(1,Math.max(0,A));k=V,C=V,b=true,cancelAnimationFrame(P),X=NaN,ie(V);},getProgress(){return k}}}function zt(e){let n=e.textContent??"";return e.textContent="",n.split(/(\s+)/).filter(Boolean).map(r=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),/^\s+$/.test(r)?(t.textContent=r,t.style.whiteSpace="pre"):(t.textContent=r,t.style.display="inline-block"),e.appendChild(t),/^\s+$/.test(r)?null:t}).filter(r=>r!==null)}function cr(e){let n=e.textContent??"";return e.textContent="",n.split("").map(r=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),t.textContent=r,r===" "?t.style.whiteSpace="pre":t.style.display="inline-block",e.appendChild(t),r===" "?null:t}).filter(r=>r!==null)}function Dt(e){let n=zt(e),r=new Map;for(let o of n){let a=o.offsetTop;r.has(a)||r.set(a,[]),r.get(a).push(o);}let t=[],i=Array.from(r.keys()).sort((o,a)=>o-a);for(let o of i){let a=r.get(o),u=document.createElement("span");u.setAttribute("aria-hidden","true"),u.style.display="inline-block",a.forEach((m,p)=>{let S=m.nextElementSibling;u.appendChild(m),p<a.length-1&&S&&S.style.whiteSpace==="pre"&&u.appendChild(S);}),t.push(u);}return e.textContent="",t.forEach((o,a)=>{e.appendChild(o),a<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function ur(e,n,r,t){if(r<=1||t===0)return e;let i=(r-1)*t,o=n*t,a=o+(1-i);return a<=o?e>=o?1:0:Math.min(1,Math.max(0,(e-o)/(a-o)))}function mr(e,n){let r=[];if(n?.y!==void 0&&r.push(`translateY(${n.y*(1-e)}px)`),n?.x!==void 0&&r.push(`translateX(${n.x*(1-e)}px)`),n?.rotate!==void 0&&r.push(`rotate(${n.rotate*(1-e)}deg)`),n?.scale!==void 0){let t=n.scale+(1-n.scale)*e;r.push(`scale(${t})`);}return r.join(" ")||""}var Ht={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Vt(e,n={}){if(typeof window>"u")return Ht;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return ve("scrollText: element not found:",e),Ht;let t=r,{split:i="words",stagger:o=.04,easing:a="ease-out",from:u={opacity:0,y:24},trigger:m={},once:p=true,onComplete:S}=n,R=window.matchMedia("(prefers-reduced-motion: reduce)").matches,M=typeof a=="function"?a:Z[a]??Z["ease-out"],re=se(m.start??"top 85%"),Ee=se(m.end??"top 40%"),H=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let W;i==="chars"?W=cr(t):i==="lines"?W=Dt(t):W=zt(t);let O=W.length;function z(y,I){u?.opacity!==void 0&&(y.style.opacity=String(u.opacity+(1-u.opacity)*I));let A=mr(I,u);A&&(y.style.transform=A);}function L(y){t.style.setProperty("--scroll-draw-progress",String(y)),W.forEach((I,A)=>{let V=M(ur(y,A,O,o));z(I,V);});}if(R)return L(1),S?.(),{destroy(){t.innerHTML=H,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};L(0);let P=0,x=0,b=0,C=false,k=false,w=-1,g=0,j=false,N=()=>window.scrollY,B=()=>window.innerHeight;function X(){let y=t.getBoundingClientRect(),I=we({top:y.top,height:y.height},N(),B(),re,Ee);P=I.tStart,x=I.tEnd;}function ie(){if(!C||k)return;let y=J(N(),P,x,1);p&&(w=Math.max(w,y),y=w),g=y,L(y),y>=1&&!j?(j=true,S?.()):y<1&&!p&&(j=false),b=requestAnimationFrame(ie);}X();let le=new IntersectionObserver(y=>{y.forEach(I=>{C=I.isIntersecting,C&&!k?b=requestAnimationFrame(ie):cancelAnimationFrame(b);});}),d;function $(){clearTimeout(d),d=setTimeout(()=>{if(i==="lines"){let y=g;t.innerHTML=H,t.setAttribute("aria-label",t.textContent??""),W=Dt(t),L(y);}X();},150);}return window.addEventListener("resize",$),window.addEventListener("orientationchange",$),le.observe(t),Pe(t,{type:"text",getProgress:()=>g,getTrigger:()=>({tStart:P,tEnd:x})}),{destroy(){cancelAnimationFrame(b),le.disconnect(),window.removeEventListener("resize",$),window.removeEventListener("orientationchange",$),clearTimeout(d),t.innerHTML=H,t.removeAttribute("aria-label"),Ce(t);},replay(){w=-1,j=false,g=0,k=false,L(0);},pause(){k=true,cancelAnimationFrame(b);},resume(){k&&(k=false,C&&(b=requestAnimationFrame(ie)));},seek(y){let I=Math.min(1,Math.max(0,y));g=I,w=I,k=true,cancelAnimationFrame(b),L(I);},getProgress(){return g}}}function dr(e,n={}){let[r,t]=gr.useState(0),i=gr.useRef(n);i.current=n;let o=gr.useRef(-1);return gr.useEffect(()=>{if(typeof window>"u")return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){t(1);return}let a=typeof e=="string"?document.querySelector(e):e.current;if(!a)return;let u=a,{axis:m="y",scrollContainer:p,trigger:S={}}=i.current,R=typeof p=="string"?document.querySelector(p):p??null,M=se(S.start??"top bottom"),re=se(S.end??"bottom top"),Ee=0,H=0,W=false,O=0;function z(){return R?m==="x"?R.scrollLeft:R.scrollTop:m==="x"?window.scrollX:window.scrollY}function L(){return R?m==="x"?R.clientWidth:R.clientHeight:m==="x"?window.innerWidth:window.innerHeight}function P(){let w=u.getBoundingClientRect(),g=z(),j=m==="x"?w.left:w.top,N=m==="x"?w.width:w.height,B=we({top:j,height:N},g,L(),M,re);Ee=B.tStart,H=B.tEnd;}function x(){if(!W)return;let{speed:w=1,easing:g="linear",once:j=false}=i.current,N=typeof g=="function"?g:Z[g]??Z.linear,B=J(z(),Ee,H,w),X=N(B);j&&(o.current=Math.max(o.current,X),X=o.current),t(X),O=requestAnimationFrame(x);}let b=new IntersectionObserver(w=>{w.forEach(g=>{W=g.isIntersecting,W?O=requestAnimationFrame(x):cancelAnimationFrame(O);});},{root:R??null,threshold:0});P(),b.observe(u);let C;function k(){clearTimeout(C),C=setTimeout(P,150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),()=>{cancelAnimationFrame(O),clearTimeout(C),b.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k);}},[]),r}function bn({children:e,className:n,style:r,...t}){let i=gr.useRef(null);return gr.useEffect(()=>{if(!i.current)return;let o=Ct(i.current,t);return ()=>o.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:n,style:r,children:e})}function wn({children:e,className:n,style:r,...t}){let i=gr.useRef(null);return gr.useEffect(()=>{if(!i.current)return;let o=It(i.current,t);return ()=>o.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:n,style:r,children:e})}function vn({className:e,style:n,...r}){let t=gr.useRef(null);return gr.useEffect(()=>{if(!t.current)return;let i=Nt(t.current,r);return ()=>i.destroy()},[]),jsxRuntime.jsx("span",{ref:t,className:e,style:n})}function En({src:e,className:n,style:r,muted:t=true,playsInline:i=true,...o}){let a=gr.useRef(null);return gr.useEffect(()=>{if(!a.current)return;let u=Ot(a.current,o);return ()=>u.destroy()},[]),jsxRuntime.jsx("video",{ref:a,src:e,className:n,style:r,muted:t,playsInline:i,preload:"auto"})}function Sn({children:e,as:n="p",className:r,style:t,...i}){let o=gr.useRef(null);return gr.useEffect(()=>{if(!o.current)return;let a=Vt(o.current,i);return ()=>a.destroy()},[]),gr__default.default.createElement(n,{ref:o,className:r,style:t},e)}exports.ScrollAnimate=wn;exports.ScrollCounter=vn;exports.ScrollDraw=bn;exports.ScrollText=Sn;exports.ScrollVideo=En;exports.useScrollDrawProgress=dr;

package/dist/react/index.mjs

@@ -1 +1,2 @@
+"use client";
 import {a as a$3}from'../chunk-JC5BD4RB.mjs';import {a as a$4}from'../chunk-SNCRC6BA.mjs';import {a as a$2}from'../chunk-4MH5SQTH.mjs';import {a as a$1}from'../chunk-QJ4H2HW3.mjs';import {b}from'../chunk-WDIHLRZZ.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-YZV4Z3EQ.mjs';import {a,c,b as b$1}from'../chunk-PEFR3ZB7.mjs';import {d}from'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';import J,{useState,useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';function G(t,o={}){let[s,r]=useState(0),e=useRef(o);e.current=o;let n=useRef(-1);return useEffect(()=>{if(typeof window>"u")return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){r(1);return}let i=typeof t=="string"?document.querySelector(t):t.current;if(!i)return;let f=i,{axis:u="y",scrollContainer:w,trigger:b={}}=e.current,c$1=typeof w=="string"?document.querySelector(w):w??null,k=a(b.start??"top bottom"),W=a(b.end??"bottom top"),C=0,O=0,E=false,d$1=0;function N(){return c$1?u==="x"?c$1.scrollLeft:c$1.scrollTop:u==="x"?window.scrollX:window.scrollY}function X(){return c$1?u==="x"?c$1.clientWidth:c$1.clientHeight:u==="x"?window.innerWidth:window.innerHeight}function D(){let l=f.getBoundingClientRect(),a=N(),P=u==="x"?l.left:l.top,T=u==="x"?l.width:l.height,S=c({top:P,height:T},a,X(),k,W);C=S.tStart,O=S.tEnd;}function A(){if(!E)return;let{speed:l=1,easing:a="linear",once:P=false}=e.current,T=typeof a=="function"?a:d[a]??d.linear,S=b$1(N(),C,O,l),h=T(S);P&&(n.current=Math.max(n.current,h),h=n.current),r(h),d$1=requestAnimationFrame(A);}let L=new IntersectionObserver(l=>{l.forEach(a=>{E=a.isIntersecting,E?d$1=requestAnimationFrame(A):cancelAnimationFrame(d$1);});},{root:c$1??null,threshold:0});D(),L.observe(f);let x;function g(){clearTimeout(x),x=setTimeout(D,150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),()=>{cancelAnimationFrame(d$1),clearTimeout(x),L.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g);}},[]),s}function oe({children:t,className:o,style:s,...r}){let e=useRef(null);return useEffect(()=>{if(!e.current)return;let n=b(e.current,r);return ()=>n.destroy()},[]),jsx("div",{ref:e,className:o,style:s,children:t})}function se({children:t,className:o,style:s,...r}){let e=useRef(null);return useEffect(()=>{if(!e.current)return;let n=a$1(e.current,r);return ()=>n.destroy()},[]),jsx("div",{ref:e,className:o,style:s,children:t})}function ie({className:t,style:o,...s}){let r=useRef(null);return useEffect(()=>{if(!r.current)return;let e=a$2(r.current,s);return ()=>e.destroy()},[]),jsx("span",{ref:r,className:t,style:o})}function le({src:t,className:o,style:s,muted:r=true,playsInline:e=true,...n}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let f=a$3(i.current,n);return ()=>f.destroy()},[]),jsx("video",{ref:i,src:t,className:o,style:s,muted:r,playsInline:e,preload:"auto"})}function ce({children:t,as:o="p",className:s,style:r,...e}){let n=useRef(null);return useEffect(()=>{if(!n.current)return;let i=a$4(n.current,e);return ()=>i.destroy()},[]),J.createElement(o,{ref:n,className:s,style:r},t)}export{se as ScrollAnimate,ie as ScrollCounter,oe as ScrollDraw,ce as ScrollText,le as ScrollVideo,G as useScrollDrawProgress};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.16.0",
+  "version": "2.16.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",