svg-scroll-draw 1.2.0 → 1.4.0

package/dist/cinematic/index.d.mts

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

package/dist/cinematic/index.d.ts

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

package/dist/cinematic/index.mjs

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

package/dist/group/index.cjs

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

package/dist/group/index.d.mts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/group/index.d.ts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/group/index.mjs

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

package/dist/index.cjs

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

package/dist/index.d.mts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -131,6 +150,77 @@ declare function createElastic({ amplitude, period, }?: {
     period?: number;
 }): (t: number) => number;
 
+type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+/** A traced path that strokes itself on across a scroll range. */
+interface DrawAnimation {
+    type: 'draw';
+    /** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
+    target: string;
+    /** SVG path data, in canvas coordinates. */
+    d: string;
+    /** Pre-measured total path length (px). */
+    length: number;
+    /** Scroll progress where the draw begins, e.g. "20%". */
+    start: string;
+    /** Scroll progress where the draw completes, e.g. "50%". */
+    end: string;
+    stroke: string;
+    strokeWidth: number;
+    easing: StoryEasing;
+}
+/** Any layer fading opacity across a scroll range. */
+interface FadeAnimation {
+    type: 'fade';
+    target: string;
+    start: string;
+    end: string;
+    from: number;
+    to: number;
+}
+type StoryAnimation = DrawAnimation | FadeAnimation;
+interface StoryScene {
+    id: string;
+    /** Optional background layer (a product photo) as a data URL or remote URL. */
+    background?: string;
+    animations: StoryAnimation[];
+}
+interface Story {
+    version: 1;
+    /** Total scroll height of the experience, e.g. "400vh". */
+    totalHeight: string;
+    /** The authoring viewBox the coordinates are expressed in. */
+    canvas: {
+        width: number;
+        height: number;
+    };
+    scenes: StoryScene[];
+}
+
+interface CinematicOptions {
+    /** Mount point — a selector or element. Becomes the scroll wrapper. */
+    wrapper: string | HTMLElement;
+}
+interface CinematicInstance {
+    /** Stop the scroll loop and detach observers (built DOM is left in place). */
+    destroy: () => void;
+    /** Current global scroll progress through the story (0–1). */
+    getProgress: () => number;
+}
+/**
+ * The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
+ * a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
+ * the user scrolls, all driven off the wrapper's scroll progress.
+ *
+ *   import { Cinematic } from "svg-scroll-draw";
+ *   import story from "./story.json";
+ *   new Cinematic({ wrapper: "#app" }).loadStory(story);
+ */
+declare class Cinematic {
+    private mount;
+    constructor(options: CinematicOptions);
+    loadStory(story: Story): CinematicInstance;
+}
+
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };
+export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type ScrollDrawInstance, type ScrollDrawOptions, type Story, type StoryAnimation, type StoryEasing, type StoryScene, createBounce, createElastic, createSpring, scrollDraw };