svg-scroll-draw 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,178 @@
+# svg-scroll-draw
+
+[![npm](https://img.shields.io/npm/v/svg-scroll-draw)](https://www.npmjs.com/package/svg-scroll-draw)
+[![downloads](https://img.shields.io/npm/dw/svg-scroll-draw)](https://www.npmjs.com/package/svg-scroll-draw)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/svg-scroll-draw)](https://bundlephobia.com/package/svg-scroll-draw)
+[![license](https://img.shields.io/npm/l/svg-scroll-draw)](./LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/DhruvilChauahan0210/ink-scroll?style=flat)](https://github.com/DhruvilChauahan0210/ink-scroll/stargazers)
+
+> Scroll-driven SVG path animation. Zero dependencies. Under 3KB gzipped.
+
+**[Live Demo](https://ink-scroll.vercel.app)** · [npm](https://www.npmjs.com/package/svg-scroll-draw) · [Report a bug](https://github.com/DhruvilChauahan0210/ink-scroll/issues)
+
+![svg-scroll-draw demo](https://raw.githubusercontent.com/DhruvilChauahan0210/ink-scroll/main/demo.gif)
+
+---
+
+## Install
+
+```bash
+npm i svg-scroll-draw
+# or
+pnpm add svg-scroll-draw
+# or
+yarn add svg-scroll-draw
+# or
+bun add svg-scroll-draw
+```
+
+---
+
+## Why this exists
+
+The `stroke-dashoffset` trick for drawing SVG lines on scroll is well-known — but every existing tool that implements it is broken in a different way:
+
+| Tool | Problem |
+|---|---|
+| **GSAP DrawSVG** | 40KB+, requires a paid Club GreenSock license for commercial use |
+| **Framer Motion** | 35KB+, React-only, heavy runtime for a single animation effect |
+| **scroll-svg** | ~2KB but abandoned — forces you to target individual path IDs manually, crashes in Next.js |
+
+`svg-scroll-draw` fixes all three pain points in one package.
+
+---
+
+## Quick start
+
+### Vanilla JS
+
+```js
+import { scrollDraw } from 'svg-scroll-draw';
+
+const instance = scrollDraw('#my-svg-container', {
+  easing: 'ease-out',
+  speed: 1.2,
+});
+
+// Clean up on SPA navigation / unmount
+instance.destroy();
+```
+
+**[Try it on StackBlitz →](https://stackblitz.com/edit/svg-scroll-draw-vanilla)**
+
+### React / Next.js
+
+```tsx
+import { ScrollDraw } from 'svg-scroll-draw/react';
+
+export default function Hero() {
+  return (
+    <ScrollDraw speed={1.2} fade easing="ease-out">
+      <svg width="500" height="500" viewBox="0 0 500 500">
+        <path d="M10 80 C 40 10, 60 10, 95 80" stroke="black" fill="none" />
+      </svg>
+    </ScrollDraw>
+  );
+}
+```
+
+> **Next.js App Router:** add `'use client'` to any component that uses `ScrollDraw`.
+
+**[Try it on StackBlitz →](https://stackblitz.com/edit/svg-scroll-draw-react)**
+
+### Vue 3
+
+```vue
+<script setup>
+import { ScrollDraw } from 'svg-scroll-draw/vue';
+</script>
+
+<template>
+  <ScrollDraw easing="ease-out" :speed="1.2">
+    <svg>...</svg>
+  </ScrollDraw>
+</template>
+```
+
+Or use the composable directly:
+
+```ts
+import { useScrollDraw } from 'svg-scroll-draw/vue';
+
+const containerRef = useScrollDraw({ easing: 'ease-out', speed: 1.2 });
+```
+
+**[Try it on StackBlitz →](https://stackblitz.com/edit/svg-scroll-draw-vue)**
+
+### CDN / Web Component
+
+```html
+<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/svg-scroll-draw.global.js"></script>
+
+<!-- Web Component (auto-registered) -->
+<scroll-draw easing="ease-out" speed="1.2">
+  <svg>...</svg>
+</scroll-draw>
+
+<!-- Or vanilla JS API -->
+<script>
+  SvgScrollDraw.scrollDraw('#my-container', { easing: 'ease-out' });
+</script>
+```
+
+---
+
+## Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `selector` | `string` | `"path, polyline, line, polygon, rect, circle"` | CSS selector for child elements to animate |
+| `speed` | `number` | `1` | Scale factor — values above 1 complete faster relative to scroll distance |
+| `fade` | `boolean` | `false` | Simultaneously animate `opacity 0 → 1` while drawing |
+| `easing` | `string \| fn` | `"linear"` | `linear`, `ease-in`, `ease-out`, `ease-in-out`, or a custom `(t: number) => number` |
+| `stagger` | `number` | `0` | Normalized offset between each path starting. `0.15` = each path begins 15% of the scroll range after the previous |
+| `direction` | `"forward" \| "reverse"` | `"forward"` | `reverse` starts fully drawn and erases as you scroll |
+| `trigger.start` | `string` | `"top bottom"` | When animation begins. Accepts anchor strings (`"top bottom"`) or viewport percentages (`"20%"`) |
+| `trigger.end` | `string` | `"bottom top"` | When animation ends |
+| `onProgress` | `(alpha: number) => void` | — | Called every animation frame with current draw progress (0–1) |
+| `onComplete` | `() => void` | — | Fires once when all paths reach 100% draw progress |
+
+### Trigger anchors
+
+```js
+scrollDraw('#logo', {
+  trigger: {
+    start: 'top bottom',  // when top of element hits bottom of viewport
+    end: 'bottom top',    // when bottom of element hits top of viewport
+  }
+});
+
+// Or use viewport percentages
+scrollDraw('#logo', {
+  trigger: { start: '20%', end: '80%' }
+});
+```
+
+Available named anchors: `top`, `center`, `bottom`.
+
+---
+
+## Bundle sizes
+
+| Format | Size |
+|---|---|
+| ESM (`.mjs`) | ~3.2 KB |
+| CJS (`.cjs`) | ~3.2 KB |
+| IIFE / CDN (`.global.js`) | ~4.2 KB (includes Web Component) |
+
+---
+
+## Browser support
+
+Chrome 80+, Safari 14+, Firefox 75+, Edge 80+
+
+---
+
+## License
+
+MIT

package/dist/cdn/svg-scroll-draw.global.js

@@ -1 +1,8 @@
-"use strict";var SvgScrollDraw=(()=>{var A=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var J=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var r in t)A(e,r,{get:t[r],enumerable:!0})},Q=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of j(t))!J.call(e,o)&&o!==r&&A(e,o,{get:()=>t[o],enumerable:!(n=_(t,o))||n.enumerable});return e};var U=e=>Q(A({},"__esModule",{value:!0}),e);var Z={};K(Z,{scrollDraw:()=>Y});var D={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};function x(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return{element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[n="top",o="bottom"]=r;return{element:n,viewport:o}}function C(e,t,r,n){switch(n){case"top":return e+r;case"center":return e+r+t/2;case"bottom":return e+r+t;default:return e+r}}function G(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function I(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function W(e,t,r){return Math.min(r,Math.max(t,e))}function V(e,t,r,n){return r===t?0:W((e-t)/(r-t)*n,0,1)}function N(e,t,r,n,o){let a=C(e.top,e.height,t,n.element)-G(n.viewport,r),c=C(e.top,e.height,t,o.element)-G(o.viewport,r);return{tStart:a,tEnd:c}}function q(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t)}function X(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?q("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&q("Element has a fill \u2014 it may obscure the stroke animation.",e)}function w(e,t={}){if(typeof window>"u")return{destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:n=1,fade:o=!1,easing:a="linear",trigger:c={},stagger:m=0,direction:p="forward",onProgress:z,onComplete:M}=t,P=typeof a=="function"?a:D[a]??D.linear,R=x(c.start??"top bottom"),B=x(c.end??"bottom top"),b=Array.from(e.querySelectorAll(r)),u=[],h=0,y=0,E=!1,f=0,v=!1;function k(){let s=e.getBoundingClientRect(),i=N({top:s.top,height:s.height},window.scrollY,window.innerHeight,R,B);h=i.tStart,y=i.tEnd}b.forEach(s=>{X(s);let i=I(s);u.push(i),s.style.strokeDasharray=`${i}`,s.style.strokeDashoffset=p==="reverse"?"0":`${i}`,o&&(s.style.opacity=p==="reverse"?"1":"0")}),k();function F(){if(!v)return;let s=y-h,i=!0;b.forEach(($,g)=>{let L=g*m*s,l=P(V(window.scrollY,h+L,y+L,n));$.style.strokeDashoffset=p==="reverse"?`${u[g]*l}`:`${u[g]*(1-l)}`,o&&($.style.opacity=p==="reverse"?`${1-l}`:`${l}`),g===0&&z?.(l),l<1&&(i=!1)}),i&&!E?(E=!0,M?.()):i||(E=!1),f=requestAnimationFrame(F)}let O=new IntersectionObserver(s=>{s.forEach(i=>{v=i.isIntersecting,v?f=requestAnimationFrame(F):cancelAnimationFrame(f)})});O.observe(e);let S;function d(){clearTimeout(S),S=setTimeout(()=>{b.forEach((s,i)=>{u[i]=I(s),s.style.strokeDasharray=`${u[i]}`}),k()},150)}return window.addEventListener("resize",d),window.addEventListener("orientationchange",d),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",d),window.removeEventListener("orientationchange",d),clearTimeout(S)}}}function Y(e,t){if(typeof window>"u")return{destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?w(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}var T=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let r={},n=this.getAttribute("speed"),o=this.getAttribute("easing"),a=this.getAttribute("stagger"),c=this.getAttribute("direction"),m=this.getAttribute("selector");n&&(r.speed=parseFloat(n)),o&&(r.easing=o),a&&(r.stagger=parseFloat(a)),c&&(r.direction=c),m&&(r.selector=m),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=w(this,r)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",T);return U(Z);})();
+"use strict";var SvgScrollDraw=(()=>{var I=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var oe=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var r in t)I(e,r,{get:t[r],enumerable:!0})},ie=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ne(t))!oe.call(e,i)&&i!==r&&I(e,i,{get:()=>t[i],enumerable:!(o=re(t,i))||o.enumerable});return e};var ae=e=>ie(I({},"__esModule",{value:!0}),e);var fe={};se(fe,{scrollDraw:()=>pe});var M={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)};function L(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return{element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return{element:o,viewport:i}}function X(e,t,r,o){switch(o){case"top":return e+r;case"center":return e+r+t/2;case"bottom":return e+r+t;default:return e+r}}function B(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function F(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ce(e,t,r){return Math.min(r,Math.max(t,e))}function P(e,t,r,o){return r===t?0:ce((e-t)/(r-t)*o,0,1)}function _(e,t,r,o,i){let c=X(e.top,e.height,t,o.element)-B(o.viewport,r),a=X(e.top,e.height,t,i.element)-B(i.viewport,r);return{tStart:c,tEnd:a}}function H(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t)}function le(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?H("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&H("Element has a fill \u2014 it may obscure the stroke animation.",e)}function ue(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let a=r==="x"?window.scrollX:window.scrollY,u=e-a,b=t-a,l=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${l?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${l?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:!0}),i(),o}function S(e,t={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:c=!1,easing:a="linear",trigger:u={},stagger:b=0,direction:l="forward",once:C=!1,debug:W=!1,axis:d="y",onProgress:j,onStart:J,onComplete:G}=t,K=typeof a=="function"?a:M[a]??M.linear,Q=L(u.start??"top bottom"),U=L(u.end??"bottom top"),h=Array.from(e.querySelectorAll(o)),f=[],m=0,g=0,w=!1,D=!1,y=0,A=!1,v=-1,$=null;function k(){return d==="x"?window.scrollX:window.scrollY}function Y(){return d==="x"?window.innerWidth:window.innerHeight}function Z(n){return d==="x"?n.left:n.top}function ee(n){return d==="x"?n.width:n.height}function V(){let n=e.getBoundingClientRect(),s=_({top:Z(n),height:ee(n)},k(),Y(),Q,U);m=s.tStart,g=s.tEnd,W&&process.env.NODE_ENV!=="production"&&($?.remove(),$=ue(m,g,d))}function te(){h.forEach((n,s)=>{n.style.strokeDasharray=`${f[s]}`,n.style.strokeDashoffset=l==="reverse"?"0":`${f[s]}`,c?n.style.opacity=l==="reverse"?"1":"0":n.style.opacity=""})}if(h.forEach(n=>{le(n);let s=F(n);f.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=l==="reverse"?`${s}`:"0",c&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=l==="reverse"?"0":`${s}`,c&&(n.style.opacity=l==="reverse"?"1":"0"))}),r)return G?.(),{destroy:()=>{},replay:()=>{}};V();function N(){if(!A)return;let n=g-m,s=!0;h.forEach((O,x)=>{let q=x*b*n,p=K(P(k(),m+q,g+q,i));C&&(v=Math.max(v,p),p=v),O.style.strokeDashoffset=l==="reverse"?`${f[x]*p}`:`${f[x]*(1-p)}`,c&&(O.style.opacity=l==="reverse"?`${1-p}`:`${p}`),x===0&&j?.(p),p<1&&(s=!1)}),D||P(k(),m,g,i)>0&&(D=!0,J?.()),s&&!w?(w=!0,G?.()):!s&&!C&&(w=!1),y=requestAnimationFrame(N)}let R=new IntersectionObserver(n=>{n.forEach(s=>{A=s.isIntersecting,A?y=requestAnimationFrame(N):cancelAnimationFrame(y)})});R.observe(e);let T;function E(){clearTimeout(T),T=setTimeout(()=>{h.forEach((n,s)=>{f[s]=F(n),n.style.strokeDasharray=`${f[s]}`}),V()},150)}return window.addEventListener("resize",E),window.addEventListener("orientationchange",E),{destroy(){cancelAnimationFrame(y),R.disconnect(),window.removeEventListener("resize",E),window.removeEventListener("orientationchange",E),clearTimeout(T),$?.remove()},replay(){v=-1,D=!1,w=!1,te()}}}function pe(e,t){let r={destroy:()=>{},replay:()=>{}};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?S(o,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}var z=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let r={},o=this.getAttribute("speed"),i=this.getAttribute("easing"),c=this.getAttribute("stagger"),a=this.getAttribute("direction"),u=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),i&&(r.easing=i),c&&(r.stagger=parseFloat(c)),a&&(r.direction=a),u&&(r.selector=u),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=S(this,r)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",z);return ae(fe);})();

package/dist/index.cjs

@@ -1 +1,8 @@
-'use strict';var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function k(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function F(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function M(e,t,r){return Math.min(r,Math.max(t,e))}function L(e,t,r,s){return r===t?0:M((e-t)/(r-t)*s,0,1)}function G(e,t,r,s,i){let c=k(e.top,e.height,t,s.element)-F(s.viewport,r),u=k(e.top,e.height,t,i.element)-F(i.viewport,r);return {tStart:c,tEnd:u}}function O(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?O("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&O("Element has a fill \u2014 it may obscure the stroke animation.",e);}function V(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:c="linear",trigger:u={},stagger:C=0,direction:m="forward",onProgress:N,onComplete:q}=t,z=typeof c=="function"?c:v[c]??v.linear,P=S(u.start??"top bottom"),R=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=G({top:n.top,height:n.height},window.scrollY,window.innerHeight,P,R);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function x(){if(!y)return;let n=b-w,o=true;d.forEach((I,g)=>{let $=g*C*n,a=z(L(window.scrollY,w+$,b+$,s));I.style.strokeDashoffset=m==="reverse"?`${l[g]*a}`:`${l[g]*(1-a)}`,i&&(I.style.opacity=m==="reverse"?`${1-a}`:`${a}`),g===0&&N?.(a),a<1&&(o=false);}),o&&!h?(h=true,q?.()):o||(h=false),p=requestAnimationFrame(x);}let T=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(x):cancelAnimationFrame(p);});});T.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),T.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function Q(e,t){if(typeof window>"u")return {destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?V(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}exports.scrollDraw=Q;
+'use strict';var I={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)};function M(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return {element:o,viewport:i}}function R(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function C(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function L(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ee(e,t,r){return Math.min(r,Math.max(t,e))}function O(e,t,r,o){return r===t?0:ee((e-t)/(r-t)*o,0,1)}function q(e,t,r,o,i){let u=R(e.top,e.height,t,o.element)-C(o.viewport,r),c=R(e.top,e.height,t,i.element)-C(i.viewport,r);return {tStart:u,tEnd:c}}function X(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function te(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?X("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&X("Element has a fill \u2014 it may obscure the stroke animation.",e);}function re(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let c=r==="x"?window.scrollX:window.scrollY,m=e-c,b=t-c,a=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function B(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:c="linear",trigger:m={},stagger:b=0,direction:a="forward",once:P=false,debug:_=false,axis:f="y",onProgress:W,onStart:j,onComplete:z}=t,H=typeof c=="function"?c:I[c]??I.linear,J=M(m.start??"top bottom"),K=M(m.end??"bottom top"),w=Array.from(e.querySelectorAll(o)),p=[],d=0,g=0,h=false,S=false,y=0,D=false,v=-1,$=null;function A(){return f==="x"?window.scrollX:window.scrollY}function Q(){return f==="x"?window.innerWidth:window.innerHeight}function U(n){return f==="x"?n.left:n.top}function Y(n){return f==="x"?n.width:n.height}function F(){let n=e.getBoundingClientRect(),s=q({top:U(n),height:Y(n)},A(),Q(),J,K);d=s.tStart,g=s.tEnd,_&&process.env.NODE_ENV!=="production"&&($?.remove(),$=re(d,g,f));}function Z(){w.forEach((n,s)=>{n.style.strokeDasharray=`${p[s]}`,n.style.strokeDashoffset=a==="reverse"?"0":`${p[s]}`,u?n.style.opacity=a==="reverse"?"1":"0":n.style.opacity="";});}if(w.forEach(n=>{te(n);let s=L(n);p.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u&&(n.style.opacity=a==="reverse"?"1":"0"));}),r)return z?.(),{destroy:()=>{},replay:()=>{}};F();function G(){if(!D)return;let n=g-d,s=true;w.forEach((k,E)=>{let N=E*b*n,l=H(O(A(),d+N,g+N,i));P&&(v=Math.max(v,l),l=v),k.style.strokeDashoffset=a==="reverse"?`${p[E]*l}`:`${p[E]*(1-l)}`,u&&(k.style.opacity=a==="reverse"?`${1-l}`:`${l}`),E===0&&W?.(l),l<1&&(s=false);}),S||O(A(),d,g,i)>0&&(S=true,j?.()),s&&!h?(h=true,z?.()):!s&&!P&&(h=false),y=requestAnimationFrame(G);}let V=new IntersectionObserver(n=>{n.forEach(s=>{D=s.isIntersecting,D?y=requestAnimationFrame(G):cancelAnimationFrame(y);});});V.observe(e);let T;function x(){clearTimeout(T),T=setTimeout(()=>{w.forEach((n,s)=>{p[s]=L(n),n.style.strokeDasharray=`${p[s]}`;}),F();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),{destroy(){cancelAnimationFrame(y),V.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(T),$?.remove();},replay(){v=-1,S=false,h=false,Z();}}}function ae(e,t){let r={destroy:()=>{},replay:()=>{}};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?B(o,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}exports.scrollDraw=ae;

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -13,12 +13,22 @@ interface ScrollDrawOptions {
     stagger?: number;
     /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
     direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
     /** Called every animation frame with the current draw progress (0–1) of the first path. */
     onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
     onComplete?: () => void;
 }
 interface ScrollDrawInstance {
     destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
 }
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -13,12 +13,22 @@ interface ScrollDrawOptions {
     stagger?: number;
     /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
     direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
     /** Called every animation frame with the current draw progress (0–1) of the first path. */
     onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
     onComplete?: () => void;
 }
 interface ScrollDrawInstance {
     destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
 }
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;

package/dist/index.mjs

@@ -1 +1,8 @@
-var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function k(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function F(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function M(e,t,r){return Math.min(r,Math.max(t,e))}function L(e,t,r,s){return r===t?0:M((e-t)/(r-t)*s,0,1)}function G(e,t,r,s,i){let c=k(e.top,e.height,t,s.element)-F(s.viewport,r),u=k(e.top,e.height,t,i.element)-F(i.viewport,r);return {tStart:c,tEnd:u}}function O(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?O("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&O("Element has a fill \u2014 it may obscure the stroke animation.",e);}function V(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:c="linear",trigger:u={},stagger:C=0,direction:m="forward",onProgress:N,onComplete:q}=t,z=typeof c=="function"?c:v[c]??v.linear,P=S(u.start??"top bottom"),R=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=G({top:n.top,height:n.height},window.scrollY,window.innerHeight,P,R);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function x(){if(!y)return;let n=b-w,o=true;d.forEach((I,g)=>{let $=g*C*n,a=z(L(window.scrollY,w+$,b+$,s));I.style.strokeDashoffset=m==="reverse"?`${l[g]*a}`:`${l[g]*(1-a)}`,i&&(I.style.opacity=m==="reverse"?`${1-a}`:`${a}`),g===0&&N?.(a),a<1&&(o=false);}),o&&!h?(h=true,q?.()):o||(h=false),p=requestAnimationFrame(x);}let T=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(x):cancelAnimationFrame(p);});});T.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),T.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function Q(e,t){if(typeof window>"u")return {destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?V(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}export{Q as scrollDraw};
+var I={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)};function M(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return {element:o,viewport:i}}function R(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function C(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function L(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ee(e,t,r){return Math.min(r,Math.max(t,e))}function O(e,t,r,o){return r===t?0:ee((e-t)/(r-t)*o,0,1)}function q(e,t,r,o,i){let u=R(e.top,e.height,t,o.element)-C(o.viewport,r),c=R(e.top,e.height,t,i.element)-C(i.viewport,r);return {tStart:u,tEnd:c}}function X(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function te(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?X("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&X("Element has a fill \u2014 it may obscure the stroke animation.",e);}function re(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let c=r==="x"?window.scrollX:window.scrollY,m=e-c,b=t-c,a=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function B(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:c="linear",trigger:m={},stagger:b=0,direction:a="forward",once:P=false,debug:_=false,axis:f="y",onProgress:W,onStart:j,onComplete:z}=t,H=typeof c=="function"?c:I[c]??I.linear,J=M(m.start??"top bottom"),K=M(m.end??"bottom top"),w=Array.from(e.querySelectorAll(o)),p=[],d=0,g=0,h=false,S=false,y=0,D=false,v=-1,$=null;function A(){return f==="x"?window.scrollX:window.scrollY}function Q(){return f==="x"?window.innerWidth:window.innerHeight}function U(n){return f==="x"?n.left:n.top}function Y(n){return f==="x"?n.width:n.height}function F(){let n=e.getBoundingClientRect(),s=q({top:U(n),height:Y(n)},A(),Q(),J,K);d=s.tStart,g=s.tEnd,_&&process.env.NODE_ENV!=="production"&&($?.remove(),$=re(d,g,f));}function Z(){w.forEach((n,s)=>{n.style.strokeDasharray=`${p[s]}`,n.style.strokeDashoffset=a==="reverse"?"0":`${p[s]}`,u?n.style.opacity=a==="reverse"?"1":"0":n.style.opacity="";});}if(w.forEach(n=>{te(n);let s=L(n);p.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u&&(n.style.opacity=a==="reverse"?"1":"0"));}),r)return z?.(),{destroy:()=>{},replay:()=>{}};F();function G(){if(!D)return;let n=g-d,s=true;w.forEach((k,E)=>{let N=E*b*n,l=H(O(A(),d+N,g+N,i));P&&(v=Math.max(v,l),l=v),k.style.strokeDashoffset=a==="reverse"?`${p[E]*l}`:`${p[E]*(1-l)}`,u&&(k.style.opacity=a==="reverse"?`${1-l}`:`${l}`),E===0&&W?.(l),l<1&&(s=false);}),S||O(A(),d,g,i)>0&&(S=true,j?.()),s&&!h?(h=true,z?.()):!s&&!P&&(h=false),y=requestAnimationFrame(G);}let V=new IntersectionObserver(n=>{n.forEach(s=>{D=s.isIntersecting,D?y=requestAnimationFrame(G):cancelAnimationFrame(y);});});V.observe(e);let T;function x(){clearTimeout(T),T=setTimeout(()=>{w.forEach((n,s)=>{p[s]=L(n),n.style.strokeDasharray=`${p[s]}`;}),F();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),{destroy(){cancelAnimationFrame(y),V.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(T),$?.remove();},replay(){v=-1,S=false,h=false,Z();}}}function ae(e,t){let r={destroy:()=>{},replay:()=>{}};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?B(o,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}export{ae as scrollDraw};

package/dist/react/index.cjs

@@ -1 +1,8 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function F(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function L(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function q(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,s){return r===t?0:q((e-t)/(r-t)*s,0,1)}function I(e,t,r,s,i){let a=F(e.top,e.height,t,s.element)-L(s.viewport,r),u=F(e.top,e.height,t,i.element)-L(i.viewport,r);return {tStart:a,tEnd:u}}function N(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?N("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&N("Element has a fill \u2014 it may obscure the stroke animation.",e);}function G(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:a="linear",trigger:u={},stagger:P=0,direction:m="forward",onProgress:O,onComplete:V}=t,C=typeof a=="function"?a:v[a]??v.linear,z=S(u.start??"top bottom"),M=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=I({top:n.top,height:n.height},window.scrollY,window.innerHeight,z,M);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function T(){if(!y)return;let n=b-w,o=true;d.forEach(($,g)=>{let k=g*P*n,c=C(R(window.scrollY,w+k,b+k,s));$.style.strokeDashoffset=m==="reverse"?`${l[g]*c}`:`${l[g]*(1-c)}`,i&&($.style.opacity=m==="reverse"?`${1-c}`:`${c}`),g===0&&O?.(c),c<1&&(o=false);}),o&&!h?(h=true,V?.()):o||(h=false),p=requestAnimationFrame(T);}let x=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(T):cancelAnimationFrame(p);});});x.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),x.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function j({children:e,className:t,style:r,...s}){let i=react.useRef(null);return react.useEffect(()=>{if(!i.current)return;let a=G(i.current,s);return ()=>a.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:t,style:r,children:e})}exports.ScrollDraw=j;
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var M={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)};function L(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return {element:o,viewport:i}}function V(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function C(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function P(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ee(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,o){return r===t?0:ee((e-t)/(r-t)*o,0,1)}function q(e,t,r,o,i){let c=V(e.top,e.height,t,o.element)-C(o.viewport,r),l=V(e.top,e.height,t,i.element)-C(i.viewport,r);return {tStart:c,tEnd:l}}function X(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function te(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?X("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&X("Element has a fill \u2014 it may obscure the stroke animation.",e);}function re(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=r==="x"?window.scrollX:window.scrollY,m=e-l,b=t-l,a=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function B(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:c=false,easing:l="linear",trigger:m={},stagger:b=0,direction:a="forward",once:O=false,debug:_=false,axis:f="y",onProgress:H,onStart:W,onComplete:N}=t,J=typeof l=="function"?l:M[l]??M.linear,K=L(m.start??"top bottom"),Q=L(m.end??"bottom top"),h=Array.from(e.querySelectorAll(o)),p=[],d=0,g=0,w=false,S=false,y=0,D=false,v=-1,$=null;function A(){return f==="x"?window.scrollX:window.scrollY}function U(){return f==="x"?window.innerWidth:window.innerHeight}function Y(n){return f==="x"?n.left:n.top}function Z(n){return f==="x"?n.width:n.height}function z(){let n=e.getBoundingClientRect(),s=q({top:Y(n),height:Z(n)},A(),U(),K,Q);d=s.tStart,g=s.tEnd,_&&process.env.NODE_ENV!=="production"&&($?.remove(),$=re(d,g,f));}function j(){h.forEach((n,s)=>{n.style.strokeDasharray=`${p[s]}`,n.style.strokeDashoffset=a==="reverse"?"0":`${p[s]}`,c?n.style.opacity=a==="reverse"?"1":"0":n.style.opacity="";});}if(h.forEach(n=>{te(n);let s=P(n);p.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?`${s}`:"0",c&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?"0":`${s}`,c&&(n.style.opacity=a==="reverse"?"1":"0"));}),r)return N?.(),{destroy:()=>{},replay:()=>{}};z();function F(){if(!D)return;let n=g-d,s=true;h.forEach((k,x)=>{let G=x*b*n,u=J(R(A(),d+G,g+G,i));O&&(v=Math.max(v,u),u=v),k.style.strokeDashoffset=a==="reverse"?`${p[x]*u}`:`${p[x]*(1-u)}`,c&&(k.style.opacity=a==="reverse"?`${1-u}`:`${u}`),x===0&&H?.(u),u<1&&(s=false);}),S||R(A(),d,g,i)>0&&(S=true,W?.()),s&&!w?(w=true,N?.()):!s&&!O&&(w=false),y=requestAnimationFrame(F);}let I=new IntersectionObserver(n=>{n.forEach(s=>{D=s.isIntersecting,D?y=requestAnimationFrame(F):cancelAnimationFrame(y);});});I.observe(e);let T;function E(){clearTimeout(T),T=setTimeout(()=>{h.forEach((n,s)=>{p[s]=P(n),n.style.strokeDasharray=`${p[s]}`;}),z();},150);}return window.addEventListener("resize",E),window.addEventListener("orientationchange",E),{destroy(){cancelAnimationFrame(y),I.disconnect(),window.removeEventListener("resize",E),window.removeEventListener("orientationchange",E),clearTimeout(T),$?.remove();},replay(){v=-1,S=false,w=false,j();}}}function me({children:e,className:t,style:r,...o}){let i=react.useRef(null);return react.useEffect(()=>{if(!i.current)return;let c=B(i.current,o);return ()=>c.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:t,style:r,children:e})}exports.ScrollDraw=me;

package/dist/react/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -16,8 +16,16 @@ interface ScrollDrawOptions {
     stagger?: number;
     /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
     direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
     /** Called every animation frame with the current draw progress (0–1) of the first path. */
     onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
     onComplete?: () => void;
 }
 

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -16,8 +16,16 @@ interface ScrollDrawOptions {
     stagger?: number;
     /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
     direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
     /** Called every animation frame with the current draw progress (0–1) of the first path. */
     onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
     onComplete?: () => void;
 }
 

package/dist/react/index.mjs

@@ -1 +1,8 @@
-import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function F(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function L(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function q(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,s){return r===t?0:q((e-t)/(r-t)*s,0,1)}function I(e,t,r,s,i){let a=F(e.top,e.height,t,s.element)-L(s.viewport,r),u=F(e.top,e.height,t,i.element)-L(i.viewport,r);return {tStart:a,tEnd:u}}function N(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?N("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&N("Element has a fill \u2014 it may obscure the stroke animation.",e);}function G(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:a="linear",trigger:u={},stagger:P=0,direction:m="forward",onProgress:O,onComplete:V}=t,C=typeof a=="function"?a:v[a]??v.linear,z=S(u.start??"top bottom"),M=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=I({top:n.top,height:n.height},window.scrollY,window.innerHeight,z,M);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function T(){if(!y)return;let n=b-w,o=true;d.forEach(($,g)=>{let k=g*P*n,c=C(R(window.scrollY,w+k,b+k,s));$.style.strokeDashoffset=m==="reverse"?`${l[g]*c}`:`${l[g]*(1-c)}`,i&&($.style.opacity=m==="reverse"?`${1-c}`:`${c}`),g===0&&O?.(c),c<1&&(o=false);}),o&&!h?(h=true,V?.()):o||(h=false),p=requestAnimationFrame(T);}let x=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(T):cancelAnimationFrame(p);});});x.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),x.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function j({children:e,className:t,style:r,...s}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let a=G(i.current,s);return ()=>a.destroy()},[]),jsx("div",{ref:i,className:t,style:r,children:e})}export{j as ScrollDraw};
+import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var M={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)};function L(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return {element:o,viewport:i}}function V(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function C(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function P(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ee(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,o){return r===t?0:ee((e-t)/(r-t)*o,0,1)}function q(e,t,r,o,i){let c=V(e.top,e.height,t,o.element)-C(o.viewport,r),l=V(e.top,e.height,t,i.element)-C(i.viewport,r);return {tStart:c,tEnd:l}}function X(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function te(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?X("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&X("Element has a fill \u2014 it may obscure the stroke animation.",e);}function re(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=r==="x"?window.scrollX:window.scrollY,m=e-l,b=t-l,a=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function B(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:c=false,easing:l="linear",trigger:m={},stagger:b=0,direction:a="forward",once:O=false,debug:_=false,axis:f="y",onProgress:H,onStart:W,onComplete:N}=t,J=typeof l=="function"?l:M[l]??M.linear,K=L(m.start??"top bottom"),Q=L(m.end??"bottom top"),h=Array.from(e.querySelectorAll(o)),p=[],d=0,g=0,w=false,S=false,y=0,D=false,v=-1,$=null;function A(){return f==="x"?window.scrollX:window.scrollY}function U(){return f==="x"?window.innerWidth:window.innerHeight}function Y(n){return f==="x"?n.left:n.top}function Z(n){return f==="x"?n.width:n.height}function z(){let n=e.getBoundingClientRect(),s=q({top:Y(n),height:Z(n)},A(),U(),K,Q);d=s.tStart,g=s.tEnd,_&&process.env.NODE_ENV!=="production"&&($?.remove(),$=re(d,g,f));}function j(){h.forEach((n,s)=>{n.style.strokeDasharray=`${p[s]}`,n.style.strokeDashoffset=a==="reverse"?"0":`${p[s]}`,c?n.style.opacity=a==="reverse"?"1":"0":n.style.opacity="";});}if(h.forEach(n=>{te(n);let s=P(n);p.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?`${s}`:"0",c&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?"0":`${s}`,c&&(n.style.opacity=a==="reverse"?"1":"0"));}),r)return N?.(),{destroy:()=>{},replay:()=>{}};z();function F(){if(!D)return;let n=g-d,s=true;h.forEach((k,x)=>{let G=x*b*n,u=J(R(A(),d+G,g+G,i));O&&(v=Math.max(v,u),u=v),k.style.strokeDashoffset=a==="reverse"?`${p[x]*u}`:`${p[x]*(1-u)}`,c&&(k.style.opacity=a==="reverse"?`${1-u}`:`${u}`),x===0&&H?.(u),u<1&&(s=false);}),S||R(A(),d,g,i)>0&&(S=true,W?.()),s&&!w?(w=true,N?.()):!s&&!O&&(w=false),y=requestAnimationFrame(F);}let I=new IntersectionObserver(n=>{n.forEach(s=>{D=s.isIntersecting,D?y=requestAnimationFrame(F):cancelAnimationFrame(y);});});I.observe(e);let T;function E(){clearTimeout(T),T=setTimeout(()=>{h.forEach((n,s)=>{p[s]=P(n),n.style.strokeDasharray=`${p[s]}`;}),z();},150);}return window.addEventListener("resize",E),window.addEventListener("orientationchange",E),{destroy(){cancelAnimationFrame(y),I.disconnect(),window.removeEventListener("resize",E),window.removeEventListener("orientationchange",E),clearTimeout(T),$?.remove();},replay(){v=-1,S=false,w=false,j();}}}function me({children:e,className:t,style:r,...o}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let c=B(i.current,o);return ()=>c.destroy()},[]),jsx("div",{ref:i,className:t,style:r,children:e})}export{me as ScrollDraw};

package/dist/svelte/index.cjs

@@ -0,0 +1,8 @@
+'use strict';var L={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)};function O(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return {element:o,viewport:i}}function C(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function q(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function I(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ee(e,t,r){return Math.min(r,Math.max(t,e))}function P(e,t,r,o){return r===t?0:ee((e-t)/(r-t)*o,0,1)}function X(e,t,r,o,i){let u=C(e.top,e.height,t,o.element)-q(o.viewport,r),l=C(e.top,e.height,t,i.element)-q(i.viewport,r);return {tStart:u,tEnd:l}}function B(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function te(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?B("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&B("Element has a fill \u2014 it may obscure the stroke animation.",e);}function re(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=r==="x"?window.scrollX:window.scrollY,m=e-l,b=t-l,a=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function D(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:l="linear",trigger:m={},stagger:b=0,direction:a="forward",once:z=false,debug:H=false,axis:f="y",onProgress:_,onStart:W,onComplete:F}=t,j=typeof l=="function"?l:L[l]??L.linear,J=O(m.start??"top bottom"),K=O(m.end??"bottom top"),w=Array.from(e.querySelectorAll(o)),p=[],d=0,g=0,h=false,S=false,y=0,$=false,v=-1,A=null;function T(){return f==="x"?window.scrollX:window.scrollY}function Q(){return f==="x"?window.innerWidth:window.innerHeight}function U(n){return f==="x"?n.left:n.top}function Y(n){return f==="x"?n.width:n.height}function G(){let n=e.getBoundingClientRect(),s=X({top:U(n),height:Y(n)},T(),Q(),J,K);d=s.tStart,g=s.tEnd,H&&process.env.NODE_ENV!=="production"&&(A?.remove(),A=re(d,g,f));}function Z(){w.forEach((n,s)=>{n.style.strokeDasharray=`${p[s]}`,n.style.strokeDashoffset=a==="reverse"?"0":`${p[s]}`,u?n.style.opacity=a==="reverse"?"1":"0":n.style.opacity="";});}if(w.forEach(n=>{te(n);let s=I(n);p.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u&&(n.style.opacity=a==="reverse"?"1":"0"));}),r)return F?.(),{destroy:()=>{},replay:()=>{}};G();function V(){if(!$)return;let n=g-d,s=true;w.forEach((M,E)=>{let R=E*b*n,c=j(P(T(),d+R,g+R,i));z&&(v=Math.max(v,c),c=v),M.style.strokeDashoffset=a==="reverse"?`${p[E]*c}`:`${p[E]*(1-c)}`,u&&(M.style.opacity=a==="reverse"?`${1-c}`:`${c}`),E===0&&_?.(c),c<1&&(s=false);}),S||P(T(),d,g,i)>0&&(S=true,W?.()),s&&!h?(h=true,F?.()):!s&&!z&&(h=false),y=requestAnimationFrame(V);}let N=new IntersectionObserver(n=>{n.forEach(s=>{$=s.isIntersecting,$?y=requestAnimationFrame(V):cancelAnimationFrame(y);});});N.observe(e);let k;function x(){clearTimeout(k),k=setTimeout(()=>{w.forEach((n,s)=>{p[s]=I(n),n.style.strokeDasharray=`${p[s]}`;}),G();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),{destroy(){cancelAnimationFrame(y),N.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(k),A?.remove();},replay(){v=-1,S=false,h=false,Z();}}}function ae(e,t={}){let r=D(e,t);return {update(o){r.destroy(),r=D(e,o);},destroy(){r.destroy();}}}function le(e={}){let t=null;function r(o){return t=D(o,e),{destroy(){t?.destroy(),t=null;}}}return {action:r,getInstance:()=>t}}exports.createScrollDraw=le;exports.scrollDraw=ae;

package/dist/svelte/index.d.mts

@@ -0,0 +1,72 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+}
+
+/**
+ * Svelte action — apply to any container element wrapping an SVG.
+ *
+ * @example
+ * <script>
+ *   import { scrollDraw } from 'svg-scroll-draw/svelte';
+ * </script>
+ *
+ * <div use:scrollDraw={{ easing: 'ease-out', speed: 1.2, fade: true }}>
+ *   <svg>...</svg>
+ * </div>
+ */
+declare function scrollDraw(node: HTMLElement, options?: ScrollDrawOptions): {
+    update(newOptions: ScrollDrawOptions): void;
+    destroy(): void;
+};
+/**
+ * Composable helper — returns an action and the live instance so you can
+ * call `instance.replay()` from your Svelte component logic.
+ *
+ * @example
+ * <script>
+ *   import { createScrollDraw } from 'svg-scroll-draw/svelte';
+ *   const { action, getInstance } = createScrollDraw({ easing: 'spring' });
+ * </script>
+ *
+ * <div use:action>
+ *   <svg>...</svg>
+ * </div>
+ * <button on:click={() => getInstance()?.replay()}>Replay</button>
+ */
+declare function createScrollDraw(options?: ScrollDrawOptions): {
+    action: (node: HTMLElement) => {
+        destroy(): void;
+    };
+    getInstance: () => ScrollDrawInstance | null;
+};
+
+export { type ScrollDrawOptions, createScrollDraw, scrollDraw };

package/dist/svelte/index.d.ts

@@ -0,0 +1,72 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+}
+
+/**
+ * Svelte action — apply to any container element wrapping an SVG.
+ *
+ * @example
+ * <script>
+ *   import { scrollDraw } from 'svg-scroll-draw/svelte';
+ * </script>
+ *
+ * <div use:scrollDraw={{ easing: 'ease-out', speed: 1.2, fade: true }}>
+ *   <svg>...</svg>
+ * </div>
+ */
+declare function scrollDraw(node: HTMLElement, options?: ScrollDrawOptions): {
+    update(newOptions: ScrollDrawOptions): void;
+    destroy(): void;
+};
+/**
+ * Composable helper — returns an action and the live instance so you can
+ * call `instance.replay()` from your Svelte component logic.
+ *
+ * @example
+ * <script>
+ *   import { createScrollDraw } from 'svg-scroll-draw/svelte';
+ *   const { action, getInstance } = createScrollDraw({ easing: 'spring' });
+ * </script>
+ *
+ * <div use:action>
+ *   <svg>...</svg>
+ * </div>
+ * <button on:click={() => getInstance()?.replay()}>Replay</button>
+ */
+declare function createScrollDraw(options?: ScrollDrawOptions): {
+    action: (node: HTMLElement) => {
+        destroy(): void;
+    };
+    getInstance: () => ScrollDrawInstance | null;
+};
+
+export { type ScrollDrawOptions, createScrollDraw, scrollDraw };

package/dist/svelte/index.mjs

@@ -0,0 +1,8 @@
+var L={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)};function O(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[o="top",i="bottom"]=r;return {element:o,viewport:i}}function C(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function q(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function I(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ee(e,t,r){return Math.min(r,Math.max(t,e))}function P(e,t,r,o){return r===t?0:ee((e-t)/(r-t)*o,0,1)}function X(e,t,r,o,i){let u=C(e.top,e.height,t,o.element)-q(o.viewport,r),l=C(e.top,e.height,t,i.element)-q(i.viewport,r);return {tStart:u,tEnd:l}}function B(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function te(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?B("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&B("Element has a fill \u2014 it may obscure the stroke animation.",e);}function re(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=r==="x"?window.scrollX:window.scrollY,m=e-l,b=t-l,a=r==="x";o.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function D(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:l="linear",trigger:m={},stagger:b=0,direction:a="forward",once:z=false,debug:H=false,axis:f="y",onProgress:_,onStart:W,onComplete:F}=t,j=typeof l=="function"?l:L[l]??L.linear,J=O(m.start??"top bottom"),K=O(m.end??"bottom top"),w=Array.from(e.querySelectorAll(o)),p=[],d=0,g=0,h=false,S=false,y=0,$=false,v=-1,A=null;function T(){return f==="x"?window.scrollX:window.scrollY}function Q(){return f==="x"?window.innerWidth:window.innerHeight}function U(n){return f==="x"?n.left:n.top}function Y(n){return f==="x"?n.width:n.height}function G(){let n=e.getBoundingClientRect(),s=X({top:U(n),height:Y(n)},T(),Q(),J,K);d=s.tStart,g=s.tEnd,H&&process.env.NODE_ENV!=="production"&&(A?.remove(),A=re(d,g,f));}function Z(){w.forEach((n,s)=>{n.style.strokeDasharray=`${p[s]}`,n.style.strokeDashoffset=a==="reverse"?"0":`${p[s]}`,u?n.style.opacity=a==="reverse"?"1":"0":n.style.opacity="";});}if(w.forEach(n=>{te(n);let s=I(n);p.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(n.style.opacity="1")):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u&&(n.style.opacity=a==="reverse"?"1":"0"));}),r)return F?.(),{destroy:()=>{},replay:()=>{}};G();function V(){if(!$)return;let n=g-d,s=true;w.forEach((M,E)=>{let R=E*b*n,c=j(P(T(),d+R,g+R,i));z&&(v=Math.max(v,c),c=v),M.style.strokeDashoffset=a==="reverse"?`${p[E]*c}`:`${p[E]*(1-c)}`,u&&(M.style.opacity=a==="reverse"?`${1-c}`:`${c}`),E===0&&_?.(c),c<1&&(s=false);}),S||P(T(),d,g,i)>0&&(S=true,W?.()),s&&!h?(h=true,F?.()):!s&&!z&&(h=false),y=requestAnimationFrame(V);}let N=new IntersectionObserver(n=>{n.forEach(s=>{$=s.isIntersecting,$?y=requestAnimationFrame(V):cancelAnimationFrame(y);});});N.observe(e);let k;function x(){clearTimeout(k),k=setTimeout(()=>{w.forEach((n,s)=>{p[s]=I(n),n.style.strokeDasharray=`${p[s]}`;}),G();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),{destroy(){cancelAnimationFrame(y),N.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(k),A?.remove();},replay(){v=-1,S=false,h=false,Z();}}}function ae(e,t={}){let r=D(e,t);return {update(o){r.destroy(),r=D(e,o);},destroy(){r.destroy();}}}function le(e={}){let t=null;function r(o){return t=D(o,e),{destroy(){t?.destroy(),t=null;}}}return {action:r,getInstance:()=>t}}export{le as createScrollDraw,ae as scrollDraw};

package/dist/vue/index.cjs

@@ -1 +1,8 @@
-'use strict';var vue=require('vue');var E={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function L(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function $(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,t,n){return Math.min(n,Math.max(t,e))}function k(e,t,n,r){return n===t?0:U((e-t)/(n-t)*r,0,1)}function P(e,t,n,r,s){let l=L(e.top,e.height,t,r.element)-$(r.viewport,n),u=L(e.top,e.height,t,s.element)-$(s.viewport,n);return {tStart:l,tEnd:u}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function _(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function A(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon, rect, circle",speed:r=1,fade:s=false,easing:l="linear",trigger:u={},stagger:R=0,direction:m="forward",onProgress:V,onComplete:z}=t,q=typeof l=="function"?l:E[l]??E.linear,B=S(u.start??"top bottom"),j=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(n)),c=[],w=0,b=0,h=false,f=0,y=false;function T(){let o=e.getBoundingClientRect(),i=P({top:o.top,height:o.height},window.scrollY,window.innerHeight,B,j);w=i.tStart,b=i.tEnd;}d.forEach(o=>{_(o);let i=D(o);c.push(i),o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=m==="reverse"?"0":`${i}`,s&&(o.style.opacity=m==="reverse"?"1":"0");}),T();function x(){if(!y)return;let o=b-w,i=true;d.forEach((F,p)=>{let C=p*R*o,a=q(k(window.scrollY,w+C,b+C,r));F.style.strokeDashoffset=m==="reverse"?`${c[p]*a}`:`${c[p]*(1-a)}`,s&&(F.style.opacity=m==="reverse"?`${1-a}`:`${a}`),p===0&&V?.(a),a<1&&(i=false);}),i&&!h?(h=true,z?.()):i||(h=false),f=requestAnimationFrame(x);}let O=new IntersectionObserver(o=>{o.forEach(i=>{y=i.isIntersecting,y?f=requestAnimationFrame(x):cancelAnimationFrame(f);});});O.observe(e);let v;function g(){clearTimeout(v),v=setTimeout(()=>{d.forEach((o,i)=>{c[i]=D(o),o.style.strokeDasharray=`${c[i]}`;}),T();},150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);}}}function H(e={}){let t=vue.ref(null);return vue.onMounted(()=>{if(!t.value)return;let n=A(t.value,e);vue.onUnmounted(()=>n.destroy());}),t}var ee=vue.defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onComplete:{type:Function}},setup(e,{slots:t}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=A(n.value,r);vue.onUnmounted(()=>s.destroy());}),()=>vue.h("div",{ref:n},t.default?.())}});exports.ScrollDraw=ee;exports.useScrollDraw=H;
+'use strict';var vue=require('vue');var M={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)};function k(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function V(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function B(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function P(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function re(e,t,n){return Math.min(n,Math.max(t,e))}function L(e,t,n,r){return n===t?0:re((e-t)/(n-t)*r,0,1)}function q(e,t,n,r,s){let u=V(e.top,e.height,t,r.element)-B(r.viewport,n),l=V(e.top,e.height,t,s.element)-B(s.viewport,n);return {tStart:u,tEnd:l}}function X(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function oe(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?X("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&X("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ie(e,t,n){let r=document.createElement("div");r.setAttribute("data-svg-scroll-draw-debug",""),r.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 s(){let l=n==="x"?window.scrollX:window.scrollY,m=e-l,b=t-l,a=n==="x";r.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(r),window.addEventListener("scroll",s,{passive:true}),s(),r}function F(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:u=false,easing:l="linear",trigger:m={},stagger:b=0,direction:a="forward",once:C=false,debug:U=false,axis:d="y",onProgress:W,onStart:J,onComplete:z}=t,K=typeof l=="function"?l:M[l]??M.linear,Q=k(m.start??"top bottom"),Y=k(m.end??"bottom top"),w=Array.from(e.querySelectorAll(r)),f=[],p=0,g=0,y=false,E=false,h=0,D=false,v=-1,$=null;function A(){return d==="x"?window.scrollX:window.scrollY}function Z(){return d==="x"?window.innerWidth:window.innerHeight}function ee(o){return d==="x"?o.left:o.top}function te(o){return d==="x"?o.width:o.height}function I(){let o=e.getBoundingClientRect(),i=q({top:ee(o),height:te(o)},A(),Z(),Q,Y);p=i.tStart,g=i.tEnd,U&&process.env.NODE_ENV!=="production"&&($?.remove(),$=ie(p,g,d));}function ne(){w.forEach((o,i)=>{o.style.strokeDasharray=`${f[i]}`,o.style.strokeDashoffset=a==="reverse"?"0":`${f[i]}`,u?o.style.opacity=a==="reverse"?"1":"0":o.style.opacity="";});}if(w.forEach(o=>{oe(o);let i=P(o);f.push(i),n?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=a==="reverse"?`${i}`:"0",u&&(o.style.opacity="1")):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=a==="reverse"?"0":`${i}`,u&&(o.style.opacity=a==="reverse"?"1":"0"));}),n)return z?.(),{destroy:()=>{},replay:()=>{}};I();function N(){if(!D)return;let o=g-p,i=true;w.forEach((T,S)=>{let G=S*b*o,c=K(L(A(),p+G,g+G,s));C&&(v=Math.max(v,c),c=v),T.style.strokeDashoffset=a==="reverse"?`${f[S]*c}`:`${f[S]*(1-c)}`,u&&(T.style.opacity=a==="reverse"?`${1-c}`:`${c}`),S===0&&W?.(c),c<1&&(i=false);}),E||L(A(),p,g,s)>0&&(E=true,J?.()),i&&!y?(y=true,z?.()):!i&&!C&&(y=false),h=requestAnimationFrame(N);}let R=new IntersectionObserver(o=>{o.forEach(i=>{D=i.isIntersecting,D?h=requestAnimationFrame(N):cancelAnimationFrame(h);});});R.observe(e);let O;function x(){clearTimeout(O),O=setTimeout(()=>{w.forEach((o,i)=>{f[i]=P(o),o.style.strokeDasharray=`${f[i]}`;}),I();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),{destroy(){cancelAnimationFrame(h),R.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(O),$?.remove();},replay(){v=-1,E=false,y=false,ne();}}}function de(e={}){let t=vue.ref(null);return vue.onMounted(()=>{if(!t.value)return;let n=F(t.value,e);vue.onUnmounted(()=>n.destroy());}),t}var pe=vue.defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:t}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.once!=null&&(r.once=e.once),e.debug!=null&&(r.debug=e.debug),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onStart!=null&&(r.onStart=e.onStart),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=F(n.value,r);vue.onUnmounted(()=>s.destroy());}),()=>vue.h("div",{ref:n},t.default?.())}});exports.ScrollDraw=pe;exports.useScrollDraw=de;

package/dist/vue/index.d.mts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -15,8 +15,16 @@ interface ScrollDrawOptions {
     stagger?: number;
     /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
     direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
     /** Called every animation frame with the current draw progress (0–1) of the first path. */
     onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
     onComplete?: () => void;
 }
 
@@ -48,9 +56,18 @@ declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
     onProgress: {
         type: FunctionConstructor;
     };
+    onStart: {
+        type: FunctionConstructor;
+    };
     onComplete: {
         type: FunctionConstructor;
     };
+    once: {
+        type: BooleanConstructor;
+    };
+    debug: {
+        type: BooleanConstructor;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -78,11 +95,22 @@ declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
     onProgress: {
         type: FunctionConstructor;
     };
+    onStart: {
+        type: FunctionConstructor;
+    };
     onComplete: {
         type: FunctionConstructor;
     };
+    once: {
+        type: BooleanConstructor;
+    };
+    debug: {
+        type: BooleanConstructor;
+    };
 }>> & Readonly<{}>, {
     fade: boolean;
+    once: boolean;
+    debug: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ScrollDraw, type ScrollDrawOptions, useScrollDraw };

package/dist/vue/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -15,8 +15,16 @@ interface ScrollDrawOptions {
     stagger?: number;
     /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
     direction?: 'forward' | 'reverse';
+    /** Draw once and stay drawn — animation does not reverse when scrolling back up. */
+    once?: boolean;
+    /** Show trigger zone overlay for debugging. Dev-only — stripped in production. */
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical scroll, 'x' for horizontal scroll containers. */
+    axis?: 'x' | 'y';
     /** Called every animation frame with the current draw progress (0–1) of the first path. */
     onProgress?: (alpha: number) => void;
+    /** Fires once on the first frame the animation begins drawing. */
+    onStart?: () => void;
     onComplete?: () => void;
 }
 
@@ -48,9 +56,18 @@ declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
     onProgress: {
         type: FunctionConstructor;
     };
+    onStart: {
+        type: FunctionConstructor;
+    };
     onComplete: {
         type: FunctionConstructor;
     };
+    once: {
+        type: BooleanConstructor;
+    };
+    debug: {
+        type: BooleanConstructor;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -78,11 +95,22 @@ declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
     onProgress: {
         type: FunctionConstructor;
     };
+    onStart: {
+        type: FunctionConstructor;
+    };
     onComplete: {
         type: FunctionConstructor;
     };
+    once: {
+        type: BooleanConstructor;
+    };
+    debug: {
+        type: BooleanConstructor;
+    };
 }>> & Readonly<{}>, {
     fade: boolean;
+    once: boolean;
+    debug: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ScrollDraw, type ScrollDrawOptions, useScrollDraw };

package/dist/vue/index.mjs

@@ -1 +1,8 @@
-import {defineComponent,ref,onMounted,onUnmounted,h}from'vue';var E={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function L(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function $(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,t,n){return Math.min(n,Math.max(t,e))}function k(e,t,n,r){return n===t?0:U((e-t)/(n-t)*r,0,1)}function P(e,t,n,r,s){let l=L(e.top,e.height,t,r.element)-$(r.viewport,n),u=L(e.top,e.height,t,s.element)-$(s.viewport,n);return {tStart:l,tEnd:u}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function _(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function A(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon, rect, circle",speed:r=1,fade:s=false,easing:l="linear",trigger:u={},stagger:R=0,direction:m="forward",onProgress:V,onComplete:z}=t,q=typeof l=="function"?l:E[l]??E.linear,B=S(u.start??"top bottom"),j=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(n)),c=[],w=0,b=0,h=false,f=0,y=false;function T(){let o=e.getBoundingClientRect(),i=P({top:o.top,height:o.height},window.scrollY,window.innerHeight,B,j);w=i.tStart,b=i.tEnd;}d.forEach(o=>{_(o);let i=D(o);c.push(i),o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=m==="reverse"?"0":`${i}`,s&&(o.style.opacity=m==="reverse"?"1":"0");}),T();function x(){if(!y)return;let o=b-w,i=true;d.forEach((F,p)=>{let C=p*R*o,a=q(k(window.scrollY,w+C,b+C,r));F.style.strokeDashoffset=m==="reverse"?`${c[p]*a}`:`${c[p]*(1-a)}`,s&&(F.style.opacity=m==="reverse"?`${1-a}`:`${a}`),p===0&&V?.(a),a<1&&(i=false);}),i&&!h?(h=true,z?.()):i||(h=false),f=requestAnimationFrame(x);}let O=new IntersectionObserver(o=>{o.forEach(i=>{y=i.isIntersecting,y?f=requestAnimationFrame(x):cancelAnimationFrame(f);});});O.observe(e);let v;function g(){clearTimeout(v),v=setTimeout(()=>{d.forEach((o,i)=>{c[i]=D(o),o.style.strokeDasharray=`${c[i]}`;}),T();},150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);}}}function H(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=A(t.value,e);onUnmounted(()=>n.destroy());}),t}var ee=defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onComplete:{type:Function}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=A(n.value,r);onUnmounted(()=>s.destroy());}),()=>h("div",{ref:n},t.default?.())}});export{ee as ScrollDraw,H as useScrollDraw};
+import {defineComponent,ref,onMounted,onUnmounted,h}from'vue';var M={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)};function k(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function V(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function B(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function P(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function re(e,t,n){return Math.min(n,Math.max(t,e))}function L(e,t,n,r){return n===t?0:re((e-t)/(n-t)*r,0,1)}function q(e,t,n,r,s){let u=V(e.top,e.height,t,r.element)-B(r.viewport,n),l=V(e.top,e.height,t,s.element)-B(s.viewport,n);return {tStart:u,tEnd:l}}function X(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function oe(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?X("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&X("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ie(e,t,n){let r=document.createElement("div");r.setAttribute("data-svg-scroll-draw-debug",""),r.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 s(){let l=n==="x"?window.scrollX:window.scrollY,m=e-l,b=t-l,a=n==="x";r.innerHTML=`
+      <div style="position:absolute;
+        ${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}
+        padding:2px 6px;color:#22c55e;background:rgba(0,0,0,0.6);">\u25B6 start</div>
+      <div style="position:absolute;
+        ${a?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}
+        padding:2px 6px;color:#ef4444;background:rgba(0,0,0,0.6);">\u25A0 end</div>
+    `;}return document.body.appendChild(r),window.addEventListener("scroll",s,{passive:true}),s(),r}function F(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:u=false,easing:l="linear",trigger:m={},stagger:b=0,direction:a="forward",once:C=false,debug:U=false,axis:d="y",onProgress:W,onStart:J,onComplete:z}=t,K=typeof l=="function"?l:M[l]??M.linear,Q=k(m.start??"top bottom"),Y=k(m.end??"bottom top"),w=Array.from(e.querySelectorAll(r)),f=[],p=0,g=0,y=false,E=false,h=0,D=false,v=-1,$=null;function A(){return d==="x"?window.scrollX:window.scrollY}function Z(){return d==="x"?window.innerWidth:window.innerHeight}function ee(o){return d==="x"?o.left:o.top}function te(o){return d==="x"?o.width:o.height}function I(){let o=e.getBoundingClientRect(),i=q({top:ee(o),height:te(o)},A(),Z(),Q,Y);p=i.tStart,g=i.tEnd,U&&process.env.NODE_ENV!=="production"&&($?.remove(),$=ie(p,g,d));}function ne(){w.forEach((o,i)=>{o.style.strokeDasharray=`${f[i]}`,o.style.strokeDashoffset=a==="reverse"?"0":`${f[i]}`,u?o.style.opacity=a==="reverse"?"1":"0":o.style.opacity="";});}if(w.forEach(o=>{oe(o);let i=P(o);f.push(i),n?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=a==="reverse"?`${i}`:"0",u&&(o.style.opacity="1")):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=a==="reverse"?"0":`${i}`,u&&(o.style.opacity=a==="reverse"?"1":"0"));}),n)return z?.(),{destroy:()=>{},replay:()=>{}};I();function N(){if(!D)return;let o=g-p,i=true;w.forEach((T,S)=>{let G=S*b*o,c=K(L(A(),p+G,g+G,s));C&&(v=Math.max(v,c),c=v),T.style.strokeDashoffset=a==="reverse"?`${f[S]*c}`:`${f[S]*(1-c)}`,u&&(T.style.opacity=a==="reverse"?`${1-c}`:`${c}`),S===0&&W?.(c),c<1&&(i=false);}),E||L(A(),p,g,s)>0&&(E=true,J?.()),i&&!y?(y=true,z?.()):!i&&!C&&(y=false),h=requestAnimationFrame(N);}let R=new IntersectionObserver(o=>{o.forEach(i=>{D=i.isIntersecting,D?h=requestAnimationFrame(N):cancelAnimationFrame(h);});});R.observe(e);let O;function x(){clearTimeout(O),O=setTimeout(()=>{w.forEach((o,i)=>{f[i]=P(o),o.style.strokeDasharray=`${f[i]}`;}),I();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),{destroy(){cancelAnimationFrame(h),R.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(O),$?.remove();},replay(){v=-1,E=false,y=false,ne();}}}function de(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=F(t.value,e);onUnmounted(()=>n.destroy());}),t}var pe=defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.once!=null&&(r.once=e.once),e.debug!=null&&(r.debug=e.debug),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onStart!=null&&(r.onStart=e.onStart),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=F(n.value,r);onUnmounted(()=>s.destroy());}),()=>h("div",{ref:n},t.default?.())}});export{pe as ScrollDraw,de as useScrollDraw};

package/package.json

@@ -1,12 +1,52 @@
 {
   "name": "svg-scroll-draw",
-  "version": "0.2.0",
-  "description": "Scroll-driven SVG path drawing animation library",
+  "version": "0.3.0",
+  "description": "Scroll-driven SVG path drawing animation library — zero dependencies, under 3KB gzipped, works with React, Vue, and vanilla JS",
+  "keywords": [
+    "svg",
+    "scroll",
+    "animation",
+    "path",
+    "draw",
+    "stroke-dashoffset",
+    "scroll-driven",
+    "intersection-observer",
+    "react",
+    "vue",
+    "nextjs",
+    "web-animation",
+    "svg-animation",
+    "scroll-animation",
+    "path-drawing",
+    "vanilla-js",
+    "web-component",
+    "zero-dependencies",
+    "lightweight",
+    "svelte",
+    "svelte-action",
+    "horizontal-scroll"
+  ],
+  "homepage": "https://ink-scroll.vercel.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DhruvilChauahan0210/ink-scroll.git",
+    "directory": "packages/svg-scroll-draw"
+  },
+  "bugs": {
+    "url": "https://github.com/DhruvilChauahan0210/ink-scroll/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/DhruvilChauahan0210"
+  },
+  "license": "MIT",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -23,6 +63,11 @@
       "types": "./dist/vue/index.d.ts",
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "import": "./dist/svelte/index.mjs",
+      "require": "./dist/svelte/index.cjs"
     }
   },
   "scripts": {
@@ -47,7 +92,11 @@
     "vue": ">=3"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true },
-    "vue":   { "optional": true }
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   }
 }