svg-scroll-draw 1.4.0 → 1.6.0

package/dist/cli/init.js

@@ -0,0 +1,211 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli/init.ts
+var readline = __toESM(require("readline"));
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var RESET = "\x1B[0m";
+var BOLD = "\x1B[1m";
+var DIM = "\x1B[2m";
+var PINK = "\x1B[35m";
+var GREEN = "\x1B[32m";
+var CYAN = "\x1B[36m";
+var rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+function ask(question, fallback) {
+  return new Promise(
+    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question} ${DIM}(${fallback})${RESET} `, (ans) => {
+      resolve(ans.trim() || fallback);
+    })
+  );
+}
+function pick(question, options, fallback) {
+  const opts = options.map((o, i) => `${DIM}${i + 1})${RESET} ${o}`).join("  ");
+  return new Promise(
+    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question}
+     ${opts}
+     ${DIM}(${fallback})${RESET} `, (ans) => {
+      const idx = parseInt(ans) - 1;
+      resolve(idx >= 0 && idx < options.length ? options[idx] : fallback);
+    })
+  );
+}
+var SAMPLE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
+    <path
+      d="M10 50 C 40 10, 80 10, 100 50 S 160 90, 190 50"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      fill="none"
+    />
+  </svg>`;
+function genReact(selector, easing, preset) {
+  const presetProp = preset !== "none" ? `
+      preset="${preset}"` : "";
+  const easingProp = preset !== "none" ? "" : `
+      easing="${easing}"`;
+  return `'use client';
+import { ScrollDraw } from 'svg-scroll-draw/react';
+
+export function AnimatedSVG() {
+  return (
+    <ScrollDraw${presetProp}${easingProp}
+      fade
+      once
+    >
+      ${SAMPLE_SVG}
+    </ScrollDraw>
+  );
+}
+`;
+}
+function genVue(selector, easing, preset) {
+  const opts = preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}', fade: true, once: true`;
+  return `<script setup>
+import { useScrollDraw } from 'svg-scroll-draw/vue';
+
+const { ref } = useScrollDraw({
+  ${opts},
+});
+</script>
+
+<template>
+  <div :ref="ref">
+    ${SAMPLE_SVG}
+  </div>
+</template>
+`;
+}
+function genSvelte(selector, easing, preset) {
+  const opts = preset !== "none" ? `{ preset: '${preset}' }` : `{ easing: '${easing}', fade: true, once: true }`;
+  return `<script>
+  import { scrollDraw } from 'svg-scroll-draw/svelte';
+</script>
+
+<div use:scrollDraw={${opts}}>
+  ${SAMPLE_SVG}
+</div>
+`;
+}
+function genSolid(selector, easing, preset) {
+  const opts = preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}', fade: true, once: true`;
+  return `import { createScrollDraw } from 'svg-scroll-draw/solid';
+
+export function AnimatedSVG() {
+  const { ref } = createScrollDraw({
+    ${opts},
+  });
+
+  return (
+    <div ref={ref}>
+      ${SAMPLE_SVG}
+    </div>
+  );
+}
+`;
+}
+function genVanilla(selector, easing, preset) {
+  const opts = preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}',
+  fade: true,
+  once: true`;
+  return `import { scrollDraw } from 'svg-scroll-draw';
+
+scrollDraw('${selector}', {
+  ${opts},
+});
+`;
+}
+var GENERATORS = {
+  react: genReact,
+  vue: genVue,
+  svelte: genSvelte,
+  solid: genSolid,
+  vanilla: genVanilla
+};
+var FILE_NAMES = {
+  react: "ScrollDraw.tsx",
+  vue: "ScrollDraw.vue",
+  svelte: "ScrollDraw.svelte",
+  solid: "ScrollDraw.tsx",
+  vanilla: "scroll-draw.js"
+};
+async function main() {
+  console.log(`
+ ${BOLD}${PINK}svg-scroll-draw${RESET} ${DIM}init${RESET}
+`);
+  console.log(` ${DIM}Generates a starter file for your framework.${RESET}
+`);
+  const framework = await pick(
+    "Framework?",
+    ["react", "vue", "svelte", "solid", "vanilla"],
+    "react"
+  );
+  const preset = await pick(
+    "Preset?",
+    ["none", "sketch", "reveal", "typewriter", "cinematic", "spring"],
+    "none"
+  );
+  let easing = "ease-out";
+  if (preset === "none") {
+    easing = await pick(
+      "Easing?",
+      ["ease-out", "ease-in", "ease-in-out", "linear", "spring", "bounce"],
+      "ease-out"
+    );
+  }
+  const selector = await ask("CSS selector for your SVG container?", "#my-svg");
+  const outFile = FILE_NAMES[framework] ?? "scroll-draw.js";
+  const outPath = path.join(process.cwd(), outFile);
+  if (fs.existsSync(outPath)) {
+    const overwrite = await ask(`${outFile} already exists. Overwrite?`, "y");
+    if (overwrite.toLowerCase() !== "y") {
+      console.log(`
+ ${DIM}Aborted.${RESET}
+`);
+      rl.close();
+      return;
+    }
+  }
+  const code = GENERATORS[framework]?.(selector, easing, preset) ?? "";
+  fs.writeFileSync(outPath, code, "utf8");
+  console.log(`
+ ${GREEN}\u2713${RESET} ${BOLD}${outFile}${RESET} created.
+`);
+  console.log(` ${DIM}Next steps:${RESET}`);
+  console.log(`   npm i svg-scroll-draw`);
+  if (framework === "vanilla") {
+    console.log(`   Add your SVG to the DOM and call scrollDraw('${selector}', ...)`);
+  } else {
+    console.log(`   Import ${outFile.replace(/\.\w+$/, "")} and drop it into your page.`);
+  }
+  console.log(`
+   ${DIM}Docs: https://svg-scroll-draw.vercel.app/docs${RESET}
+`);
+  rl.close();
+}
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/dist/group/index.cjs

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

package/dist/group/index.d.mts

@@ -1,9 +1,20 @@
 type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
 }
 interface ScrollDrawOptions {
+    /**
+     * Apply a named preset as the base configuration. User-supplied options
+     * always override the preset. Available presets:
+     * - `'sketch'`     — staggered ease-in draw, pencil feel
+     * - `'reveal'`     — fade + ease-out, draws once on viewport entry
+     * - `'typewriter'` — fast linear draw with stagger
+     * - `'cinematic'`  — slow ease-in-out with fade, dramatic entrance
+     * - `'spring'`     — spring easing, bouncy organic feel
+     */
+    preset?: PresetName;
     selector?: string;
     speed?: number;
     fade?: boolean;

package/dist/group/index.d.ts

@@ -1,9 +1,20 @@
 type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
 }
 interface ScrollDrawOptions {
+    /**
+     * Apply a named preset as the base configuration. User-supplied options
+     * always override the preset. Available presets:
+     * - `'sketch'`     — staggered ease-in draw, pencil feel
+     * - `'reveal'`     — fade + ease-out, draws once on viewport entry
+     * - `'typewriter'` — fast linear draw with stagger
+     * - `'cinematic'`  — slow ease-in-out with fade, dramatic entrance
+     * - `'spring'`     — spring easing, bouncy organic feel
+     */
+    preset?: PresetName;
     selector?: string;
     speed?: number;
     fade?: boolean;

package/dist/group/index.mjs

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

package/dist/index.cjs

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

package/dist/index.d.mts

@@ -1,9 +1,20 @@
 type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+type PresetName$1 = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
 }
 interface ScrollDrawOptions {
+    /**
+     * Apply a named preset as the base configuration. User-supplied options
+     * always override the preset. Available presets:
+     * - `'sketch'`     — staggered ease-in draw, pencil feel
+     * - `'reveal'`     — fade + ease-out, draws once on viewport entry
+     * - `'typewriter'` — fast linear draw with stagger
+     * - `'cinematic'`  — slow ease-in-out with fade, dramatic entrance
+     * - `'spring'`     — spring easing, bouncy organic feel
+     */
+    preset?: PresetName$1;
     selector?: string;
     speed?: number;
     fade?: boolean;
@@ -108,6 +119,17 @@ interface ScrollDrawInstance {
     getProgress: () => number;
 }
 
+type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
+/**
+ * Named option bags for common scroll-draw patterns.
+ * User options always override preset values.
+ *
+ * @example
+ * scrollDraw('#logo', { preset: 'reveal' });
+ * scrollDraw('#logo', { preset: 'sketch', easing: 'ease-out' }); // easing overrides preset
+ */
+declare const PRESETS: Record<PresetName, Partial<Omit<ScrollDrawOptions, 'preset'>>>;
+
 /**
  * Returns a custom spring easing function.
  * - `tension` controls oscillation frequency (default 2.5 — higher = more bouncy)
@@ -223,4 +245,4 @@ declare class Cinematic {
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-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 };
+export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, PRESETS, type PresetName$1 as PresetName, type ScrollDrawInstance, type ScrollDrawOptions, type Story, type StoryAnimation, type StoryEasing, type StoryScene, createBounce, createElastic, createSpring, scrollDraw };