svg-scroll-draw 2.14.0 → 2.15.0

package/README.md

@@ -375,6 +375,8 @@ inside the module. 3.0 KB gzipped with the styles, against 6.7 KB for AOS 2.3.4
   AOS.init({ once: true });
 ```
 
+[Try it on StackBlitz](https://stackblitz.com/github/DhruvilChauahan0210/ink-scroll/tree/main/examples/aos) — a page written for the original library, with only the import changed.
+
 No bundler? Swap the script tag, and drop the stylesheet link:
 
 ```html
@@ -382,6 +384,22 @@ No bundler? Swap the script tag, and drop the stylesheet link:
 <script>AOS.init();</script>
 ```
 
+**React and Next.js.** `svg-scroll-draw/aos/react` owns the lifecycle AOS never had: it initialises on mount,
+destroys on unmount (so StrictMode's double mount is safe), and new `[data-aos]` content from a route change is
+picked up automatically. The file is marked `"use client"`, so it drops straight into an App Router layout:
+
+```tsx
+// app/layout.tsx — a Server Component
+import { AOSInit } from 'svg-scroll-draw/aos/react';
+
+export default function RootLayout({ children }) {
+  return <html lang="en"><body><AOSInit once duration={600} />{children}</body></html>;
+}
+```
+
+Or call `useAOS(options, refreshKey)` in any client component; changing `refreshKey` (say, the pathname)
+re-measures positions.
+
 `init`, `refresh` and `refreshHard` behave as in AOS 2.3.4: the same trigger positions (anchor
 placements, `data-aos-anchor`, offsets — including AOS's rule that an inline anchor placement without an
 inline offset uses 0), the same `aos-init` / `aos-animate` classes, the same transforms and end states.
@@ -413,10 +431,26 @@ implementation of the same API, so the move is an import change — or one comma
   ScrollReveal({ distance: '40px', duration: 800 }).reveal('.card', { interval: 80 });
 ```
 
