svg-scroll-draw 2.12.0 → 2.14.0

package/README.md

@@ -32,6 +32,7 @@
 | `devtools` | `svg-scroll-draw/devtools` | Visual overlay showing every active animation's triggers and progress. Dev-only. |
 | `AOS` | `svg-scroll-draw/aos` | Drop-in replacement for AOS: same `AOS.init()`, same `data-aos` markup, no `aos.css`. |
 | `ScrollReveal` | `svg-scroll-draw/scrollreveal` | Drop-in replacement for ScrollReveal.js 4, MIT instead of GPL-3.0. |
+| `Vivus` | `svg-scroll-draw/vivus` | Drop-in replacement for vivus 0.4: same `new Vivus()` API and output. |
 
 All APIs return the same instance object: `{ destroy, replay, pause, resume, seek, getProgress }`.
 
@@ -362,7 +363,7 @@ import { ScrollDraw } from 'svg-scroll-draw/vue';
 ## AOS drop-in — switch from AOS in one line
 
 Already using [AOS](https://github.com/michalsnik/aos)? `svg-scroll-draw/aos` speaks its API and
-reads its markup, so the move is an import change. Keep every `data-aos`, `data-aos-offset`,
+reads its markup, so the move is an import change — or one command: `npx svg-scroll-draw migrate`. Keep every `data-aos`, `data-aos-offset`,
 `data-aos-delay`, `data-aos-anchor-placement` and custom animation; delete `aos.css` — the styles ship
 inside the module. 3.0 KB gzipped with the styles, against 6.7 KB for AOS 2.3.4 with its stylesheet.
 
@@ -402,7 +403,8 @@ Differences, on purpose:
 
 On [ScrollReveal](https://scrollrevealjs.org)? It is GPL-3.0 (with a paid licence for commercial work)
 and has not shipped since 4.0.9. `svg-scroll-draw/scrollreveal` is an independent, MIT-licensed
-implementation of the same API, so the move is an import change. 4.5 KB gzipped, against 5.6 KB.
+implementation of the same API, so the move is an import change — or one command: `npx svg-scroll-draw migrate`.
+4.5 KB gzipped, against 5.6 KB.
 
 ```diff
 - import ScrollReveal from 'scrollreveal';
@@ -430,6 +432,36 @@ Differences, on purpose:
 
 ---
 
+## vivus drop-in — keep your `new Vivus()` code
+
+On [vivus](https://github.com/maxwellito/vivus)? It has not shipped since 0.4.6 (April 2021).
+`svg-scroll-draw/vivus` runs the same API, so the move is an import change — or one command:
+`npx svg-scroll-draw migrate`. 3.9 KB gzipped, against 4.1 KB.
+
+```diff
+- import Vivus from 'vivus';
++ import Vivus from 'svg-scroll-draw/vivus';
+
+  new Vivus('my-svg', { type: 'oneByOne', duration: 200 }, () => console.log('drawn'));
+```
+
+No bundler? `<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/vivus.global.js"></script>`
+defines `window.Vivus`. With CommonJS, `require('svg-scroll-draw/vivus').default` is the class.
+
+Every option, every animation type (`delayed`, `sync`, `async`, `nsync`, `oneByOne`, `scenario`,
+`scenario-sync`), the `start` modes, `file` and `<object>` loading, the `data-start` / `data-duration` /
+`data-delay` / `data-async` / `data-ignore` attributes, `Vivus.EASE` and the other timing functions, and
+`play` / `stop` / `reset` / `finish` / `setFrameProgress` / `getStatus` / `destroy` / `recalc` behave as
+in 0.4.6. Shapes become `<path>`s with the same `d` strings, and dashes get the same values: the browser
+suite runs vivus 0.4.6 beside it across nine configurations and requires the SVG markup to match exactly
+at every point of the animation. Like vivus, the clock is the animation frame.
+
+One difference, on purpose: under `prefers-reduced-motion: reduce`, `play()` jumps to the end and still
+fires its callbacks. When you want the stroke to follow the scroll instead of a clock, use
+[`scrollDraw`](#scrolldraw--svg-path-drawing-v1-api-unchanged) from the same package.
+
+---
+
 ## Instance API
 
 Every function returns the same instance object:
@@ -522,6 +554,7 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 | `svg-scroll-draw/devtools` | `devtools` (dev-only) |
 | `svg-scroll-draw/aos` | `AOS` (default), `init`, `refresh`, `refreshHard`, `destroy` |
 | `svg-scroll-draw/scrollreveal` | `ScrollReveal` (default and named) |
+| `svg-scroll-draw/vivus` | `Vivus` (default and named) |
 
 ---
 
@@ -535,6 +568,7 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 | `svg-scroll-draw/text` | 2.5 KB |
 | `svg-scroll-draw/video` | 2.0 KB |
 | `svg-scroll-draw/scrollreveal` | 4.5 KB |
+| `svg-scroll-draw/vivus` | 3.9 KB |
 | `svg-scroll-draw/aos` (styles included) | 3.0 KB |
 | `svg-scroll-draw/snap` | 1.7 KB |
 | `svg-scroll-draw/devtools` | 1.7 KB (dev only) |
@@ -571,6 +605,19 @@ npx svg-scroll-draw init
 
 Scaffolds a ready-to-use starter file for React, Vue, Svelte, Solid, or Vanilla JS.
 
+### Switching from AOS, ScrollReveal or vivus
+
+```bash
+npx svg-scroll-draw migrate --dry-run   # see what would change
+npx svg-scroll-draw migrate             # apply it
+```
+
+Points every `import` / `require` of `aos`, `scrollreveal` and `vivus` at the matching drop-in, swaps CDN
+`<script>` tags for the script-tag builds (dropping any stale `integrity` hash), removes AOS's `aos.css`
+imports, `<link>`s and `@import`s, and swaps the dependency in `package.json`. It rewrites module names,
+URLs and dependency entries only — never the code that uses them — skips `node_modules` and build output,
+and will not write over uncommitted git changes unless you pass `--force`.
+
 ---
 
 ## Browser support

package/dist/cdn/vivus.global.js

@@ -0,0 +1 @@
+"use strict";(()=>{function g(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}function m(r,...t){}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return!1;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],S="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return`M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var x={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return`M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return`M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function A(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n}let i=x[t.tagName.toLowerCase()](e),s=document.createElementNS(S,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t)}}var c=class c{constructor(t,e,i){this.isReady=!1;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=!1;this.reverseStack=!1;this.selfDestroy=!1;this.ignoreInvisible=!1;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init()}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=!0,this.init()}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=!0;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=!0,this.init())};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:!1,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{})}mapping(){let t=0,e=0,i=0,s=!1,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:!1},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=!0,s=!0}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o)}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case"delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case"oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case"sync":case"async":case"nsync":n.startAt=0,n.duration=this.duration;break;case"scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case"scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration})}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()))}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`}this.trace(),this.mustRecalcScale=null}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else{this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished()}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this)}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i))})}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(!0);e.el.parentNode?.replaceChild(i,e.el),e.el=i}init(){this.frameLength=0,this.currentFrame=0,this.map=[],A(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this)}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null)};this.viewportListener=t,window.addEventListener("scroll",t),t()}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e)})}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return!i.width&&!i.height}return!1}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,w=p;globalThis.Vivus=w;})();

package/dist/cli/init.js

@@ -25,8 +25,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // src/cli/init.ts
 var readline = __toESM(require("readline"));
-var fs = __toESM(require("fs"));
-var path = __toESM(require("path"));
+var fs2 = __toESM(require("fs"));
+var path2 = __toESM(require("path"));
 
 // src/cli/generators.ts
 var SAMPLE_SVG_JSX = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
@@ -138,6 +138,254 @@ function needsSelector(framework) {
   return framework === "vanilla";
 }
 
+// src/cli/migrate.ts
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var import_node_child_process = require("child_process");
+var LIBS = ["aos", "scrollreveal", "vivus"];
+var LABEL = { aos: "AOS", scrollreveal: "ScrollReveal", vivus: "vivus" };
+var esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function rewriteSpecifiers(src, changes) {
+  let out = src;
+  for (const lib of LIBS) {
+    const spec = lib === "aos" ? `aos(?:\\/dist\\/aos(?:\\.js)?)?` : esc(lib);
+    const target = `svg-scroll-draw/${lib}`;
+    const fromRe = new RegExp(`(\\bfrom\\s*)(['"])${spec}\\2`, "g");
+    const dynRe = new RegExp(`(\\bimport\\s*\\(\\s*)(['"])${spec}\\2(\\s*\\))`, "g");
+    const reqRe = new RegExp(`(\\brequire\\s*\\(\\s*)(['"])${spec}\\2(\\s*\\))`, "g");
+    let n = 0;
+    out = out.replace(fromRe, (_m, pre, q) => {
+      n++;
+      return `${pre}${q}${target}${q}`;
+    });
+    out = out.replace(dynRe, (_m, pre, q, post) => {
+      n++;
+      return `${pre}${q}${target}${q}${post}`;
+    });
+    out = out.replace(reqRe, (_m, pre, q, post) => {
+      n++;
+      return lib === "aos" ? `${pre}${q}${target}${q}${post}` : `${pre}${q}${target}${q}${post}.default`;
+    });
+    if (n) changes.push(`${LABEL[lib]}: ${n} import${n === 1 ? "" : "s"} \u2192 ${target}`);
+  }
+  return out;
+}
+function dropAosCssImports(src, changes) {
+  let n = 0;
+  const out = src.replace(/^[ \t]*import\s+(['"])aos\/dist\/aos(?:\.min)?\.css\1;?[ \t]*\r?\n?/gm, () => {
+    n++;
+    return "";
+  }).replace(/^[ \t]*require\s*\(\s*(['"])aos\/dist\/aos(?:\.min)?\.css\1\s*\);?[ \t]*\r?\n?/gm, () => {
+    n++;
+    return "";
+  });
+  if (n) changes.push(`AOS: removed ${n} aos.css import${n === 1 ? "" : "s"} (the drop-in ships its styles)`);
+  return out;
+}
+var SCRIPT_URL = {
+  aos: /^(?:https?:)?\/\/(?:unpkg\.com\/aos(?:@[^/]+)?(?:\/dist\/aos(?:\.min)?\.js)?|cdn\.jsdelivr\.net\/npm\/aos(?:@[^/]+)?(?:\/dist\/aos(?:\.min)?\.js)?|cdnjs\.cloudflare\.com\/ajax\/libs\/aos\/[^/]+\/aos(?:\.min)?\.js)$|(?:^|\/)node_modules\/aos\/dist\/aos(?:\.min)?\.js$/,
+  scrollreveal: /^(?:https?:)?\/\/(?:unpkg\.com\/scrollreveal(?:@[^/]+)?(?:\/dist\/scrollreveal(?:\.min)?\.js)?|cdn\.jsdelivr\.net\/npm\/scrollreveal(?:@[^/]+)?(?:\/dist\/scrollreveal(?:\.min)?\.js)?|cdnjs\.cloudflare\.com\/ajax\/libs\/scrollReveal\.js\/[^/]+\/scrollreveal(?:\.min)?\.js)$|(?:^|\/)node_modules\/scrollreveal\/dist\/scrollreveal(?:\.min)?\.js$/i,
+  vivus: /^(?:https?:)?\/\/(?:unpkg\.com\/vivus(?:@[^/]+)?(?:\/dist\/vivus(?:\.min)?\.js)?|cdn\.jsdelivr\.net\/npm\/vivus(?:@[^/]+)?(?:\/dist\/vivus(?:\.min)?\.js)?|cdnjs\.cloudflare\.com\/ajax\/libs\/vivus\/[^/]+\/vivus(?:\.min)?\.js)$|(?:^|\/)node_modules\/vivus\/dist\/vivus(?:\.min)?\.js$/
+};
+var AOS_CSS_URL = /^(?:https?:)?\/\/(?:unpkg\.com\/aos(?:@[^/]+)?\/dist\/aos\.css|cdn\.jsdelivr\.net\/npm\/aos(?:@[^/]+)?\/dist\/aos\.css|cdnjs\.cloudflare\.com\/ajax\/libs\/aos\/[^/]+\/aos(?:\.min)?\.css)$|(?:^|\/)node_modules\/aos\/dist\/aos\.css$/;
+function rewriteScriptTags(src, version, changes) {
+  return src.replace(/<script\b([^>]*)>/gi, (tag, attrs) => {
+    const m = /\bsrc\s*=\s*(["'])([^"']+)\1/i.exec(attrs);
+    if (!m) return tag;
+    const lib = LIBS.find((l) => SCRIPT_URL[l].test(m[2]));
+    if (!lib) return tag;
+    const url = `https://unpkg.com/svg-scroll-draw@${version}/dist/cdn/${lib}.global.js`;
+    const hadIntegrity = /\bintegrity\s*=/i.test(attrs);
+    const next = attrs.replace(m[0], `src=${m[1]}${url}${m[1]}`).replace(/\s+integrity\s*=\s*(["'])[^"']*\1/gi, "");
+    changes.push(`${LABEL[lib]}: <script> \u2192 ${url}${hadIntegrity ? " (old integrity hash removed)" : ""}`);
+    return `<script${next}>`;
+  });
+}
+function dropAosCssLinks(src, changes) {
+  let n = 0;
+  const out = src.replace(/^[ \t]*<link\b[^>]*>[ \t]*\r?\n?/gim, (line) => {
+    const m = /\bhref\s*=\s*(["'])([^"']+)\1/i.exec(line);
+    if (m && AOS_CSS_URL.test(m[2])) {
+      n++;
+      return "";
+    }
+    return line;
+  });
+  if (n) changes.push(`AOS: removed ${n} aos.css <link> (the drop-in ships its styles)`);
+  return out;
+}
+function dropAosCssAtImports(src, changes) {
+  let n = 0;
+  const out = src.replace(
+    /^[ \t]*@import\s+(?:url\(\s*)?(['"]?)~?aos\/dist\/aos(?:\.min)?\.css\1\s*\)?\s*;?[ \t]*\r?\n?/gm,
+    () => {
+      n++;
+      return "";
+    }
+  );
+  if (n) changes.push(`AOS: removed ${n} @import of aos.css (the drop-in ships its styles)`);
+  return out;
+}
+var SCRIPT_EXT = /\.(?:[cm]?[jt]sx?|vue|svelte|astro)$/i;
+var HTML_EXT = /\.(?:html?|vue|svelte|astro|php|ejs|hbs|njk|liquid|erb)$/i;
+var CSS_EXT = /\.(?:css|scss|sass|less)$/i;
+function migrateSource(src, filename, version) {
+  const changes = [];
+  let code = src;
+  if (SCRIPT_EXT.test(filename)) {
+    code = dropAosCssImports(code, changes);
+    code = rewriteSpecifiers(code, changes);
+  }
+  if (HTML_EXT.test(filename)) {
+    code = rewriteScriptTags(code, version, changes);
+    code = dropAosCssLinks(code, changes);
+  }
+  if (CSS_EXT.test(filename) || /\.(?:vue|svelte|astro)$/i.test(filename)) {
+    code = dropAosCssAtImports(code, changes);
+  }
+  return { code, changes };
+}
+function migratePackageJson(text, version) {
+  const changes = [];
+  let pkg;
+  try {
+    pkg = JSON.parse(text);
+  } catch {
+    return { code: text, changes };
+  }
+  const remove = [...LIBS, "@types/aos"];
+  let home = null;
+  for (const field of ["dependencies", "devDependencies"]) {
+    const deps = pkg[field];
+    if (!deps) continue;
+    for (const name of remove) {
+      if (name in deps) {
+        delete deps[name];
+        changes.push(`package.json: removed ${name} from ${field}`);
+        if (!home && name !== "@types/aos") home = field;
+      }
+    }
+  }
+  if (!home) return { code: text, changes };
+  const already = ["dependencies", "devDependencies"].some(
+    (f) => pkg[f]?.["svg-scroll-draw"]
+  );
+  if (!already) {
+    const deps = pkg[home] ?? (pkg[home] = {});
+    deps["svg-scroll-draw"] = `^${version}`;
+    pkg[home] = Object.fromEntries(Object.entries(deps).sort(([a], [b]) => a.localeCompare(b)));
+    changes.push(`package.json: added svg-scroll-draw ^${version} to ${home}`);
+  }
+  const indent = /^\{\r?\n(\t| +)/.exec(text)?.[1] ?? "  ";
+  return { code: JSON.stringify(pkg, null, indent) + (text.endsWith("\n") ? "\n" : ""), changes };
+}
+var SKIP_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  ".git",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".nuxt",
+  ".output",
+  ".svelte-kit",
+  ".vercel",
+  ".netlify",
+  ".turbo",
+  ".cache",
+  "coverage",
+  ".parcel-cache",
+  "vendor"
+]);
+var MAX_BYTES = 2 * 1024 * 1024;
+function* walk(dir) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name) && !entry.name.startsWith(".")) yield* walk(path.join(dir, entry.name));
+    } else if (entry.isFile()) {
+      yield path.join(dir, entry.name);
+    }
+  }
+}
+function installCommand(dir) {
+  if (fs.existsSync(path.join(dir, "pnpm-lock.yaml"))) return "pnpm install";
+  if (fs.existsSync(path.join(dir, "yarn.lock"))) return "yarn install";
+  if (fs.existsSync(path.join(dir, "bun.lockb")) || fs.existsSync(path.join(dir, "bun.lock"))) return "bun install";
+  return "npm install";
+}
+function gitDirty(dir) {
+  try {
+    return (0, import_node_child_process.execSync)("git status --porcelain", { cwd: dir, stdio: ["ignore", "pipe", "ignore"] }).toString().trim() !== "";
+  } catch {
+    return false;
+  }
+}
+var HELP = `
+  svg-scroll-draw migrate [dir] [--dry-run] [--force]
+
+  Moves a project off AOS, ScrollReveal and vivus onto svg-scroll-draw's drop-ins:
+    \u2022 imports / requires of 'aos', 'scrollreveal', 'vivus' \u2192 svg-scroll-draw/<lib>
+    \u2022 CDN <script> tags \u2192 svg-scroll-draw's script-tag builds
+    \u2022 AOS's aos.css imports, <link>s and @imports removed (the drop-in ships its styles)
+    \u2022 package.json: the old packages swapped for svg-scroll-draw
+
+  --dry-run   show what would change, write nothing
+  --force     write even if the git working tree has uncommitted changes
+`;
+function runMigrate(args, version, log = console.log) {
+  if (args.includes("--help") || args.includes("-h")) {
+    log(HELP);
+    return 0;
+  }
+  const dryRun = args.includes("--dry-run");
+  const force = args.includes("--force");
+  const dir = path.resolve(args.find((a) => !a.startsWith("-")) ?? ".");
+  if (!fs.existsSync(dir) || !fs.statSync(dir).isDirectory()) {
+    log(`  \u2717 Not a directory: ${dir}`);
+    return 1;
+  }
+  const edits = [];
+  for (const file of walk(dir)) {
+    const base = path.basename(file);
+    const isPkg = base === "package.json";
+    if (!isPkg && !SCRIPT_EXT.test(base) && !HTML_EXT.test(base) && !CSS_EXT.test(base)) continue;
+    if (fs.statSync(file).size > MAX_BYTES) continue;
+    const text = fs.readFileSync(file, "utf8");
+    if (!isPkg && !/aos|scrollreveal|vivus/i.test(text)) continue;
+    const result = isPkg ? migratePackageJson(text, version) : migrateSource(text, base, version);
+    if (result.changes.length && result.code !== text) edits.push({ file, code: result.code, changes: result.changes });
+  }
+  log(`
+  svg-scroll-draw migrate${dryRun ? " (dry run)" : ""} \u2014 ${dir}
+`);
+  if (!edits.length) {
+    log("  No AOS, ScrollReveal or vivus usage found. Nothing to do.\n");
+    return 0;
+  }
+  for (const { file, changes } of edits) {
+    log(`  ${path.relative(dir, file) || path.basename(file)}`);
+    for (const c of changes) log(`    \u2022 ${c}`);
+  }
+  if (dryRun) {
+    log(`
+  ${edits.length} file${edits.length === 1 ? "" : "s"} would change. Run again without --dry-run to apply.
+`);
+    return 0;
+  }
+  if (!force && gitDirty(dir)) {
+    log("\n  \u2717 The git working tree has uncommitted changes. Commit or stash them first so the");
+    log("    migration is a clean diff you can review, or pass --force to write anyway.\n");
+    return 1;
+  }
+  for (const { file, code } of edits) fs.writeFileSync(file, code);
+  const touchedPkg = edits.some((e) => path.basename(e.file) === "package.json");
+  log(`
+  \u2713 Updated ${edits.length} file${edits.length === 1 ? "" : "s"}.`);
+  log(`  Next: ${touchedPkg ? `run \`${installCommand(dir)}\`, then ` : ""}review the diff (git diff) and try the page.
+`);
+  return 0;
+}
+
 // src/cli/init.ts
 var RESET = "\x1B[0m";
 var BOLD = "\x1B[1m";
@@ -147,19 +395,19 @@ var GREEN = "\x1B[32m";
 var CYAN = "\x1B[36m";
 function ask(rl, question, fallback) {
   return new Promise(
-    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question} ${DIM}(${fallback})${RESET} `, (ans) => {
-      resolve(ans.trim() || fallback);
+    (resolve2) => rl.question(`  ${CYAN}?${RESET} ${question} ${DIM}(${fallback})${RESET} `, (ans) => {
+      resolve2(ans.trim() || fallback);
     })
   );
 }
 function pick(rl, question, options, fallback) {
   const opts = options.map((o, i) => `${DIM}${i + 1})${RESET} ${o}`).join("  ");
   return new Promise(
-    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question}
+    (resolve2) => rl.question(`  ${CYAN}?${RESET} ${question}
      ${opts}
      ${DIM}(${fallback})${RESET} `, (ans) => {
       const idx = parseInt(ans) - 1;
-      resolve(idx >= 0 && idx < options.length ? options[idx] : fallback);
+      resolve2(idx >= 0 && idx < options.length ? options[idx] : fallback);
     })
   );
 }
@@ -179,8 +427,8 @@ async function main() {
     }
     const selector = needsSelector(framework) ? await ask(rl, "CSS selector for your SVG container?", "#my-svg") : "#my-svg";
     const outFile = FILE_NAMES[framework] ?? "scroll-draw.js";
-    const outPath = path.join(process.cwd(), outFile);
-    if (fs.existsSync(outPath)) {
+    const outPath = path2.join(process.cwd(), outFile);
+    if (fs2.existsSync(outPath)) {
       const overwrite = await ask(rl, `${outFile} already exists. Overwrite?`, "y");
       if (overwrite.toLowerCase() !== "y") {
         console.log(`
@@ -190,7 +438,7 @@ async function main() {
       }
     }
     const code = GENERATORS[framework]?.({ selector, easing, preset }) ?? "";
-    fs.writeFileSync(outPath, code, "utf8");
+    fs2.writeFileSync(outPath, code, "utf8");
     console.log(`
  ${GREEN}\u2713${RESET} ${BOLD}${outFile}${RESET} created.
 `);
@@ -208,7 +456,30 @@ async function main() {
     rl.close();
   }
 }
-main().catch((e) => {
-  console.error(e);
-  process.exit(1);
-});
+function ownVersion() {
+  try {
+    return JSON.parse(fs2.readFileSync(path2.join(__dirname, "..", "..", "package.json"), "utf8")).version;
+  } catch {
+    return "latest";
+  }
+}
+var USAGE = `
+  npx svg-scroll-draw init       scaffold a starter file
+  npx svg-scroll-draw migrate    switch a project from AOS, ScrollReveal or vivus (--dry-run to preview)
+`;
+var [command, ...rest] = process.argv.slice(2);
+if (command === "help" || command === "--help" || command === "-h") {
+  console.log(USAGE);
+} else if (command === "migrate") {
+  process.exitCode = runMigrate(rest, ownVersion());
+} else if (command === void 0 || command === "init") {
+  main().catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });
+} else {
+  console.error(`
+  Unknown command "${command}".
+${USAGE}`);
+  process.exitCode = 1;
+}

package/dist/vivus/index.cjs

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});function g(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var w=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function m(r,...t){w&&console.warn(`[svg-scroll-draw] ${r}`,...t);}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return  false;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],x="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i;}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return `M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var A={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return `M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return `M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function R(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n;}let i=A[t.tagName.toLowerCase()](e),s=document.createElementNS(x,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t);}}var c=class c{constructor(t,e,i){this.isReady=false;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=false;this.reverseStack=false;this.selfDestroy=false;this.ignoreInvisible=false;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init();}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s;}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=true,this.init();}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=true;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=true,this.init());};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:false,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{});}mapping(){let t=0,e=0,i=0,s=false,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:false},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=true,s=true;}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o);}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case "delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case "oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case "sync":case "async":case "nsync":n.startAt=0,n.duration=this.duration;break;case "scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case "scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration;});}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()));}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`;}this.trace(),this.mustRecalcScale=null;}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else {this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished();}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this);}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i));});}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(true);e.el.parentNode?.replaceChild(i,e.el),e.el=i;}init(){this.frameLength=0,this.currentFrame=0,this.map=[],R(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this);}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null);};this.viewportListener=t,window.addEventListener("scroll",t),t();}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e);});}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return !i.width&&!i.height}return  false}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,O=p;
+exports.Vivus=p;exports.default=O;

package/dist/vivus/index.d.mts

@@ -0,0 +1,100 @@
+type VivusType = 'delayed' | 'sync' | 'async' | 'nsync' | 'oneByOne' | 'scenario' | 'scenario-sync';
+type VivusStart = 'inViewport' | 'manual' | 'autostart';
+type VivusTiming = (x: number) => number;
+type VivusCallback = (instance: Vivus) => void;
+interface VivusOptions {
+    type?: VivusType;
+    /** Load the SVG from this URL into `element` instead of using markup. */
+    file?: string;
+    start?: VivusStart;
+    /** Animation length in frames. Default 120. */
+    duration?: number;
+    /** For `delayed`: frames between the first and last path starting. Default duration / 3. */
+    delay?: number;
+    /** Extra gap in the dash pattern, so the line start never shows early. Default 1. */
+    dashGap?: number;
+    /** Clone-and-replace each path after every update (an old IE/Edge repaint hack). */
+    forceRender?: boolean;
+    reverseStack?: boolean;
+    selfDestroy?: boolean;
+    onReady?: VivusCallback;
+    ignoreInvisible?: boolean;
+    pathTimingFunction?: VivusTiming;
+    animTimingFunction?: VivusTiming;
+}
+interface PathRecord {
+    el: SVGPathElement;
+    length: number;
+    startAt: number;
+    duration: number;
+    isResizeSensitive: boolean;
+    progress?: number;
+}
+declare class Vivus {
+    static LINEAR: VivusTiming;
+    static EASE: VivusTiming;
+    static EASE_OUT: VivusTiming;
+    static EASE_IN: VivusTiming;
+    static EASE_OUT_BOUNCE: VivusTiming;
+    el: Element;
+    parentEl: Element;
+    isReady: boolean;
+    type: VivusType;
+    start: VivusStart;
+    duration: number;
+    delay: number | null;
+    dashGap: number;
+    forceRender: boolean;
+    reverseStack: boolean;
+    selfDestroy: boolean;
+    ignoreInvisible: boolean;
+    onReady?: VivusCallback;
+    animTimingFunction: VivusTiming;
+    pathTimingFunction: VivusTiming;
+    callback: VivusCallback;
+    map: PathRecord[];
+    frameLength: number;
+    currentFrame: number;
+    delayUnit: number;
+    speed: number;
+    handle: number | null;
+    private instanceCallback;
+    private mustRecalcScale;
+    private viewportListener;
+    constructor(element: string | Element, options?: VivusOptions, callback?: VivusCallback);
+    private setElement;
+    private setOptions;
+    private setCallback;
+    /** Measure every path, set its dashes, and work out when each one draws. */
+    mapping(): void;
+    /** Re-measure `vector-effect: non-scaling-stroke` paths on the next frame (after a resize). */
+    recalc(): void;
+    performLineRecalc(): void;
+    /** One frame: advance by `speed`, render, and finish at either end. */
+    draw(): void;
+    private finished;
+    /** Render the current frame to every path's dash offset. */
+    trace(): void;
+    renderPath(index: number): void;
+    init(): void;
+    private starter;
+    /** `'start'`, `'progress'` or `'end'`. */
+    getStatus(): 'start' | 'progress' | 'end';
+    reset(): this;
+    finish(): this;
+    /** Jump to a point (0–1) and render it. */
+    setFrameProgress(progress: number): this;
+    /**
+     * Animate at `speed` frames per frame (negative plays backwards). The callback
+     * may be given alone, as the first argument.
+     */
+    play(speed?: number | VivusCallback, callback?: VivusCallback): this;
+    stop(): this;
+    /** Stop and remove every dash style vivus set. */
+    destroy(): void;
+    isInvisible(el: Element): boolean;
+    /** Whether `el` is in view; with `h` = 1 its whole height must fit above the fold. */
+    isInViewport(el: Element, h?: number): boolean;
+}
+
+export { Vivus, type VivusCallback, type VivusOptions, type VivusStart, type VivusTiming, type VivusType, Vivus as default };

package/dist/vivus/index.d.ts

@@ -0,0 +1,100 @@
+type VivusType = 'delayed' | 'sync' | 'async' | 'nsync' | 'oneByOne' | 'scenario' | 'scenario-sync';
+type VivusStart = 'inViewport' | 'manual' | 'autostart';
+type VivusTiming = (x: number) => number;
+type VivusCallback = (instance: Vivus) => void;
+interface VivusOptions {
+    type?: VivusType;
+    /** Load the SVG from this URL into `element` instead of using markup. */
+    file?: string;
+    start?: VivusStart;
+    /** Animation length in frames. Default 120. */
+    duration?: number;
+    /** For `delayed`: frames between the first and last path starting. Default duration / 3. */
+    delay?: number;
+    /** Extra gap in the dash pattern, so the line start never shows early. Default 1. */
+    dashGap?: number;
+    /** Clone-and-replace each path after every update (an old IE/Edge repaint hack). */
+    forceRender?: boolean;
+    reverseStack?: boolean;
+    selfDestroy?: boolean;
+    onReady?: VivusCallback;
+    ignoreInvisible?: boolean;
+    pathTimingFunction?: VivusTiming;
+    animTimingFunction?: VivusTiming;
+}
+interface PathRecord {
+    el: SVGPathElement;
+    length: number;
+    startAt: number;
+    duration: number;
+    isResizeSensitive: boolean;
+    progress?: number;
+}
+declare class Vivus {
+    static LINEAR: VivusTiming;
+    static EASE: VivusTiming;
+    static EASE_OUT: VivusTiming;
+    static EASE_IN: VivusTiming;
+    static EASE_OUT_BOUNCE: VivusTiming;
+    el: Element;
+    parentEl: Element;
+    isReady: boolean;
+    type: VivusType;
+    start: VivusStart;
+    duration: number;
+    delay: number | null;
+    dashGap: number;
+    forceRender: boolean;
+    reverseStack: boolean;
+    selfDestroy: boolean;
+    ignoreInvisible: boolean;
+    onReady?: VivusCallback;
+    animTimingFunction: VivusTiming;
+    pathTimingFunction: VivusTiming;
+    callback: VivusCallback;
+    map: PathRecord[];
+    frameLength: number;
+    currentFrame: number;
+    delayUnit: number;
+    speed: number;
+    handle: number | null;
+    private instanceCallback;
+    private mustRecalcScale;
+    private viewportListener;
+    constructor(element: string | Element, options?: VivusOptions, callback?: VivusCallback);
+    private setElement;
+    private setOptions;
+    private setCallback;
+    /** Measure every path, set its dashes, and work out when each one draws. */
+    mapping(): void;
+    /** Re-measure `vector-effect: non-scaling-stroke` paths on the next frame (after a resize). */
+    recalc(): void;
+    performLineRecalc(): void;
+    /** One frame: advance by `speed`, render, and finish at either end. */
+    draw(): void;
+    private finished;
+    /** Render the current frame to every path's dash offset. */
+    trace(): void;
+    renderPath(index: number): void;
+    init(): void;
+    private starter;
+    /** `'start'`, `'progress'` or `'end'`. */
+    getStatus(): 'start' | 'progress' | 'end';
+    reset(): this;
+    finish(): this;
+    /** Jump to a point (0–1) and render it. */
+    setFrameProgress(progress: number): this;
+    /**
+     * Animate at `speed` frames per frame (negative plays backwards). The callback
+     * may be given alone, as the first argument.
+     */
+    play(speed?: number | VivusCallback, callback?: VivusCallback): this;
+    stop(): this;
+    /** Stop and remove every dash style vivus set. */
+    destroy(): void;
+    isInvisible(el: Element): boolean;
+    /** Whether `el` is in view; with `h` = 1 its whole height must fit above the fold. */
+    isInViewport(el: Element, h?: number): boolean;
+}
+
+export { Vivus, type VivusCallback, type VivusOptions, type VivusStart, type VivusTiming, type VivusType, Vivus as default };

package/dist/vivus/index.mjs

@@ -0,0 +1,2 @@
+function g(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var w=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function m(r,...t){w&&console.warn(`[svg-scroll-draw] ${r}`,...t);}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return  false;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],x="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i;}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return `M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var A={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return `M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return `M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function R(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n;}let i=A[t.tagName.toLowerCase()](e),s=document.createElementNS(x,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t);}}var c=class c{constructor(t,e,i){this.isReady=false;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=false;this.reverseStack=false;this.selfDestroy=false;this.ignoreInvisible=false;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init();}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s;}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=true,this.init();}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=true;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=true,this.init());};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:false,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{});}mapping(){let t=0,e=0,i=0,s=false,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:false},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=true,s=true;}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o);}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case "delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case "oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case "sync":case "async":case "nsync":n.startAt=0,n.duration=this.duration;break;case "scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case "scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration;});}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()));}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`;}this.trace(),this.mustRecalcScale=null;}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else {this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished();}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this);}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i));});}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(true);e.el.parentNode?.replaceChild(i,e.el),e.el=i;}init(){this.frameLength=0,this.currentFrame=0,this.map=[],R(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this);}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null);};this.viewportListener=t,window.addEventListener("scroll",t),t();}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e);});}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return !i.width&&!i.height}return  false}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,O=p;
+export{p as Vivus,O as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
   "keywords": [
     "svg",
@@ -62,7 +62,11 @@
     "data-aos",
     "scrollreveal",
     "scrollreveal-alternative",
-    "scroll-reveal-mit"
+    "scroll-reveal-mit",
+    "vivus",
+    "vivus-alternative",
+    "svg-line-drawing",
+    "line-drawing"
   ],
   "homepage": "https://svg-scroll-draw.vercel.app",
   "repository": {
@@ -151,6 +155,9 @@
       ],
       "scrollreveal": [
         "./dist/scrollreveal/index.d.ts"
+      ],
+      "vivus": [
+        "./dist/vivus/index.d.ts"
       ]
     }
   },
@@ -390,6 +397,16 @@
         "default": "./dist/scrollreveal/index.cjs"
       }
     },
+    "./vivus": {
+      "import": {
+        "types": "./dist/vivus/index.d.mts",
+        "default": "./dist/vivus/index.mjs"
+      },
+      "require": {
+        "types": "./dist/vivus/index.d.ts",
+        "default": "./dist/vivus/index.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -417,6 +434,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^2.0.0",
+    "vivus": "^0.4.6",
     "vue": "^3.5.34"
   },
   "sideEffects": [
@@ -424,7 +442,8 @@
     "./dist/cdn/*",
     "./src/web-component/*",
     "./src/cdn.ts",
-    "./src/scrollreveal/cdn.ts"
+    "./src/scrollreveal/cdn.ts",
+    "./src/vivus/cdn.ts"
   ],
   "engines": {
     "node": ">=18"