+[Try it on StackBlitz](https://stackblitz.com/github/DhruvilChauahan0210/ink-scroll/tree/main/examples/scrollreveal) — a page written for the original library, with only the import changed.
+
 No bundler? `<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/scrollreveal.global.js"></script>`
 defines `window.ScrollReveal` as the function, like ScrollReveal's own file. With CommonJS,
 `require('svg-scroll-draw/scrollreveal').default` is the function.
 
+**React and Next.js.** `useScrollReveal()` from `svg-scroll-draw/scrollreveal/react` reveals the element its
+ref is on — or its children matching `selector`, for `interval` sequences — and cleans up on unmount, so
+components that mount later (a route change, a list that loads) are revealed too:
+
+```tsx
+'use client';
+import { useScrollReveal } from 'svg-scroll-draw/scrollreveal/react';
+
+export function Cards() {
+  const ref = useScrollReveal({ selector: '.card', interval: 80, distance: '30px' });
+  return <div ref={ref}>{/* .card children */}</div>;
+}
+```
+
 Every option behaves as in 4.0.9 — `distance` / `origin`, `opacity`, `scale`, `rotate`, `duration`,
 `delay`, `easing`, `interval` sequences, `reset`, `useDelay`, `viewFactor`, `viewOffset`,
 `container`, `mobile` / `desktop`, `cleanup` and the four callbacks — as do `reveal`, `clean`, `sync`,
@@ -445,9 +479,24 @@ On [vivus](https://github.com/maxwellito/vivus)? It has not shipped since 0.4.6
   new Vivus('my-svg', { type: 'oneByOne', duration: 200 }, () => console.log('drawn'));
 ```
 
+[Try it on StackBlitz](https://stackblitz.com/github/DhruvilChauahan0210/ink-scroll/tree/main/examples/vivus) — a page written for the original library, with only the import changed.
+
 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.
 
+**React and Next.js.** `useVivus()` from `svg-scroll-draw/vivus/react` creates the instance on the mounted
+`<svg>`, destroys it on unmount, and hands it back for `play()`, `reset()` and the rest:
+
+```tsx
+'use client';
+import { useVivus } from 'svg-scroll-draw/vivus/react';
+
+export function Logo() {
+  const [ref, vivus] = useVivus<SVGSVGElement>({ type: 'oneByOne', duration: 120 });
+  return <svg ref={ref} onClick={() => vivus?.reset().play()}>{/* paths */}</svg>;
+}
+```
+
 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
@@ -555,6 +604,9 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 | `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) |
+| `svg-scroll-draw/aos/react` | `useAOS`, `AOSInit` (`"use client"`) |
+| `svg-scroll-draw/scrollreveal/react` | `useScrollReveal` (`"use client"`) |
+| `svg-scroll-draw/vivus/react` | `useVivus` (`"use client"`) |
 
 ---
 

package/dist/aos/react/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+"use strict";var h=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var n in t)h(e,n,{get:t[n],enumerable:!0})},U=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of X(t))!Z.call(e,i)&&i!==n&&h(e,i,{get:()=>t[i],enumerable:!(o=W(t,i))||o.enumerable});return e};var K=e=>U(h({},"__esModule",{value:!0}),e);var ue={};j(ue,{AOSInit:()=>ce,useAOS:()=>G});module.exports=K(ue);var m=require("react");function $(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var J=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function M(e,...t){J&&console.warn(`[svg-scroll-draw] ${e}`,...t)}var C={offset:120,delay:0,duration:400,easing:"ease",once:!1,mirror:!1,anchorPlacement:"top-bottom",disable:!1,startEvent:"DOMContentLoaded",disableMutationObserver:!1,initClassName:"aos-init",animatedClassName:"aos-animate",useClassNames:!1,throttleDelay:99,debounceDelay:50},ee={"ease-in-back":"cubic-bezier(.6,-.28,.735,.045)","ease-out-back":"cubic-bezier(.175,.885,.32,1.275)","ease-in-out-back":"cubic-bezier(.68,-.55,.265,1.55)","ease-in-sine":"cubic-bezier(.47,0,.745,.715)","ease-out-sine":"cubic-bezier(.39,.575,.565,1)","ease-in-out-sine":"cubic-bezier(.445,.05,.55,.95)","ease-in-quad":"cubic-bezier(.55,.085,.68,.53)","ease-out-quad":"cubic-bezier(.25,.46,.45,.94)","ease-in-out-quad":"cubic-bezier(.455,.03,.515,.955)","ease-in-cubic":"cubic-bezier(.55,.055,.675,.19)","ease-out-cubic":"cubic-bezier(.215,.61,.355,1)","ease-in-out-cubic":"cubic-bezier(.645,.045,.355,1)","ease-in-quart":"cubic-bezier(.895,.03,.685,.22)","ease-out-quart":"cubic-bezier(.165,.84,.44,1)","ease-in-out-quart":"cubic-bezier(.77,0,.175,1)"},E="svg-scroll-draw-aos",r=(e,t)=>`translate3d(${e},${t},0)`,te=[["fade-up",r("0","100px")],["fade-down",r("0","-100px")],["fade-right",r("-100px","0")],["fade-left",r("100px","0")],["fade-up-right",r("-100px","100px")],["fade-up-left",r("100px","100px")],["fade-down-right",r("-100px","-100px")],["fade-down-left",r("100px","-100px")],["zoom-in","scale(.6)"],["zoom-out","scale(1.2)"],["zoom-in-up",`${r("0","100px")} scale(.6)`],["zoom-in-down",`${r("0","-100px")} scale(.6)`],["zoom-in-right",`${r("-100px","0")} scale(.6)`],["zoom-in-left",`${r("100px","0")} scale(.6)`],["zoom-out-up",`${r("0","100px")} scale(1.2)`],["zoom-out-down",`${r("0","-100px")} scale(1.2)`],["zoom-out-right",`${r("-100px","0")} scale(1.2)`],["zoom-out-left",`${r("100px","0")} scale(1.2)`],["slide-up",r("0","100%")],["slide-down",r("0","-100%")],["slide-right",r("-100%","0")],["slide-left",r("100%","0")],["flip-left","perspective(2500px) rotateY(-100deg)"],["flip-right","perspective(2500px) rotateY(100deg)"],["flip-up","perspective(2500px) rotateX(-100deg)"],["flip-down","perspective(2500px) rotateX(100deg)"]];function ne(e){let t=`.${e}`,n=o=>`[data-aos^=${o}][data-aos^=${o}]`;return["[data-aos][data-aos]{transition-duration:var(--aos-duration,400ms);transition-timing-function:var(--aos-easing,ease);transition-delay:0s}",`[data-aos][data-aos]${t}{transition-delay:var(--aos-delay,0ms)}`,`${n("fade")}{opacity:0;transition-property:opacity,transform}`,`${n("fade")}${t}{opacity:1;transform:translateZ(0)}`,`${n("zoom")}{opacity:0;transition-property:opacity,transform}`,`${n("zoom")}${t}{opacity:1;transform:translateZ(0) scale(1)}`,`${n("slide")}{transition-property:transform}`,`${n("slide")}${t}{transform:translateZ(0)}`,`${n("flip")}{backface-visibility:hidden;transition-property:transform}`,...te.map(([o,i])=>`[data-aos=${o}]{transform:${i}}`),...["left","right"].map(o=>`[data-aos=flip-${o}]${t}{transform:perspective(2500px) rotateY(0)}`),...["up","down"].map(o=>`[data-aos=flip-${o}]${t}{transform:perspective(2500px) rotateX(0)}`),"[data-aos-instant][data-aos-instant]{transition:none!important}"].join(`
+`)}var a={...C},c=[],f=!1,p=0,L,b=null,d=null,A=!1,N=()=>typeof window<"u"&&typeof document<"u";function D(e){if(!(e instanceof HTMLElement))return e.getBoundingClientRect().top+window.scrollY;let t=0,n=e;for(;n;)t+=n.offsetTop-(n.tagName!=="BODY"?n.scrollTop:0),n=n.offsetParent;return t}var R=e=>e instanceof HTMLElement?e.offsetHeight:e.getBoundingClientRect().height;function u(e,t){return e.getAttribute(`data-aos-${t}`)}function z(e,t,n){let o=u(e,t);return o==="true"?!0:o==="false"?!1:n}function k(e,t){let n=u(e,"offset");return n&&!isNaN(Number(n))?parseInt(n,10):n||t?0:a.offset}function oe(e){let t=window.innerHeight,n=u(e,"anchor-placement"),o=k(e,n),i=u(e,"anchor"),O=i?document.querySelector(i):null;i&&!O&&M(`aos: data-aos-anchor="${i}" matches nothing; using the element itself`);let S=O||e,l=R(S),s=D(S)-t;switch(n||a.anchorPlacement){case"center-bottom":s+=l/2;break;case"bottom-bottom":s+=l;break;case"top-center":s+=t/2;break;case"center-center":s+=t/2+l/2;break;case"bottom-center":s+=t/2+l;break;case"top-top":s+=t;break;case"bottom-top":s+=t+l;break;case"center-top":s+=t+l/2;break;default:break}return s+o}function ae(e){return D(e)+R(e)-k(e,null)}function re(e){let t=u(e,"duration")??String(a.duration),n=u(e,"delay")??String(a.delay),o=u(e,"easing")??a.easing;e.style.setProperty("--aos-duration",`${parseFloat(t)||0}ms`),e.style.setProperty("--aos-delay",`${parseFloat(n)||0}ms`),e.style.setProperty("--aos-easing",ee[o]??o)}function H(){c=Array.from(document.querySelectorAll("[data-aos]")).map(e=>{let t=c.find(n=>n.node===e);return{node:e,in:0,out:0,once:z(e,"once",a.once),mirror:z(e,"mirror",a.mirror),animated:t?t.animated:e.classList.contains(a.animatedClassName),classes:a.useClassNames?(e.getAttribute("data-aos")||"").split(" ").filter(Boolean):[],id:u(e,"id")}});for(let e of c)re(e.node),e.node.classList.add(a.initClassName)}function I(){for(let e of c)e.in=oe(e.node),e.out=ae(e.node)}function q(e,t){document.dispatchEvent(new CustomEvent(`aos:${e}`,{detail:t.node})),t.id&&document.dispatchEvent(new CustomEvent(`aos:${e}:${t.id}`,{detail:t.node}))}function T(e){e.animated||(e.animated=!0,e.node.classList.add(a.animatedClassName,...e.classes),q("in",e))}function _(e){e.animated&&(e.animated=!1,e.node.classList.remove(a.animatedClassName,...e.classes),q("out",e))}function x(){p=0;let e=window.scrollY;for(let t of c){if(A){T(t);continue}t.mirror&&!t.once&&e>t.out?_(t):e>t.in?T(t):t.once||_(t)}}var P=()=>{p||(p=requestAnimationFrame(x))};function v(){clearTimeout(L),L=setTimeout(y,50)}var Q=()=>y();function F(){let e=a.disable;if(typeof e=="function")return e();if(e===!0)return!0;let t=window.innerWidth;return e==="phone"?t<768:e==="tablet"?t>=768&&t<1024:e==="mobile"?t<1024:!1}function V(){document.querySelectorAll("[data-aos]").forEach(e=>{for(let t of["data-aos","data-aos-easing","data-aos-duration","data-aos-delay"])e.removeAttribute(t)})}function ie(){if(document.getElementById(E))return;let e=document.createElement("style");e.id=E,e.textContent=ne(a.animatedClassName),document.head.appendChild(e)}function w(){if(!f){if(f=!0,d=null,H(),A)for(let e of c)e.node.setAttribute("data-aos-instant","");I(),x(),window.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",v),window.addEventListener("orientationchange",v),window.addEventListener("load",Q),!a.disableMutationObserver&&typeof MutationObserver<"u"&&(b=new MutationObserver(e=>{e.some(n=>[...Array.from(n.addedNodes),...Array.from(n.removedNodes)].some(o=>o instanceof Element&&(o.hasAttribute("data-aos")||o.querySelector("[data-aos]"))))&&Y()}),b.observe(document.documentElement,{childList:!0,subtree:!0}))}}function se(e={}){if(!N())return[];if((f||d)&&B(),a={...C,...e},F())return V(),[];A=$(),ie();let t=document.readyState!=="loading";if(a.startEvent==="DOMContentLoaded"&&t)w();else if(a.startEvent==="load"&&document.readyState==="complete")w();else{let n=a.startEvent==="load"?window:document,o=()=>w();n.addEventListener(a.startEvent,o,{once:!0}),d={target:n,type:a.startEvent,fn:o}}return Array.from(document.querySelectorAll("[data-aos]"))}function y(){f&&(I(),x())}function Y(){if(f){if(F()){V();return}H(),y()}}function B(){if(N()){d&&d.target.removeEventListener(d.type,d.fn),d=null,cancelAnimationFrame(p),p=0,clearTimeout(L),window.removeEventListener("scroll",P),window.removeEventListener("resize",v),window.removeEventListener("orientationchange",v),window.removeEventListener("load",Q),b?.disconnect(),b=null;for(let e of c)e.node.removeAttribute("data-aos-instant");c=[],f=!1,document.getElementById(E)?.remove()}}var de={init:se,refresh:y,refreshHard:Y,destroy:B},g=de;function G(e={},t){let n=(0,m.useRef)(e);n.current=e,(0,m.useEffect)(()=>(g.init(n.current),()=>g.destroy()),[]);let o=(0,m.useRef)(!0);(0,m.useEffect)(()=>{if(o.current){o.current=!1;return}g.refreshHard()},[t])}function ce({refreshKey:e,...t}){return G(t,e),null}0&&(module.exports={AOSInit,useAOS});

package/dist/aos/react/index.d.mts

@@ -0,0 +1,44 @@
+type AOSAnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
+interface AOSOptions {
+    /** Px from the trigger point before the animation starts. Default 120. */
+    offset?: number;
+    /** Ms to wait before animating in. Default 0. */
+    delay?: number;
+    /** Animation length in ms. Default 400. */
+    duration?: number;
+    /** An AOS easing name (`'ease-out-back'`…) or any CSS timing function. Default `'ease'`. */
+    easing?: string;
+    /** Animate only the first time the element scrolls in. Default false. */
+    once?: boolean;
+    /** Animate out again when the element scrolls past the top. Default false. */
+    mirror?: boolean;
+    /** Which edge of the element meets which edge of the window. Default `'top-bottom'`. */
+    anchorPlacement?: AOSAnchorPlacement;
+    /** Skip animations entirely: a boolean, a predicate, or a viewport class. */
+    disable?: boolean | 'phone' | 'tablet' | 'mobile' | (() => boolean);
+    /** Document event that starts AOS. Default `'DOMContentLoaded'`. */
+    startEvent?: string;
+    /** Do not watch the DOM for new `[data-aos]` elements. Default false. */
+    disableMutationObserver?: boolean;
+    /** Class added at init. Default `'aos-init'`. */
+    initClassName?: string;
+    /** Class added while animated in. Default `'aos-animate'`. */
+    animatedClassName?: string;
+    /** Also add the `data-aos` value as classes (for animate.css-style sets). Default false. */
+    useClassNames?: boolean;
+    /** Accepted for compatibility; scroll handling is batched per frame instead. */
+    throttleDelay?: number;
+    /** Accepted for compatibility; resize handling is debounced internally. */
+    debounceDelay?: number;
+}
+
+/** Start AOS for the page, and stop it on unmount. Options are read once, on mount. */
+declare function useAOS(options?: AOSOptions, refreshKey?: unknown): void;
+type AOSInitProps = AOSOptions & {
+    /** Re-measure trigger positions whenever this changes (e.g. the pathname). */
+    refreshKey?: unknown;
+};
+/** `useAOS` as a component, for a layout that cannot call hooks itself. Renders nothing. */
+declare function AOSInit({ refreshKey, ...options }: AOSInitProps): null;
+
+export { AOSInit, type AOSInitProps, useAOS };

package/dist/aos/react/index.d.ts

@@ -0,0 +1,44 @@
+type AOSAnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
+interface AOSOptions {
+    /** Px from the trigger point before the animation starts. Default 120. */
+    offset?: number;
+    /** Ms to wait before animating in. Default 0. */
+    delay?: number;
+    /** Animation length in ms. Default 400. */
+    duration?: number;
+    /** An AOS easing name (`'ease-out-back'`…) or any CSS timing function. Default `'ease'`. */
+    easing?: string;
+    /** Animate only the first time the element scrolls in. Default false. */
+    once?: boolean;
+    /** Animate out again when the element scrolls past the top. Default false. */
+    mirror?: boolean;
+    /** Which edge of the element meets which edge of the window. Default `'top-bottom'`. */
+    anchorPlacement?: AOSAnchorPlacement;
+    /** Skip animations entirely: a boolean, a predicate, or a viewport class. */
+    disable?: boolean | 'phone' | 'tablet' | 'mobile' | (() => boolean);
+    /** Document event that starts AOS. Default `'DOMContentLoaded'`. */
+    startEvent?: string;
+    /** Do not watch the DOM for new `[data-aos]` elements. Default false. */
+    disableMutationObserver?: boolean;
+    /** Class added at init. Default `'aos-init'`. */
+    initClassName?: string;
+    /** Class added while animated in. Default `'aos-animate'`. */
+    animatedClassName?: string;
+    /** Also add the `data-aos` value as classes (for animate.css-style sets). Default false. */
+    useClassNames?: boolean;
+    /** Accepted for compatibility; scroll handling is batched per frame instead. */
+    throttleDelay?: number;
+    /** Accepted for compatibility; resize handling is debounced internally. */
+    debounceDelay?: number;
+}
+
+/** Start AOS for the page, and stop it on unmount. Options are read once, on mount. */
+declare function useAOS(options?: AOSOptions, refreshKey?: unknown): void;
+type AOSInitProps = AOSOptions & {
+    /** Re-measure trigger positions whenever this changes (e.g. the pathname). */
+    refreshKey?: unknown;
+};
+/** `useAOS` as a component, for a layout that cannot call hooks itself. Renders nothing. */
+declare function AOSInit({ refreshKey, ...options }: AOSInitProps): null;
+
+export { AOSInit, type AOSInitProps, useAOS };

package/dist/aos/react/index.mjs

@@ -0,0 +1,3 @@
+"use client";
+import{useEffect as Y,useRef as B}from"react";function O(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var G=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function S(e,...t){G&&console.warn(`[svg-scroll-draw] ${e}`,...t)}var T={offset:120,delay:0,duration:400,easing:"ease",once:!1,mirror:!1,anchorPlacement:"top-bottom",disable:!1,startEvent:"DOMContentLoaded",disableMutationObserver:!1,initClassName:"aos-init",animatedClassName:"aos-animate",useClassNames:!1,throttleDelay:99,debounceDelay:50},W={"ease-in-back":"cubic-bezier(.6,-.28,.735,.045)","ease-out-back":"cubic-bezier(.175,.885,.32,1.275)","ease-in-out-back":"cubic-bezier(.68,-.55,.265,1.55)","ease-in-sine":"cubic-bezier(.47,0,.745,.715)","ease-out-sine":"cubic-bezier(.39,.575,.565,1)","ease-in-out-sine":"cubic-bezier(.445,.05,.55,.95)","ease-in-quad":"cubic-bezier(.55,.085,.68,.53)","ease-out-quad":"cubic-bezier(.25,.46,.45,.94)","ease-in-out-quad":"cubic-bezier(.455,.03,.515,.955)","ease-in-cubic":"cubic-bezier(.55,.055,.675,.19)","ease-out-cubic":"cubic-bezier(.215,.61,.355,1)","ease-in-out-cubic":"cubic-bezier(.645,.045,.355,1)","ease-in-quart":"cubic-bezier(.895,.03,.685,.22)","ease-out-quart":"cubic-bezier(.165,.84,.44,1)","ease-in-out-quart":"cubic-bezier(.77,0,.175,1)"},h="svg-scroll-draw-aos",r=(e,t)=>`translate3d(${e},${t},0)`,X=[["fade-up",r("0","100px")],["fade-down",r("0","-100px")],["fade-right",r("-100px","0")],["fade-left",r("100px","0")],["fade-up-right",r("-100px","100px")],["fade-up-left",r("100px","100px")],["fade-down-right",r("-100px","-100px")],["fade-down-left",r("100px","-100px")],["zoom-in","scale(.6)"],["zoom-out","scale(1.2)"],["zoom-in-up",`${r("0","100px")} scale(.6)`],["zoom-in-down",`${r("0","-100px")} scale(.6)`],["zoom-in-right",`${r("-100px","0")} scale(.6)`],["zoom-in-left",`${r("100px","0")} scale(.6)`],["zoom-out-up",`${r("0","100px")} scale(1.2)`],["zoom-out-down",`${r("0","-100px")} scale(1.2)`],["zoom-out-right",`${r("-100px","0")} scale(1.2)`],["zoom-out-left",`${r("100px","0")} scale(1.2)`],["slide-up",r("0","100%")],["slide-down",r("0","-100%")],["slide-right",r("-100%","0")],["slide-left",r("100%","0")],["flip-left","perspective(2500px) rotateY(-100deg)"],["flip-right","perspective(2500px) rotateY(100deg)"],["flip-up","perspective(2500px) rotateX(-100deg)"],["flip-down","perspective(2500px) rotateX(100deg)"]];function Z(e){let t=`.${e}`,n=o=>`[data-aos^=${o}][data-aos^=${o}]`;return["[data-aos][data-aos]{transition-duration:var(--aos-duration,400ms);transition-timing-function:var(--aos-easing,ease);transition-delay:0s}",`[data-aos][data-aos]${t}{transition-delay:var(--aos-delay,0ms)}`,`${n("fade")}{opacity:0;transition-property:opacity,transform}`,`${n("fade")}${t}{opacity:1;transform:translateZ(0)}`,`${n("zoom")}{opacity:0;transition-property:opacity,transform}`,`${n("zoom")}${t}{opacity:1;transform:translateZ(0) scale(1)}`,`${n("slide")}{transition-property:transform}`,`${n("slide")}${t}{transform:translateZ(0)}`,`${n("flip")}{backface-visibility:hidden;transition-property:transform}`,...X.map(([o,u])=>`[data-aos=${o}]{transform:${u}}`),...["left","right"].map(o=>`[data-aos=flip-${o}]${t}{transform:perspective(2500px) rotateY(0)}`),...["up","down"].map(o=>`[data-aos=flip-${o}]${t}{transform:perspective(2500px) rotateX(0)}`),"[data-aos-instant][data-aos-instant]{transition:none!important}"].join(`
+`)}var a={...T},d=[],f=!1,m=0,w,p=null,s=null,E=!1,_=()=>typeof window<"u"&&typeof document<"u";function C(e){if(!(e instanceof HTMLElement))return e.getBoundingClientRect().top+window.scrollY;let t=0,n=e;for(;n;)t+=n.offsetTop-(n.tagName!=="BODY"?n.scrollTop:0),n=n.offsetParent;return t}var N=e=>e instanceof HTMLElement?e.offsetHeight:e.getBoundingClientRect().height;function c(e,t){return e.getAttribute(`data-aos-${t}`)}function $(e,t,n){let o=c(e,t);return o==="true"?!0:o==="false"?!1:n}function D(e,t){let n=c(e,"offset");return n&&!isNaN(Number(n))?parseInt(n,10):n||t?0:a.offset}function j(e){let t=window.innerHeight,n=c(e,"anchor-placement"),o=D(e,n),u=c(e,"anchor"),A=u?document.querySelector(u):null;u&&!A&&S(`aos: data-aos-anchor="${u}" matches nothing; using the element itself`);let x=A||e,l=N(x),i=C(x)-t;switch(n||a.anchorPlacement){case"center-bottom":i+=l/2;break;case"bottom-bottom":i+=l;break;case"top-center":i+=t/2;break;case"center-center":i+=t/2+l/2;break;case"bottom-center":i+=t/2+l;break;case"top-top":i+=t;break;case"bottom-top":i+=t+l;break;case"center-top":i+=t+l/2;break;default:break}return i+o}function U(e){return C(e)+N(e)-D(e,null)}function K(e){let t=c(e,"duration")??String(a.duration),n=c(e,"delay")??String(a.delay),o=c(e,"easing")??a.easing;e.style.setProperty("--aos-duration",`${parseFloat(t)||0}ms`),e.style.setProperty("--aos-delay",`${parseFloat(n)||0}ms`),e.style.setProperty("--aos-easing",W[o]??o)}function R(){d=Array.from(document.querySelectorAll("[data-aos]")).map(e=>{let t=d.find(n=>n.node===e);return{node:e,in:0,out:0,once:$(e,"once",a.once),mirror:$(e,"mirror",a.mirror),animated:t?t.animated:e.classList.contains(a.animatedClassName),classes:a.useClassNames?(e.getAttribute("data-aos")||"").split(" ").filter(Boolean):[],id:c(e,"id")}});for(let e of d)K(e.node),e.node.classList.add(a.initClassName)}function k(){for(let e of d)e.in=j(e.node),e.out=U(e.node)}function H(e,t){document.dispatchEvent(new CustomEvent(`aos:${e}`,{detail:t.node})),t.id&&document.dispatchEvent(new CustomEvent(`aos:${e}:${t.id}`,{detail:t.node}))}function M(e){e.animated||(e.animated=!0,e.node.classList.add(a.animatedClassName,...e.classes),H("in",e))}function z(e){e.animated&&(e.animated=!1,e.node.classList.remove(a.animatedClassName,...e.classes),H("out",e))}function L(){m=0;let e=window.scrollY;for(let t of d){if(E){M(t);continue}t.mirror&&!t.once&&e>t.out?z(t):e>t.in?M(t):t.once||z(t)}}var I=()=>{m||(m=requestAnimationFrame(L))};function b(){clearTimeout(w),w=setTimeout(v,50)}var q=()=>v();function P(){let e=a.disable;if(typeof e=="function")return e();if(e===!0)return!0;let t=window.innerWidth;return e==="phone"?t<768:e==="tablet"?t>=768&&t<1024:e==="mobile"?t<1024:!1}function Q(){document.querySelectorAll("[data-aos]").forEach(e=>{for(let t of["data-aos","data-aos-easing","data-aos-duration","data-aos-delay"])e.removeAttribute(t)})}function J(){if(document.getElementById(h))return;let e=document.createElement("style");e.id=h,e.textContent=Z(a.animatedClassName),document.head.appendChild(e)}function g(){if(!f){if(f=!0,s=null,R(),E)for(let e of d)e.node.setAttribute("data-aos-instant","");k(),L(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",b),window.addEventListener("orientationchange",b),window.addEventListener("load",q),!a.disableMutationObserver&&typeof MutationObserver<"u"&&(p=new MutationObserver(e=>{e.some(n=>[...Array.from(n.addedNodes),...Array.from(n.removedNodes)].some(o=>o instanceof Element&&(o.hasAttribute("data-aos")||o.querySelector("[data-aos]"))))&&F()}),p.observe(document.documentElement,{childList:!0,subtree:!0}))}}function ee(e={}){if(!_())return[];if((f||s)&&V(),a={...T,...e},P())return Q(),[];E=O(),J();let t=document.readyState!=="loading";if(a.startEvent==="DOMContentLoaded"&&t)g();else if(a.startEvent==="load"&&document.readyState==="complete")g();else{let n=a.startEvent==="load"?window:document,o=()=>g();n.addEventListener(a.startEvent,o,{once:!0}),s={target:n,type:a.startEvent,fn:o}}return Array.from(document.querySelectorAll("[data-aos]"))}function v(){f&&(k(),L())}function F(){if(f){if(P()){Q();return}R(),v()}}function V(){if(_()){s&&s.target.removeEventListener(s.type,s.fn),s=null,cancelAnimationFrame(m),m=0,clearTimeout(w),window.removeEventListener("scroll",I),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),window.removeEventListener("load",q),p?.disconnect(),p=null;for(let e of d)e.node.removeAttribute("data-aos-instant");d=[],f=!1,document.getElementById(h)?.remove()}}var te={init:ee,refresh:v,refreshHard:F,destroy:V},y=te;function ne(e={},t){let n=B(e);n.current=e,Y(()=>(y.init(n.current),()=>y.destroy()),[]);let o=B(!0);Y(()=>{if(o.current){o.current=!1;return}y.refreshHard()},[t])}function ue({refreshKey:e,...t}){return ne(t,e),null}export{ue as AOSInit,ne as useAOS};

package/dist/scrollreveal/react/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+"use strict";var z=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var le=Object.prototype.hasOwnProperty;var ce=(e,n)=>{for(var t in n)z(e,t,{get:n[t],enumerable:!0})},de=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of ae(n))!le.call(e,i)&&i!==t&&z(e,i,{get:()=>n[i],enumerable:!(o=se(n,i))||o.enumerable});return e};var ue=e=>de(z({},"__esModule",{value:!0}),e);var Oe={};ce(Oe,{useScrollReveal:()=>Le});module.exports=ue(Oe);var T=require("react");function V(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var Z="4.0.9",W=()=>typeof window<"u"&&typeof document<"u",H=e=>e!==null&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]";function q(e,...n){for(let t of n)if(H(t))for(let o of Object.keys(t)){let i=t[o];H(i)?(H(e[o])||(e[o]={}),q(e[o],i)):e[o]=i}return e}function A(e){if(typeof e=="string")try{return Array.from(document.querySelectorAll(e))}catch{return[]}return e instanceof Element?[e]:e&&typeof e.length=="number"?Array.from(e).filter(n=>n instanceof Element):[]}var $=(e=navigator.userAgent)=>/Android|iPhone|iPad|iPod/i.test(e),Q=!1;function D(e,...n){Q&&typeof console<"u"&&console.log(`%cScrollReveal: ${e}${n.map(t=>`
+ \u2014 ${t}`).join("")}`,"color: #ea654b;")}var k=()=>[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function fe(e,n){let t=[];for(let o=0;o<4;o++)for(let i=0;i<4;i++){let r=0;for(let s=0;s<4;s++)r+=e[i+4*s]*n[4*o+s];t[i+4*o]=r}return t}function me(e){let n=/matrix(3d)?\(([^)]+)\)/.exec(e||"");if(!n)return k();let t=n[2].split(", ").map(parseFloat);if(t.length===16)return t;let o=k();return[o[0],o[1],o[4],o[5],o[12],o[13]]=t,o}function N(e,n){let t=Math.PI/180*n,o=Math.cos(t),i=Math.sin(t),r=k(),[s,a,c,h]=e==="x"?[5,10,6,9]:e==="y"?[0,10,8,2]:[0,5,1,4];return r[s]=r[a]=o,r[c]=i,r[h]=-i,r}function be(e,n){let t=k();return t[e==="X"?12:13]=n,t}function ve(e){let n=k();return n[0]=n[5]=e,n}function g(e,n){for(let t of n.split(";")){let o=t.indexOf(":");if(o<1)continue;let i=t.slice(0,o).trim(),r=t.slice(o+1).trim();i&&r&&e.style.setProperty(i,r)}}function pe(e){let{node:n,config:t}=e,o=window.getComputedStyle(n),i=(n.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[],r=i.map(d=>d.trim()),s=`${r.join("; ")};`,a=i.some(d=>/visibility\s?:\s?visible/i.test(d))?s:`${[...r,"visibility: visible"].join("; ")};`,c=parseFloat(o.opacity),h=t.opacity!==null&&!isNaN(parseFloat(String(t.opacity)))?parseFloat(String(t.opacity)):c,b=c!==h?{computed:`opacity: ${c};`,generated:`opacity: ${h};`}:{computed:"",generated:""},u=[];if(parseFloat(t.distance)){let d=t.origin==="top"||t.origin==="bottom"?"Y":"X",f=t.distance;(t.origin==="top"||t.origin==="left")&&(f=f.startsWith("-")?f.slice(1):`-${f}`);let E=f.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g)||[],m=Number(E[0]),C=E[1],L;if(C==="em")L=parseInt(o.fontSize,10)*m;else if(C==="px")L=m;else if(C==="%"){let U=n.getBoundingClientRect();L=(d==="Y"?U.height:U.width)*m/100}else throw new RangeError("Unrecognized or missing distance unit.");u.push(be(d,L))}t.rotate.x&&u.push(N("x",t.rotate.x)),t.rotate.y&&u.push(N("y",t.rotate.y)),t.rotate.z&&u.push(N("z",t.rotate.z)),t.scale!==1&&u.push(ve(t.scale===0?2e-4:t.scale));let v={initial:"",final:""};if(u.length){let d=me(o.transform);v={initial:`transform: matrix3d(${u.reduce(fe,d).join(", ")});`,final:`transform: matrix3d(${d.join(", ")});`}}let w={delayed:"",instant:""};if(b.generated||v.initial){let d=m=>`${m/1e3}s`,f=[],E=m=>({delayed:`${m} ${d(t.duration)} ${t.easing} ${d(t.delay)}`,instant:`${m} ${d(t.duration)} ${t.easing} 0s`});o.transition&&!/all 0s|none 0s/.test(o.transition)&&f.push({delayed:o.transition,instant:o.transition}),b.generated&&f.push(E("opacity")),v.initial&&f.push(E("transform")),w={delayed:`transition: ${f.map(m=>m.delayed).join(", ")};`,instant:`transition: ${f.map(m=>m.instant).join(", ")};`}}return{inline:{computed:s,generated:a},opacity:b,position:o.position,transform:v,transition:w}}var M=(...e)=>e.filter(n=>n!=="").join(" "),ge=()=>({delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:()=>{},afterReveal:()=>{},beforeReset:()=>{},beforeReveal:()=>{}}),p=null,O=null,l={containers:{},elements:{},history:[],sequences:{}},B=!0,j=null,R=0,G=!1,ye=0,F=()=>ye++;function J(e,n=!1){let t=e,o=n?t.clientHeight:t.offsetHeight,i=n?t.clientWidth:t.offsetWidth,r=0,s=0,a=t;for(;a;)isNaN(a.offsetTop)||(r+=a.offsetTop),isNaN(a.offsetLeft)||(s+=a.offsetLeft),a=a.offsetParent;return{bounds:{top:r,right:s+i,bottom:r+o,left:s},height:o,width:i}}var he=e=>e.node===document.documentElement?{top:window.pageYOffset,left:window.pageXOffset}:{top:e.node.scrollTop,left:e.node.scrollLeft};function we(e){let n=l.containers[e.containerId];if(!n||!n.geometry||!n.scroll||!e.geometry)return!1;let t=Math.max(0,Math.min(1,e.config.viewFactor)),o=e.config.viewOffset,i=e.geometry,r={top:i.bounds.top+i.height*t,right:i.bounds.right-i.width*t,bottom:i.bounds.bottom-i.height*t,left:i.bounds.left+i.width*t},s={top:n.geometry.bounds.top+n.scroll.top+o.top,right:n.geometry.bounds.right+n.scroll.left-o.right,bottom:n.geometry.bounds.bottom+n.scroll.top-o.bottom,left:n.geometry.bounds.left+n.scroll.left+o.left};return r.top<s.bottom&&r.right>s.left&&r.bottom>s.top&&r.left<s.right||e.styles.position==="fixed"}function _(e,n=!1){let t=n?e.config.duration+e.config.delay:e.config.duration,o=0;e.timer&&(o=Date.now()-e.timer.start,clearTimeout(e.timer.clock)),(e.revealed?e.config.beforeReveal:e.config.beforeReset)(e.node),e.timer={start:Date.now(),clock:setTimeout(()=>{(e.revealed?e.config.afterReveal:e.config.afterReset)(e.node),e.timer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&X(e.node)},t-o)}}function Re(e,n){let t=e.styles;e.revealed=e.seen=!0,g(e.node,M(t.inline.generated,t.opacity.computed,t.transform.final,n?t.transition.delayed:t.transition.instant)),_(e,n)}function Se(e){let n=e.styles;e.revealed=!1,g(e.node,M(n.inline.generated,n.opacity.generated,n.transform.initial,n.transition.instant)),_(e)}function x(e,n={}){let t=n.pristine||B,o=e.config.useDelay,i=o==="always"||o==="onload"&&t||o==="once"&&!e.seen;if(n.reveal||e.visible&&!e.revealed)return Re(e,i);if(n.reset||!e.visible&&e.revealed&&e.config.reset)return Se(e)}function K(e,n){let t=[],o=[],i=[];return e.members.forEach((r,s)=>{l.elements[r]?.[n]&&o.push(s)}),o.length&&e.members.forEach((r,s)=>{let a=l.elements[r];a&&!a[n]&&(s<o[0]?t:i).push(s)}),{head:t,body:o,foot:i}}function I(e,n,t,o){let i=t<0?"head":"foot",r=l.elements[e.members[n+t]];e.blocked[i]=!0,setTimeout(()=>{e.blocked[i]=!1,r&&ee(r,o)},e.interval)}function ee(e,n=B){if(!e.visible&&e.revealed&&e.config.reset)return x(e,{reset:!0});let t=e.sequence&&l.sequences[e.sequence.id];if(!t||!e.sequence)return;let o=e.sequence.index,i=K(t,"visible"),r=K(t,"revealed");if(!r.body.length){let a=i.body[0],c=l.elements[t.members[a]];if(c)return I(t,a,-1,n),I(t,a,1,n),x(c,{reveal:!0,pristine:n})}let s=a=>a[a.length-1];if(!t.blocked.head&&o===s(r.head)&&o>=(i.body[0]??1/0))return I(t,o,-1,n),x(e,{reveal:!0,pristine:n});if(!t.blocked.foot&&o===r.foot[0]&&o<=(s(i.body)??-1/0))return I(t,o,1,n),x(e,{reveal:!0,pristine:n})}function Ee(){R=0;let e=G;G=!1;for(let t of Object.values(l.containers))(e||!t.geometry)&&(t.geometry=J(t.node,!0)),t.scroll=he(t);let n=Object.values(l.elements);for(let t of n)(e||!t.geometry)&&(t.geometry=J(t.node)),t.visible=we(t);for(let t of n)t.sequence?ee(t):x(t);B=!1}function y(e){let n=e?e.type:"init";(n==="init"||n==="resize")&&(G=!0),R||(R=requestAnimationFrame(Ee))}var S=e=>e.node===document.documentElement?window:e.node;function te(){let e=new Set(Array.from(document.querySelectorAll("[data-sr-id]")).map(o=>parseInt(o.getAttribute("data-sr-id")||"",10)));for(let o of Object.values(l.elements))e.has(o.id)||delete l.elements[o.id];let n=new Set,t=new Set;for(let o of Object.values(l.elements))n.add(o.containerId),o.sequence&&t.add(o.sequence.id);for(let o of Object.values(l.containers))n.has(o.id)||(S(o).removeEventListener("scroll",y),S(o).removeEventListener("resize",y),delete l.containers[o.id]);for(let o of Object.values(l.sequences))t.has(o.id)||delete l.sequences[o.id]}function ne(){j=null,te();let e=V();for(let n of Object.values(l.elements)){let t=n.styles;e?(n.visible=n.revealed=n.seen=!0,g(n.node,M(t.inline.generated,t.opacity.computed,t.transform.final,"transition: none;"))):n.visible?(n.revealed=!0,g(n.node,M(t.inline.generated,t.opacity.computed,t.transform.final))):(n.revealed=!1,g(n.node,M(t.inline.generated,t.opacity.generated,t.transform.initial)))}if(!e){for(let n of Object.values(l.containers))S(n).addEventListener("scroll",y),S(n).addEventListener("resize",y);y()}}function oe(e,n={},t=!1){if(!p)return;let o=[],i=n.interval||0,r,s;try{if(i){let c=Math.abs(i);if(isNaN(c))throw new RangeError("Invalid sequence interval.");r={id:F(),interval:Math.max(c,16),members:[],blocked:{head:!1,foot:!1}}}let a=A(e);if(!a.length)throw new Error("Invalid reveal target.");s=[];for(let c of a){let h=c.getAttribute("data-sr-id"),b=h!==null?l.elements[Number(h)]:void 0,u=b?q({},b):{id:F(),node:c,seen:!1,revealed:!1,visible:!1};b&&g(c,b.styles.inline.computed);let v=q({},b?b.config:p,n);if(!v.mobile&&$()||!v.desktop&&!$()){b&&X(c);continue}let w=A(v.container)[0];if(!w)throw new Error("Invalid container.");if(!w.contains(c))continue;let d=[...o,...Object.values(l.containers)].find(f=>f.node===w)?.id;d===void 0&&(d=F(),o.push({id:d,node:w})),u.config=v,u.containerId=d,u.styles=pe(u),r&&(u.sequence={id:r.id,index:r.members.length},r.members.push(u.id)),s.push(u)}for(let c of s)l.elements[c.id]=c,c.node.setAttribute("data-sr-id",String(c.id))}catch(a){return D("Reveal failed.",a.message)}for(let a of o)l.containers[a.id]=a;r&&(l.sequences[r.id]=r),t||(l.history.push({target:e,options:n}),j&&clearTimeout(j),j=setTimeout(ne,0))}function X(e){let n=!1;for(let t of A(e)){let o=t.getAttribute("data-sr-id");if(o===null)continue;n=!0;let i=l.elements[Number(o)];i&&(i.timer&&clearTimeout(i.timer.clock),g(i.node,i.styles.inline.generated),delete l.elements[i.id]),t.removeAttribute("data-sr-id")}n&&te()}function xe(){for(let e of Object.values(l.elements))g(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id");for(let e of Object.values(l.containers))S(e).removeEventListener("scroll",y),S(e).removeEventListener("resize",y);R&&cancelAnimationFrame(R),R=0,l={containers:{},elements:{},history:[],sequences:{}}}function Me(){for(let e of l.history)oe(e.target,e.options,!0);ne()}var P=()=>(W()&&document.documentElement.classList.remove("sr"),{reveal(){},clean(){},destroy(){},sync(){},defaults:{},version:Z,noop:!0});function ie(){if(!W())return!1;let e=document.documentElement.style;return("transform"in e||"WebkitTransform"in e)&&("transition"in e||"WebkitTransition"in e)}function ke(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",()=>{document.body.style.height="100%"},{once:!0})}function Te(e={}){if(!W()||!ie())return P();let n;try{if(n=q({},p??ge(),e),!A(n.container)[0])throw new Error("Invalid container.")}catch(t){return D("Invalid configuration.",t.message),P()}return p=n,!p.mobile&&$()||!p.desktop&&!$()?(D("This device is disabled.",`desktop: ${p.desktop}`,`mobile: ${p.mobile}`),P()):(ke(),O||(O={reveal:(t,o)=>oe(t,o),clean:X,destroy:xe,sync:Me,get defaults(){return p},version:Z,noop:!1},Object.defineProperty(O,"delegate",{value:y})),O)}var Y=Te;Y.isSupported=ie;Object.defineProperty(Y,"debug",{get:()=>Q,set:e=>{typeof e=="boolean"&&(Q=e)}});var re=Y;function Le(e={}){let n=(0,T.useRef)(null),t=(0,T.useRef)(e);return t.current=e,(0,T.useEffect)(()=>{let o=n.current;if(!o)return;let{selector:i,...r}=t.current,s=i?Array.from(o.querySelectorAll(i)):o,a=re();return a.reveal(s,r),()=>a.clean(s)},[]),n}0&&(module.exports={useScrollReveal});

package/dist/scrollreveal/react/index.d.mts

@@ -0,0 +1,58 @@
+import { RefObject } from 'react';
+
+interface ScrollRevealOptions {
+    delay?: number;
+    /** A length with a unit: `'20px'`, `'2em'`, `'50%'`. */
+    distance?: string;
+    duration?: number;
+    easing?: string;
+    /** Ms between members of a sequence. Only read from `reveal()` options. */
+    interval?: number;
+    /** Starting opacity; `null` leaves opacity alone. */
+    opacity?: number | null;
+    origin?: 'top' | 'right' | 'bottom' | 'left';
+    rotate?: {
+        x?: number;
+        y?: number;
+        z?: number;
+    };
+    scale?: number;
+    cleanup?: boolean;
+    container?: string | Element;
+    desktop?: boolean;
+    mobile?: boolean;
+    reset?: boolean;
+    useDelay?: 'always' | 'once' | 'onload';
+    viewFactor?: number;
+    viewOffset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    afterReset?: (el: Element) => void;
+    afterReveal?: (el: Element) => void;
+    beforeReset?: (el: Element) => void;
+    beforeReveal?: (el: Element) => void;
+}
+
+/**
+ * svg-scroll-draw/scrollreveal/react — the ScrollReveal drop-in for React.
+ *
+ * The usual ScrollReveal setup is one global `ScrollReveal().reveal('.card')` at
+ * start-up, which misses every component that mounts later (a route change, a
+ * list that loads) and never cleans up. This hook reveals the element its ref is
+ * on — or, with `selector`, that element's matching children, which is how an
+ * `interval` sequence is written — and cleans it on unmount.
+ *
+ * Options are read once, on mount. Defaults set with `ScrollReveal({ ... })`
+ * elsewhere still apply, as they would in ScrollReveal.
+ */
+
+interface UseScrollRevealOptions extends ScrollRevealOptions {
+    /** Reveal the element's descendants matching this selector instead of the element itself. */
+    selector?: string;
+}
+declare function useScrollReveal<T extends Element = HTMLDivElement>(options?: UseScrollRevealOptions): RefObject<T>;
+
+export { type UseScrollRevealOptions, useScrollReveal };

package/dist/scrollreveal/react/index.d.ts

@@ -0,0 +1,58 @@
+import { RefObject } from 'react';
+
+interface ScrollRevealOptions {
+    delay?: number;
+    /** A length with a unit: `'20px'`, `'2em'`, `'50%'`. */
+    distance?: string;
+    duration?: number;
+    easing?: string;
+    /** Ms between members of a sequence. Only read from `reveal()` options. */
+    interval?: number;
+    /** Starting opacity; `null` leaves opacity alone. */
+    opacity?: number | null;
+    origin?: 'top' | 'right' | 'bottom' | 'left';
+    rotate?: {
+        x?: number;
+        y?: number;
+        z?: number;
+    };
+    scale?: number;
+    cleanup?: boolean;
+    container?: string | Element;
+    desktop?: boolean;
+    mobile?: boolean;
+    reset?: boolean;
+    useDelay?: 'always' | 'once' | 'onload';
+    viewFactor?: number;
+    viewOffset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    afterReset?: (el: Element) => void;
+    afterReveal?: (el: Element) => void;
+    beforeReset?: (el: Element) => void;
+    beforeReveal?: (el: Element) => void;
+}
+
+/**
+ * svg-scroll-draw/scrollreveal/react — the ScrollReveal drop-in for React.
+ *
+ * The usual ScrollReveal setup is one global `ScrollReveal().reveal('.card')` at
+ * start-up, which misses every component that mounts later (a route change, a
+ * list that loads) and never cleans up. This hook reveals the element its ref is
+ * on — or, with `selector`, that element's matching children, which is how an
+ * `interval` sequence is written — and cleans it on unmount.
+ *
+ * Options are read once, on mount. Defaults set with `ScrollReveal({ ... })`
+ * elsewhere still apply, as they would in ScrollReveal.
+ */
+
+interface UseScrollRevealOptions extends ScrollRevealOptions {
+    /** Reveal the element's descendants matching this selector instead of the element itself. */
+    selector?: string;
+}
+declare function useScrollReveal<T extends Element = HTMLDivElement>(options?: UseScrollRevealOptions): RefObject<T>;
+
+export { type UseScrollRevealOptions, useScrollReveal };

package/dist/scrollreveal/react/index.mjs

@@ -0,0 +1,3 @@
+"use client";
+import{useEffect as Re,useRef as ie}from"react";function Y(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var J="4.0.9",D=()=>typeof window<"u"&&typeof document<"u",C=e=>e!==null&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]";function j(e,...n){for(let t of n)if(C(t))for(let o of Object.keys(t)){let i=t[o];C(i)?(C(e[o])||(e[o]={}),j(e[o],i)):e[o]=i}return e}function q(e){if(typeof e=="string")try{return Array.from(document.querySelectorAll(e))}catch{return[]}return e instanceof Element?[e]:e&&typeof e.length=="number"?Array.from(e).filter(n=>n instanceof Element):[]}var A=(e=navigator.userAgent)=>/Android|iPhone|iPad|iPod/i.test(e),F=!1;function P(e,...n){F&&typeof console<"u"&&console.log(`%cScrollReveal: ${e}${n.map(t=>`
+ \u2014 ${t}`).join("")}`,"color: #ea654b;")}var k=()=>[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function re(e,n){let t=[];for(let o=0;o<4;o++)for(let i=0;i<4;i++){let r=0;for(let s=0;s<4;s++)r+=e[i+4*s]*n[4*o+s];t[i+4*o]=r}return t}function se(e){let n=/matrix(3d)?\(([^)]+)\)/.exec(e||"");if(!n)return k();let t=n[2].split(", ").map(parseFloat);if(t.length===16)return t;let o=k();return[o[0],o[1],o[4],o[5],o[12],o[13]]=t,o}function z(e,n){let t=Math.PI/180*n,o=Math.cos(t),i=Math.sin(t),r=k(),[s,a,c,h]=e==="x"?[5,10,6,9]:e==="y"?[0,10,8,2]:[0,5,1,4];return r[s]=r[a]=o,r[c]=i,r[h]=-i,r}function ae(e,n){let t=k();return t[e==="X"?12:13]=n,t}function le(e){let n=k();return n[0]=n[5]=e,n}function g(e,n){for(let t of n.split(";")){let o=t.indexOf(":");if(o<1)continue;let i=t.slice(0,o).trim(),r=t.slice(o+1).trim();i&&r&&e.style.setProperty(i,r)}}function ce(e){let{node:n,config:t}=e,o=window.getComputedStyle(n),i=(n.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[],r=i.map(d=>d.trim()),s=`${r.join("; ")};`,a=i.some(d=>/visibility\s?:\s?visible/i.test(d))?s:`${[...r,"visibility: visible"].join("; ")};`,c=parseFloat(o.opacity),h=t.opacity!==null&&!isNaN(parseFloat(String(t.opacity)))?parseFloat(String(t.opacity)):c,b=c!==h?{computed:`opacity: ${c};`,generated:`opacity: ${h};`}:{computed:"",generated:""},u=[];if(parseFloat(t.distance)){let d=t.origin==="top"||t.origin==="bottom"?"Y":"X",f=t.distance;(t.origin==="top"||t.origin==="left")&&(f=f.startsWith("-")?f.slice(1):`-${f}`);let E=f.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g)||[],m=Number(E[0]),$=E[1],T;if($==="em")T=parseInt(o.fontSize,10)*m;else if($==="px")T=m;else if($==="%"){let X=n.getBoundingClientRect();T=(d==="Y"?X.height:X.width)*m/100}else throw new RangeError("Unrecognized or missing distance unit.");u.push(ae(d,T))}t.rotate.x&&u.push(z("x",t.rotate.x)),t.rotate.y&&u.push(z("y",t.rotate.y)),t.rotate.z&&u.push(z("z",t.rotate.z)),t.scale!==1&&u.push(le(t.scale===0?2e-4:t.scale));let v={initial:"",final:""};if(u.length){let d=se(o.transform);v={initial:`transform: matrix3d(${u.reduce(re,d).join(", ")});`,final:`transform: matrix3d(${d.join(", ")});`}}let w={delayed:"",instant:""};if(b.generated||v.initial){let d=m=>`${m/1e3}s`,f=[],E=m=>({delayed:`${m} ${d(t.duration)} ${t.easing} ${d(t.delay)}`,instant:`${m} ${d(t.duration)} ${t.easing} 0s`});o.transition&&!/all 0s|none 0s/.test(o.transition)&&f.push({delayed:o.transition,instant:o.transition}),b.generated&&f.push(E("opacity")),v.initial&&f.push(E("transform")),w={delayed:`transition: ${f.map(m=>m.delayed).join(", ")};`,instant:`transition: ${f.map(m=>m.instant).join(", ")};`}}return{inline:{computed:s,generated:a},opacity:b,position:o.position,transform:v,transition:w}}var M=(...e)=>e.filter(n=>n!=="").join(" "),de=()=>({delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:()=>{},afterReveal:()=>{},beforeReset:()=>{},beforeReveal:()=>{}}),p=null,L=null,l={containers:{},elements:{},history:[],sequences:{}},G=!0,I=null,R=0,Q=!1,ue=0,H=()=>ue++;function U(e,n=!1){let t=e,o=n?t.clientHeight:t.offsetHeight,i=n?t.clientWidth:t.offsetWidth,r=0,s=0,a=t;for(;a;)isNaN(a.offsetTop)||(r+=a.offsetTop),isNaN(a.offsetLeft)||(s+=a.offsetLeft),a=a.offsetParent;return{bounds:{top:r,right:s+i,bottom:r+o,left:s},height:o,width:i}}var fe=e=>e.node===document.documentElement?{top:window.pageYOffset,left:window.pageXOffset}:{top:e.node.scrollTop,left:e.node.scrollLeft};function me(e){let n=l.containers[e.containerId];if(!n||!n.geometry||!n.scroll||!e.geometry)return!1;let t=Math.max(0,Math.min(1,e.config.viewFactor)),o=e.config.viewOffset,i=e.geometry,r={top:i.bounds.top+i.height*t,right:i.bounds.right-i.width*t,bottom:i.bounds.bottom-i.height*t,left:i.bounds.left+i.width*t},s={top:n.geometry.bounds.top+n.scroll.top+o.top,right:n.geometry.bounds.right+n.scroll.left-o.right,bottom:n.geometry.bounds.bottom+n.scroll.top-o.bottom,left:n.geometry.bounds.left+n.scroll.left+o.left};return r.top<s.bottom&&r.right>s.left&&r.bottom>s.top&&r.left<s.right||e.styles.position==="fixed"}function K(e,n=!1){let t=n?e.config.duration+e.config.delay:e.config.duration,o=0;e.timer&&(o=Date.now()-e.timer.start,clearTimeout(e.timer.clock)),(e.revealed?e.config.beforeReveal:e.config.beforeReset)(e.node),e.timer={start:Date.now(),clock:setTimeout(()=>{(e.revealed?e.config.afterReveal:e.config.afterReset)(e.node),e.timer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&W(e.node)},t-o)}}function be(e,n){let t=e.styles;e.revealed=e.seen=!0,g(e.node,M(t.inline.generated,t.opacity.computed,t.transform.final,n?t.transition.delayed:t.transition.instant)),K(e,n)}function ve(e){let n=e.styles;e.revealed=!1,g(e.node,M(n.inline.generated,n.opacity.generated,n.transform.initial,n.transition.instant)),K(e)}function x(e,n={}){let t=n.pristine||G,o=e.config.useDelay,i=o==="always"||o==="onload"&&t||o==="once"&&!e.seen;if(n.reveal||e.visible&&!e.revealed)return be(e,i);if(n.reset||!e.visible&&e.revealed&&e.config.reset)return ve(e)}function V(e,n){let t=[],o=[],i=[];return e.members.forEach((r,s)=>{l.elements[r]?.[n]&&o.push(s)}),o.length&&e.members.forEach((r,s)=>{let a=l.elements[r];a&&!a[n]&&(s<o[0]?t:i).push(s)}),{head:t,body:o,foot:i}}function O(e,n,t,o){let i=t<0?"head":"foot",r=l.elements[e.members[n+t]];e.blocked[i]=!0,setTimeout(()=>{e.blocked[i]=!1,r&&Z(r,o)},e.interval)}function Z(e,n=G){if(!e.visible&&e.revealed&&e.config.reset)return x(e,{reset:!0});let t=e.sequence&&l.sequences[e.sequence.id];if(!t||!e.sequence)return;let o=e.sequence.index,i=V(t,"visible"),r=V(t,"revealed");if(!r.body.length){let a=i.body[0],c=l.elements[t.members[a]];if(c)return O(t,a,-1,n),O(t,a,1,n),x(c,{reveal:!0,pristine:n})}let s=a=>a[a.length-1];if(!t.blocked.head&&o===s(r.head)&&o>=(i.body[0]??1/0))return O(t,o,-1,n),x(e,{reveal:!0,pristine:n});if(!t.blocked.foot&&o===r.foot[0]&&o<=(s(i.body)??-1/0))return O(t,o,1,n),x(e,{reveal:!0,pristine:n})}function pe(){R=0;let e=Q;Q=!1;for(let t of Object.values(l.containers))(e||!t.geometry)&&(t.geometry=U(t.node,!0)),t.scroll=fe(t);let n=Object.values(l.elements);for(let t of n)(e||!t.geometry)&&(t.geometry=U(t.node)),t.visible=me(t);for(let t of n)t.sequence?Z(t):x(t);G=!1}function y(e){let n=e?e.type:"init";(n==="init"||n==="resize")&&(Q=!0),R||(R=requestAnimationFrame(pe))}var S=e=>e.node===document.documentElement?window:e.node;function _(){let e=new Set(Array.from(document.querySelectorAll("[data-sr-id]")).map(o=>parseInt(o.getAttribute("data-sr-id")||"",10)));for(let o of Object.values(l.elements))e.has(o.id)||delete l.elements[o.id];let n=new Set,t=new Set;for(let o of Object.values(l.elements))n.add(o.containerId),o.sequence&&t.add(o.sequence.id);for(let o of Object.values(l.containers))n.has(o.id)||(S(o).removeEventListener("scroll",y),S(o).removeEventListener("resize",y),delete l.containers[o.id]);for(let o of Object.values(l.sequences))t.has(o.id)||delete l.sequences[o.id]}function ee(){I=null,_();let e=Y();for(let n of Object.values(l.elements)){let t=n.styles;e?(n.visible=n.revealed=n.seen=!0,g(n.node,M(t.inline.generated,t.opacity.computed,t.transform.final,"transition: none;"))):n.visible?(n.revealed=!0,g(n.node,M(t.inline.generated,t.opacity.computed,t.transform.final))):(n.revealed=!1,g(n.node,M(t.inline.generated,t.opacity.generated,t.transform.initial)))}if(!e){for(let n of Object.values(l.containers))S(n).addEventListener("scroll",y),S(n).addEventListener("resize",y);y()}}function te(e,n={},t=!1){if(!p)return;let o=[],i=n.interval||0,r,s;try{if(i){let c=Math.abs(i);if(isNaN(c))throw new RangeError("Invalid sequence interval.");r={id:H(),interval:Math.max(c,16),members:[],blocked:{head:!1,foot:!1}}}let a=q(e);if(!a.length)throw new Error("Invalid reveal target.");s=[];for(let c of a){let h=c.getAttribute("data-sr-id"),b=h!==null?l.elements[Number(h)]:void 0,u=b?j({},b):{id:H(),node:c,seen:!1,revealed:!1,visible:!1};b&&g(c,b.styles.inline.computed);let v=j({},b?b.config:p,n);if(!v.mobile&&A()||!v.desktop&&!A()){b&&W(c);continue}let w=q(v.container)[0];if(!w)throw new Error("Invalid container.");if(!w.contains(c))continue;let d=[...o,...Object.values(l.containers)].find(f=>f.node===w)?.id;d===void 0&&(d=H(),o.push({id:d,node:w})),u.config=v,u.containerId=d,u.styles=ce(u),r&&(u.sequence={id:r.id,index:r.members.length},r.members.push(u.id)),s.push(u)}for(let c of s)l.elements[c.id]=c,c.node.setAttribute("data-sr-id",String(c.id))}catch(a){return P("Reveal failed.",a.message)}for(let a of o)l.containers[a.id]=a;r&&(l.sequences[r.id]=r),t||(l.history.push({target:e,options:n}),I&&clearTimeout(I),I=setTimeout(ee,0))}function W(e){let n=!1;for(let t of q(e)){let o=t.getAttribute("data-sr-id");if(o===null)continue;n=!0;let i=l.elements[Number(o)];i&&(i.timer&&clearTimeout(i.timer.clock),g(i.node,i.styles.inline.generated),delete l.elements[i.id]),t.removeAttribute("data-sr-id")}n&&_()}function ge(){for(let e of Object.values(l.elements))g(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id");for(let e of Object.values(l.containers))S(e).removeEventListener("scroll",y),S(e).removeEventListener("resize",y);R&&cancelAnimationFrame(R),R=0,l={containers:{},elements:{},history:[],sequences:{}}}function ye(){for(let e of l.history)te(e.target,e.options,!0);ee()}var N=()=>(D()&&document.documentElement.classList.remove("sr"),{reveal(){},clean(){},destroy(){},sync(){},defaults:{},version:J,noop:!0});function ne(){if(!D())return!1;let e=document.documentElement.style;return("transform"in e||"WebkitTransform"in e)&&("transition"in e||"WebkitTransition"in e)}function he(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",()=>{document.body.style.height="100%"},{once:!0})}function we(e={}){if(!D()||!ne())return N();let n;try{if(n=j({},p??de(),e),!q(n.container)[0])throw new Error("Invalid container.")}catch(t){return P("Invalid configuration.",t.message),N()}return p=n,!p.mobile&&A()||!p.desktop&&!A()?(P("This device is disabled.",`desktop: ${p.desktop}`,`mobile: ${p.mobile}`),N()):(he(),L||(L={reveal:(t,o)=>te(t,o),clean:W,destroy:ge,sync:ye,get defaults(){return p},version:J,noop:!1},Object.defineProperty(L,"delegate",{value:y})),L)}var B=we;B.isSupported=ne;Object.defineProperty(B,"debug",{get:()=>F,set:e=>{typeof e=="boolean"&&(F=e)}});var oe=B;function Te(e={}){let n=ie(null),t=ie(e);return t.current=e,Re(()=>{let o=n.current;if(!o)return;let{selector:i,...r}=t.current,s=i?Array.from(o.querySelectorAll(i)):o,a=oe();return a.reveal(s,r),()=>a.clean(s)},[]),n}export{Te as useScrollReveal};

package/dist/vivus/react/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var x=(r,t)=>{for(var e in t)p(r,e,{get:t[e],enumerable:!0})},$=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of R(t))!S.call(r,s)&&s!==e&&p(r,s,{get:()=>t[s],enumerable:!(n=L(t,s))||n.enumerable});return r};var A=r=>$(p({},"__esModule",{value:!0}),r);var D={};x(D,{useVivus:()=>P});module.exports=A(D);var u=require("react");function v(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var M=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function y(r,...t){M&&console.warn(`[svg-scroll-draw] ${r}`,...t)}var T=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],k=["inViewport","manual","autostart"];function d(r,t){let e=parseInt(r,10);return e>=0?e:t}function O(r){if(typeof window>"u")return!1;let t=window,e=n=>typeof t[n]=="function"&&r instanceof t[n];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var b=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],C=["line","ellipse","circle","polygon","polyline","rect"],F="http://www.w3.org/2000/svg";function w(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let n=[];for(let s=0;s<t.length;s+=2)n.push(`${t[s]},${t[s+1]}`);t=n}let e=`M${t[0]}`;for(let n=1;n<t.length;n++)t[n].indexOf(",")!==-1&&(e+=`L${t[n]}`);return e}function E(r,t,e,n){let s=parseFloat(e)||0,a=parseFloat(n)||0,i=parseFloat(r)||0,o=parseFloat(t)||0,l=i-s,h=i+s;return`M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var I={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,n=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,i=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?i:a,0),n/2),i=Math.min(Math.max(i<0?a:i,0),s/2);let o=`A ${a},${i},0,0,1,`;return`M ${t+a},${e} L ${t+n-a},${e} ${o}${t+n},${e+i} L ${t+n},${e+s-i} ${o}${t+n-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-i} L ${t},${e+i} ${o}${t+a},${e}`}return`M${t} ${e} L${t+n} ${e} L${t+n} ${e+s} L${t} ${e+s} Z`},polyline:w,polygon:r=>`${w(r)}Z`,ellipse:r=>E(r.cx,r.cy,r.rx,r.ry),circle:r=>E(r.cx,r.cy,r.r,r.r)};function G(r){for(let t of Array.from(r.querySelectorAll(C.join(",")))){let e={};for(let{name:a,value:i}of Array.from(t.attributes)){if(b.indexOf(a)!==-1&&i.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]=i}let n=I[t.tagName.toLowerCase()](e),s=document.createElementNS(F,"path");for(let{name:a,value:i}of Array.from(t.attributes))b.indexOf(a)===-1&&s.setAttribute(a,i);s.setAttribute("d",n),t.parentNode?.replaceChild(s,t)}}var c=class c{constructor(t,e,n){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(n),this.isReady&&this.init()}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let n=t;if(typeof n=="string"){let s=document.getElementById(n);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');n=s}if(this.parentEl=n,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let i=a.querySelector("svg");if(!i)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=i,i.setAttribute("width","100%"),i.setAttribute("height","100%"),this.parentEl.appendChild(i),this.isReady=!0,this.init()}),s.open("GET",e.file),s.send();return}if(O(n)){this.el=n,this.isReady=!0;return}if(n instanceof HTMLObjectElement){let s=n,a=i=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&i)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&&T.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&k.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 n=navigator.userAgent,s=n.indexOf("MSIE")!==-1||n.indexOf("Trident/")!==-1||n.indexOf("Edge/")!==-1;if(this.duration=d(e.duration,120),this.delay=d(e.delay,null),this.dashGap=d(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,n=0,s=!1,a=Array.from(this.el.querySelectorAll("path"));a.forEach((i,o)=>{if(this.isInvisible(i))return;let l={el:i,length:0,startAt:0,duration:0,isResizeSensitive:!1},h=1;if(i.getAttribute("vector-effect")==="non-scaling-stroke"){let f=i.getBoundingClientRect(),m=i.getBBox();h=Math.max(f.width/m.width,f.height/m.height),l.isResizeSensitive=!0,s=!0}if(l.length=Math.ceil(i.getTotalLength()*h),isNaN(l.length)){y("vivus: cannot retrieve a path element length",i);return}this.map.push(l),i.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,i.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o)}),s&&y("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((i,o)=>{let l=()=>{let h={};for(let{name:f,value:m}of Array.from(i.el.attributes))h[f]=m;return h};switch(this.type){case"delayed":i.startAt=this.delayUnit*o,i.duration=this.duration-this.delay;break;case"oneByOne":i.startAt=n/e*this.duration,i.duration=i.length/e*this.duration;break;case"sync":case"async":case"nsync":i.startAt=0,i.duration=this.duration;break;case"scenario-sync":{let h=l();i.startAt=t+(d(h["data-delay"],this.delayUnit)||0),i.duration=d(h["data-duration"],this.duration),t=h["data-async"]!==void 0?i.startAt:i.startAt+i.duration,this.frameLength=Math.max(this.frameLength,i.startAt+i.duration);break}case"scenario":{let h=l();i.startAt=d(h["data-start"],this.delayUnit)||0,i.duration=d(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,i.startAt+i.duration);break}}n+=i.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(),n=t.el.getBBox(),s=Math.max(e.width/n.width,e.height/n.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,n)=>{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(n))})}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let n=e.el.cloneNode(!0);e.el.parentNode?.replaceChild(n,e.el),e.el=n}init(){this.frameLength=0,this.currentFrame=0,this.map=[],G(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 n=t;if(n&&typeof n=="function")this.instanceCallback=n,n=void 0;else if(n&&typeof n!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=n||1,v()?(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 n=t.getBoundingClientRect();return!n.width&&!n.height}return!1}isInViewport(t,e=0){let n=window.pageYOffset||document.documentElement.scrollTop,s=n+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),i=n+a.top;return i+a.height*(e||0)<=s&&i+a.height>=n}};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,n=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(n*(2.5*Math.PI)))+1;return 1-s+a*s};var g=c,V=g;function P(r={},t){let e=(0,u.useRef)(null),[n,s]=(0,u.useState)(null),a=(0,u.useRef)(r),i=(0,u.useRef)(t);return a.current=r,i.current=t,(0,u.useEffect)(()=>{if(!e.current)return;let o=new V(e.current,a.current,l=>i.current?.(l));return s(o),()=>{o.destroy(),s(null)}},[]),[e,n]}0&&(module.exports={useVivus});

package/dist/vivus/{index.d.mts → react/index.d.mts}

@@ -1,3 +1,5 @@
+import { RefObject } from 'react';
+
 type VivusType = 'delayed' | 'sync' | 'async' | 'nsync' | 'oneByOne' | 'scenario' | 'scenario-sync';
 type VivusStart = 'inViewport' | 'manual' | 'autostart';
 type VivusTiming = (x: number) => number;
@@ -97,4 +99,18 @@ declare class Vivus {
     isInViewport(el: Element, h?: number): boolean;
 }
 
-export { Vivus, type VivusCallback, type VivusOptions, type VivusStart, type VivusTiming, type VivusType, Vivus as default };
+/**
+ * svg-scroll-draw/vivus/react — the vivus drop-in for React.
+ *
+ * `new Vivus()` needs the mounted <svg>, and the instance needs destroying when
+ * the component goes, which vivus users wire up by hand in every component. This
+ * hook does both and hands the instance back for `play()`, `reset()` and the
+ * rest. StrictMode's double mount is safe: the first instance is destroyed
+ * before the second is made.
+ *
+ * Options and the callback are read once, on mount.
+ */
+
+declare function useVivus<T extends Element = SVGSVGElement>(options?: VivusOptions, callback?: VivusCallback): [RefObject<T>, Vivus | null];
+
+export { useVivus };

package/dist/vivus/{index.d.ts → react/index.d.ts}

@@ -1,3 +1,5 @@
+import { RefObject } from 'react';
+
 type VivusType = 'delayed' | 'sync' | 'async' | 'nsync' | 'oneByOne' | 'scenario' | 'scenario-sync';
 type VivusStart = 'inViewport' | 'manual' | 'autostart';
 type VivusTiming = (x: number) => number;
@@ -97,4 +99,18 @@ declare class Vivus {
     isInViewport(el: Element, h?: number): boolean;
 }
 
-export { Vivus, type VivusCallback, type VivusOptions, type VivusStart, type VivusTiming, type VivusType, Vivus as default };
+/**
+ * svg-scroll-draw/vivus/react — the vivus drop-in for React.
+ *
+ * `new Vivus()` needs the mounted <svg>, and the instance needs destroying when
+ * the component goes, which vivus users wire up by hand in every component. This
+ * hook does both and hands the instance back for `play()`, `reset()` and the
+ * rest. StrictMode's double mount is safe: the first instance is destroyed
+ * before the second is made.
+ *
+ * Options and the callback are read once, on mount.
+ */
+
+declare function useVivus<T extends Element = SVGSVGElement>(options?: VivusOptions, callback?: VivusCallback): [RefObject<T>, Vivus | null];
+
+export { useVivus };

package/dist/vivus/react/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+import{useEffect as T,useRef as y,useState as k}from"react";function g(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var V=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){V&&console.warn(`[svg-scroll-draw] ${r}`,...t)}var L=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],R=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function S(r){if(typeof window>"u")return!1;let t=window,e=n=>typeof t[n]=="function"&&r instanceof t[n];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var v=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],x=["line","ellipse","circle","polygon","polyline","rect"],$="http://www.w3.org/2000/svg";function b(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let n=[];for(let s=0;s<t.length;s+=2)n.push(`${t[s]},${t[s+1]}`);t=n}let e=`M${t[0]}`;for(let n=1;n<t.length;n++)t[n].indexOf(",")!==-1&&(e+=`L${t[n]}`);return e}function w(r,t,e,n){let s=parseFloat(e)||0,a=parseFloat(n)||0,i=parseFloat(r)||0,o=parseFloat(t)||0,l=i-s,h=i+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,n=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,i=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?i:a,0),n/2),i=Math.min(Math.max(i<0?a:i,0),s/2);let o=`A ${a},${i},0,0,1,`;return`M ${t+a},${e} L ${t+n-a},${e} ${o}${t+n},${e+i} L ${t+n},${e+s-i} ${o}${t+n-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-i} L ${t},${e+i} ${o}${t+a},${e}`}return`M${t} ${e} L${t+n} ${e} L${t+n} ${e+s} L${t} ${e+s} Z`},polyline:b,polygon:r=>`${b(r)}Z`,ellipse:r=>w(r.cx,r.cy,r.rx,r.ry),circle:r=>w(r.cx,r.cy,r.r,r.r)};function M(r){for(let t of Array.from(r.querySelectorAll(x.join(",")))){let e={};for(let{name:a,value:i}of Array.from(t.attributes)){if(v.indexOf(a)!==-1&&i.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]=i}let n=A[t.tagName.toLowerCase()](e),s=document.createElementNS($,"path");for(let{name:a,value:i}of Array.from(t.attributes))v.indexOf(a)===-1&&s.setAttribute(a,i);s.setAttribute("d",n),t.parentNode?.replaceChild(s,t)}}var c=class c{constructor(t,e,n){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(n),this.isReady&&this.init()}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let n=t;if(typeof n=="string"){let s=document.getElementById(n);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');n=s}if(this.parentEl=n,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let i=a.querySelector("svg");if(!i)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=i,i.setAttribute("width","100%"),i.setAttribute("height","100%"),this.parentEl.appendChild(i),this.isReady=!0,this.init()}),s.open("GET",e.file),s.send();return}if(S(n)){this.el=n,this.isReady=!0;return}if(n instanceof HTMLObjectElement){let s=n,a=i=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&i)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&&L.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&R.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 n=navigator.userAgent,s=n.indexOf("MSIE")!==-1||n.indexOf("Trident/")!==-1||n.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,n=0,s=!1,a=Array.from(this.el.querySelectorAll("path"));a.forEach((i,o)=>{if(this.isInvisible(i))return;let l={el:i,length:0,startAt:0,duration:0,isResizeSensitive:!1},h=1;if(i.getAttribute("vector-effect")==="non-scaling-stroke"){let d=i.getBoundingClientRect(),f=i.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=!0,s=!0}if(l.length=Math.ceil(i.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",i);return}this.map.push(l),i.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,i.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((i,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(i.el.attributes))h[d]=f;return h};switch(this.type){case"delayed":i.startAt=this.delayUnit*o,i.duration=this.duration-this.delay;break;case"oneByOne":i.startAt=n/e*this.duration,i.duration=i.length/e*this.duration;break;case"sync":case"async":case"nsync":i.startAt=0,i.duration=this.duration;break;case"scenario-sync":{let h=l();i.startAt=t+(u(h["data-delay"],this.delayUnit)||0),i.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?i.startAt:i.startAt+i.duration,this.frameLength=Math.max(this.frameLength,i.startAt+i.duration);break}case"scenario":{let h=l();i.startAt=u(h["data-start"],this.delayUnit)||0,i.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,i.startAt+i.duration);break}}n+=i.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(),n=t.el.getBBox(),s=Math.max(e.width/n.width,e.height/n.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,n)=>{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(n))})}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let n=e.el.cloneNode(!0);e.el.parentNode?.replaceChild(n,e.el),e.el=n}init(){this.frameLength=0,this.currentFrame=0,this.map=[],M(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 n=t;if(n&&typeof n=="function")this.instanceCallback=n,n=void 0;else if(n&&typeof n!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=n||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 n=t.getBoundingClientRect();return!n.width&&!n.height}return!1}isInViewport(t,e=0){let n=window.pageYOffset||document.documentElement.scrollTop,s=n+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),i=n+a.top;return i+a.height*(e||0)<=s&&i+a.height>=n}};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,n=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(n*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,E=p;function _(r={},t){let e=y(null),[n,s]=k(null),a=y(r),i=y(t);return a.current=r,i.current=t,T(()=>{if(!e.current)return;let o=new E(e.current,a.current,l=>i.current?.(l));return s(o),()=>{o.destroy(),s(null)}},[]),[e,n]}export{_ as useVivus};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.14.0",
+  "version": "2.15.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",
@@ -66,7 +66,12 @@
     "vivus",
     "vivus-alternative",
     "svg-line-drawing",
-    "line-drawing"
+    "line-drawing",
+    "react-aos",
+    "aos-react",
+    "scrollreveal-react",
+    "vivus-react",
+    "nextjs-aos"
   ],
   "homepage": "https://svg-scroll-draw.vercel.app",
   "repository": {
@@ -158,6 +163,15 @@
       ],
       "vivus": [
         "./dist/vivus/index.d.ts"
+      ],
+      "aos/react": [
+        "./dist/aos/react/index.d.ts"
+      ],
+      "scrollreveal/react": [
+        "./dist/scrollreveal/react/index.d.ts"
+      ],
+      "vivus/react": [
+        "./dist/vivus/react/index.d.ts"
       ]
     }
   },
@@ -407,6 +421,36 @@
         "default": "./dist/vivus/index.cjs"
       }
     },
+    "./aos/react": {
+      "import": {
+        "types": "./dist/aos/react/index.d.mts",
+        "default": "./dist/aos/react/index.mjs"
+      },
+      "require": {
+        "types": "./dist/aos/react/index.d.ts",
+        "default": "./dist/aos/react/index.cjs"
+      }
+    },
+    "./scrollreveal/react": {
+      "import": {
+        "types": "./dist/scrollreveal/react/index.d.mts",
+        "default": "./dist/scrollreveal/react/index.mjs"
+      },
+      "require": {
+        "types": "./dist/scrollreveal/react/index.d.ts",
+        "default": "./dist/scrollreveal/react/index.cjs"
+      }
+    },
+    "./vivus/react": {
+      "import": {
+        "types": "./dist/vivus/react/index.d.mts",
+        "default": "./dist/vivus/react/index.mjs"
+      },
+      "require": {
+        "types": "./dist/vivus/react/index.d.ts",
+        "default": "./dist/vivus/react/index.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {

package/dist/cinematic/index.d.mts

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

package/dist/cinematic/index.d.ts

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

package/dist/lenis/index.d.mts

@@ -1,51 +0,0 @@
-/**
- * Lenis smooth-scroll adapter for svg-scroll-draw.
- *
- * Lenis v2+ patches `window.scrollY` natively — no adapter needed.
- * This adapter targets Lenis v1, which uses a virtual scroll value
- * and does NOT update `window.scrollY`. It patches `window.scrollY` /
- * `window.pageYOffset` so all svg-scroll-draw engines read the correct value.
- *
- * Usage:
- *   import Lenis from '@studio-freight/lenis'
- *   import { createLenisAdapter } from 'svg-scroll-draw/lenis'
- *
- *   const lenis = new Lenis()
- *   const adapter = createLenisAdapter(lenis)
- *
- *   // RAF loop — let Lenis drive the tick
- *   function raf(time: number) {
- *     lenis.raf(time)
- *     requestAnimationFrame(raf)
- *   }
- *   requestAnimationFrame(raf)
- *
- *   // On cleanup:
- *   adapter.destroy()
- */
-interface LenisScrollEvent {
-    scroll: number;
-    velocity: number;
-    direction: number;
-    progress: number;
-}
-interface LenisLike {
-    on(event: 'scroll', callback: (e: LenisScrollEvent) => void): void;
-    off(event: 'scroll', callback: (e: LenisScrollEvent) => void): void;
-}
-interface LenisAdapterInstance {
-    /** Restore native `window.scrollY` and remove the Lenis listener. */
-    destroy: () => void;
-    /** Returns the current virtual scroll Y value Lenis last reported. */
-    getScrollY: () => number;
-}
-/**
- * Patches `window.scrollY` and `window.pageYOffset` to return Lenis's
- * virtual scroll position so all svg-scroll-draw engines stay in sync
- * with smooth scroll.
- *
- * Only needed for Lenis v1. Lenis v2+ patches scrollY itself.
- */
-declare function createLenisAdapter(lenis: LenisLike): LenisAdapterInstance;
-
-export { type LenisAdapterInstance, type LenisLike, type LenisScrollEvent, createLenisAdapter };

package/dist/lenis/index.d.ts

@@ -1,51 +0,0 @@
-/**
- * Lenis smooth-scroll adapter for svg-scroll-draw.
- *
- * Lenis v2+ patches `window.scrollY` natively — no adapter needed.
- * This adapter targets Lenis v1, which uses a virtual scroll value
- * and does NOT update `window.scrollY`. It patches `window.scrollY` /
- * `window.pageYOffset` so all svg-scroll-draw engines read the correct value.
- *
- * Usage:
- *   import Lenis from '@studio-freight/lenis'
- *   import { createLenisAdapter } from 'svg-scroll-draw/lenis'
- *
- *   const lenis = new Lenis()
- *   const adapter = createLenisAdapter(lenis)
- *
- *   // RAF loop — let Lenis drive the tick
- *   function raf(time: number) {
- *     lenis.raf(time)
- *     requestAnimationFrame(raf)
- *   }
- *   requestAnimationFrame(raf)
- *
- *   // On cleanup:
- *   adapter.destroy()
- */
-interface LenisScrollEvent {
-    scroll: number;
-    velocity: number;
-    direction: number;
-    progress: number;
-}
-interface LenisLike {
-    on(event: 'scroll', callback: (e: LenisScrollEvent) => void): void;
-    off(event: 'scroll', callback: (e: LenisScrollEvent) => void): void;
-}
-interface LenisAdapterInstance {
-    /** Restore native `window.scrollY` and remove the Lenis listener. */
-    destroy: () => void;
-    /** Returns the current virtual scroll Y value Lenis last reported. */
-    getScrollY: () => number;
-}
-/**
- * Patches `window.scrollY` and `window.pageYOffset` to return Lenis's
- * virtual scroll position so all svg-scroll-draw engines stay in sync
- * with smooth scroll.
- *
- * Only needed for Lenis v1. Lenis v2+ patches scrollY itself.
- */
-declare function createLenisAdapter(lenis: LenisLike): LenisAdapterInstance;
-
-export { type LenisAdapterInstance, type LenisLike, type LenisScrollEvent, createLenisAdapter };

package/dist/video/index.d.mts

@@ -1,49 +0,0 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface TriggerConfig {
-    start?: string;
-    end?: string;
-}
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
-
-interface ScrollVideoOptions {
-    trigger?: TriggerConfig;
-    from?: number;
-    to?: number;
-    easing?: EasingName | ((t: number) => number);
-    once?: boolean;
-    axis?: 'x' | 'y';
-    preload?: 'auto' | 'metadata';
-    onReady?: () => void;
-    onComplete?: () => void;
-    onProgress?: (alpha: number) => void;
-}
-declare function scrollVideo(target: string | HTMLVideoElement, options?: ScrollVideoOptions): ScrollDrawInstance;
-
-export { type ScrollVideoOptions, scrollVideo };

package/dist/video/index.d.ts

@@ -1,49 +0,0 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface TriggerConfig {
-    start?: string;
-    end?: string;
-}
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
-
-interface ScrollVideoOptions {
-    trigger?: TriggerConfig;
-    from?: number;
-    to?: number;
-    easing?: EasingName | ((t: number) => number);
-    once?: boolean;
-    axis?: 'x' | 'y';
-    preload?: 'auto' | 'metadata';
-    onReady?: () => void;
-    onComplete?: () => void;
-    onProgress?: (alpha: number) => void;
-}
-declare function scrollVideo(target: string | HTMLVideoElement, options?: ScrollVideoOptions): ScrollDrawInstance;
-
-export { type ScrollVideoOptions, scrollVideo };