svg-scroll-draw 2.25.0 → 2.26.0

package/README.md

@@ -7,8 +7,19 @@
 [![license](https://img.shields.io/npm/l/svg-scroll-draw)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/DhruvilChauahan0210/ink-scroll?style=flat)](https://github.com/DhruvilChauahan0210/ink-scroll/stargazers)
 
+<a href="https://svg-scroll-draw.vercel.app"><img src="https://raw.githubusercontent.com/DhruvilChauahan0210/ink-scroll/main/.github/media/hero-line-drawing.gif" width="720" alt="The svg-scroll-draw homepage: a fountain pen's parts draw themselves in line by line, then assemble into one pen as the page scrolls"></a>
+
 > SVG line drawing on scroll, done right: correct path lengths, stagger across many paths, and `morphTo`. Where the browser supports `animation-timeline: view()` the draw runs on its own scroll timeline in CSS, with no per-frame JavaScript; in other browsers, and for options CSS can't express, a JavaScript engine draws it, and a parity suite checks in Chromium, Firefox and WebKit that both draw the same frame. **11.4 KB gzipped for every API, from 1.6 KB if you import one**, against 47.5 KB for GSAP + ScrollTrigger + DrawSVG. Zero dependencies, MIT.
 
+```bash
+npm i svg-scroll-draw
+```
+
+```js
+import { scrollDraw } from 'svg-scroll-draw';
+scrollDraw('#logo'); // every path inside #logo draws as you scroll past it
+```
+
 **Switch in one line.** Already on AOS, ScrollReveal or vivus? Change the import and keep your markup and calls:
 
 ```diff
@@ -34,7 +45,7 @@ Each drop-in is tested side by side against the original in real browsers (AOS 2
 
 **Using an AI coding agent?** Give it the [svg-scroll-draw skill](https://github.com/DhruvilChauahan0210/ink-scroll/blob/main/skills/svg-scroll-draw/SKILL.md) or point it at [llms.txt](https://svg-scroll-draw.vercel.app/llms.txt).
 
-![svg-scroll-draw demo: SVG paths drawing as the page scrolls](https://raw.githubusercontent.com/DhruvilChauahan0210/ink-scroll/main/demo.gif)
+If this saves you time, a ⭐ [on GitHub](https://github.com/DhruvilChauahan0210/ink-scroll) helps others find it.
 
 ---
 
@@ -48,7 +59,7 @@ Each drop-in is tested side by side against the original in real browsers (AOS 2
 | `scrollDraw` | `svg-scroll-draw` | The original — scroll-driven SVG path drawing via `stroke-dashoffset`. |
 | `scrollVideo` | `svg-scroll-draw/video` | Tie `<video>.currentTime` to scroll. The Apple/Stripe product-page pattern. |
 | `scrollFrames` | `svg-scroll-draw/frames` | Scrub an image sequence on a `<canvas>` with the scroll: the frame-by-frame version of the same pattern, for footage a video decoder cannot seek smoothly. |
-| `scrollText` | `svg-scroll-draw/text` | Split text into chars/words/lines and stagger-animate each on scroll. 3.5 KB, nothing else to load. |
+| `scrollText` | `svg-scroll-draw/text` | Split text into chars/words/lines and stagger-animate each on scroll. 3.9 KB, nothing else to load. |
 | `devtools` | `svg-scroll-draw/devtools` | Visual overlay showing every active animation's triggers and progress. Dev-only. |
 | `AOS` | `svg-scroll-draw/aos` | Drop-in replacement for AOS: same `AOS.init()`, same `data-aos` markup, no `aos.css`. |
 | `ScrollReveal` | `svg-scroll-draw/scrollreveal` | Drop-in replacement for ScrollReveal.js 4, MIT instead of GPL-3.0. |
@@ -346,6 +357,84 @@ const film = useScrollFrames(() => ({ frames: (i) => `/film/${i + 1}.jpg`, count
 
 Nuxt exports both, and `createScrollDrawPlugin()` registers `<ScrollFrames>` globally.
 
+#### Svelte, Solid and Angular (2.26.0+)
+
+Each binds to a `<canvas>` you write, the way their `scrollVideo` does to a `<video>`, so the canvas's `role="img"` and `aria-label` are yours to set (each warns in development when the canvas has no name, unless it is `aria-hidden="true"` or `role="presentation"`). The rules are React's and Vue's: a `frames` function is read by the URLs it gives, so a fresh equal one keeps the film and its loaded images; new URLs or another option start a new one; callbacks are read live. `triggerElement` takes an element or a selector, found when the film starts.
+
+```svelte
+<script>
+  import { scrollFramesAction } from 'svg-scroll-draw/svelte';
+</script>
+
+<section id="track" style="height: 400vh">
+  <div style="position: sticky; top: 0; height: 100vh">
+    <canvas
+      role="img"
+      aria-label="The headphones turning"
+      style="width: 100%; height: 100%"
+      use:scrollFramesAction={{
+        frames: (i) => `/film/${String(i + 1).padStart(4, '0')}.jpg`,
+        count: 120,
+        triggerElement: '#track',
+        trigger: { start: 'top top', end: 'bottom bottom' },
+      }}
+    />
+  </div>
+</section>
+```
+
+An inline parameter is fine: Svelte calls `update()` with a new object whenever the expression re-runs, and the film is kept unless something in it changed. `createScrollFrames(options)` returns `{ action, getInstance }`, its options read once.
+
+```tsx
+// Solid
+import { useScrollFrames } from 'svg-scroll-draw/solid';
+
+function Film(props) {
+  const ref = useScrollFrames(() => ({
+    frames: (i) => `/film/${String(i + 1).padStart(4, '0')}.jpg`,
+    count: props.count,
+    triggerElement: '#track',
+    trigger: { start: 'top top', end: 'bottom bottom' },
+  }));
+  return <canvas ref={ref} role="img" aria-label="The headphones turning" />;
+}
+```
+
+Pass an accessor to keep the options live: the `frames` function is called inside the effect, so a signal it reads is tracked, and a new URL pattern starts a new film. `createScrollFrames(options)` returns `{ ref, getInstance }`.
+
+```ts
+// Angular
+import { ScrollFramesRef } from 'svg-scroll-draw/angular';
+
+@Component({
+  template: `
+    <section #track style="height: 400vh">
+      <div style="position: sticky; top: 0; height: 100vh">
+        <canvas #film role="img" aria-label="The headphones turning"></canvas>
+      </div>
+    </section>`,
+})
+export class FilmComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('film') filmRef!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('track') trackRef!: ElementRef<HTMLElement>;
+  @Input() count = 120;
+  private film = new ScrollFramesRef();
+
+  ngAfterViewInit() { this.film.init(this.filmRef.nativeElement, this.options()); }
+  ngOnChanges() { this.film.update(this.options()); }  // a no-op before init
+  ngOnDestroy() { this.film.destroy(); }
+
+  private options() {
+    return {
+      frames: (i: number) => `/film/${String(i + 1).padStart(4, '0')}.jpg`,
+      count: this.count,
+      triggerElement: this.trackRef?.nativeElement,
+      trigger: { start: 'top top', end: 'bottom bottom' },
+    };
+  }
+}
+```
+
 #### scrollFrames options
 
 | Option | Type | Default | Description |
@@ -370,7 +459,7 @@ It returns the same instance as every other API: `{ destroy, replay, pause, resu
 
 ## scrollText — text reveal on scroll
 
-A 3.5 KB alternative to GSAP SplitText. SplitText is free and 3.6 KB, but it only splits — animating the pieces needs GSAP core (27.7 KB) on top.
+A 3.9 KB alternative to GSAP SplitText. SplitText is free and 3.6 KB, but it only splits — animating the pieces needs GSAP core (27.7 KB) on top.
 
 ```js
 import { scrollText } from 'svg-scroll-draw/text';
@@ -480,7 +569,7 @@ import { ScrollDraw } from 'svg-scroll-draw/vue';
 | `selector` | `string` | `"path, polyline…"` | CSS selector for child elements to animate |
 | `speed` | `number` | `1` | Scale factor relative to scroll distance |
 | `fade` | `boolean` | `false` | Animate `opacity 0 → 1` simultaneously |
-| `easing` | `string \| fn` | `"linear"` | `linear`, `ease-in`, `ease-out`, `ease-in-out`, `spring`, `bounce`, `elastic`, or `(t) => t` |
+| `easing` | `string \| fn` | `"linear"` | `linear`, `ease-in`, `ease-out`, `ease-in-out`, `spring`, `bounce`, `elastic`, a CSS `cubic-bezier(…)` or `ease` (2.26.0+), or `(t) => t` |
 | `stagger` | `number` | `0` | Offset between each path starting (fraction of scroll range). The last path ends that much after `trigger.end`; where the page ends first, the stagger tightens so it finishes at the bottom |
 | `direction` | `"forward" \| "reverse"` | `"forward"` | `reverse` erases the path as you scroll |
 | `trigger.start` | `string` | `"top bottom"` | When animation begins |
@@ -693,6 +782,10 @@ All APIs share the same easing system:
 // Named strings
 easing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic'
 
+// CSS timing functions (2.26.0+); steps() is not parsed: pass a function
+easing: 'cubic-bezier(.2, .8, .2, 1)'   // x1 and x2 in [0, 1]; y may overshoot
+easing: 'ease'                          // the CSS keyword, cubic-bezier(.25, .1, .25, 1)
+
 // Custom function
 easing: (t: number) => number
 
@@ -704,6 +797,14 @@ easing: createBounce({ bounces: 4, decay: 0.4 })
 easing: createElastic({ amplitude: 1.5, period: 0.3 })
 ```
 
+The library's own names win: `ease-in`, `ease-out` and `ease-in-out` are its
+quadratics, not the CSS keywords of the same name (write
+`cubic-bezier(.42, 0, 1, 1)` and friends for those). Any other string, a typo
+like `'easeOut'`, a `cubic-bezier()` with an `x` outside [0, 1] or a `steps()`,
+warns in development, naming the value and the valid forms, and runs as the
+API's default easing. On the native CSS path a `cubic-bezier()` string goes to
+CSS as written, so both engines draw the same curve.
+
 ---
 
 ## Presets
@@ -746,9 +847,9 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 | `svg-scroll-draw` | `scrollDraw`, `scrollAnimate`, `scrollCounter`, `scrollParallax`, `PRESETS`, easing factories |
 | `svg-scroll-draw/react` | `ScrollDraw`, `ScrollAnimate`, `ScrollCounter`, `ScrollVideo`, `ScrollFrames`, `ScrollText`, `useScrollDrawProgress` |
 | `svg-scroll-draw/vue` | `ScrollDraw`, `useScrollDraw` · **v2:** `ScrollAnimate`, `ScrollCounter`, `ScrollVideo`, `ScrollFrames`, `ScrollText`, `useScrollAnimate`, `useScrollCounter`, `useScrollVideo`, `useScrollFrames`, `useScrollText` |
-| `svg-scroll-draw/svelte` | `scrollDraw` action, `createScrollDraw` · **v2:** `scrollAnimate`, `scrollCounterAction`, `scrollVideoAction`, `scrollTextAction`, `createScrollAnimate`, `createScrollCounter`, `createScrollVideo`, `createScrollText` |
-| `svg-scroll-draw/solid` | `useScrollDraw`, `createScrollDraw` · **v2:** `useScrollAnimate`, `useScrollCounter`, `useScrollVideo`, `useScrollText`, `createScrollAnimate`, `createScrollCounter`, `createScrollVideo`, `createScrollText` |
-| `svg-scroll-draw/angular` | `ScrollDrawRef` · **v2:** `ScrollAnimateRef`, `ScrollCounterRef`, `ScrollVideoRef`, `ScrollTextRef` |
+| `svg-scroll-draw/svelte` | `scrollDraw` action, `createScrollDraw` · **v2:** `scrollAnimate`, `scrollCounterAction`, `scrollVideoAction`, `scrollFramesAction`, `scrollTextAction`, `createScrollAnimate`, `createScrollCounter`, `createScrollVideo`, `createScrollFrames`, `createScrollText` |
+| `svg-scroll-draw/solid` | `useScrollDraw`, `createScrollDraw` · **v2:** `useScrollAnimate`, `useScrollCounter`, `useScrollVideo`, `useScrollFrames`, `useScrollText`, `createScrollAnimate`, `createScrollCounter`, `createScrollVideo`, `createScrollFrames`, `createScrollText` |
+| `svg-scroll-draw/angular` | `ScrollDrawRef` · **v2:** `ScrollAnimateRef`, `ScrollCounterRef`, `ScrollVideoRef`, `ScrollFramesRef`, `ScrollTextRef` |
 | `svg-scroll-draw/astro` | `initScrollDraw()` · **v2:** `initScrollAnimate()`, `initScrollCounter()`, `initScrollText()`, `initAll()` |
 | `svg-scroll-draw/nuxt` | All Vue v1+v2 composables and components, `createScrollDrawPlugin()` |
 | `svg-scroll-draw/video` | `scrollVideo` |
@@ -772,17 +873,17 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 <!-- size-table:start -->
 | Entry | Gzipped |
 |---|---|
-| `svg-scroll-draw` (main, every core API) | 11.5 KB |
-| `svg-scroll-draw/react` (includes the engine) | 14.9 KB |
-| `svg-scroll-draw` + `svg-scroll-draw/react` (together; the engine ships once) | 16.6 KB |
-| `svg-scroll-draw/reveal` | 5.7 KB |
-| `svg-scroll-draw/text` | 3.5 KB |
-| `svg-scroll-draw/video` | 2.9 KB |
-| `svg-scroll-draw/frames` | 4.0 KB |
+| `svg-scroll-draw` (main, every core API) | 11.9 KB |
+| `svg-scroll-draw/react` (includes the engine) | 15.3 KB |
+| `svg-scroll-draw` + `svg-scroll-draw/react` (together; the engine ships once) | 17.0 KB |
+| `svg-scroll-draw/reveal` | 6.2 KB |
+| `svg-scroll-draw/text` | 3.9 KB |
+| `svg-scroll-draw/video` | 3.3 KB |
+| `svg-scroll-draw/frames` | 4.4 KB |
 | `svg-scroll-draw/scrollreveal` | 4.7 KB |
 | `svg-scroll-draw/vivus` | 4.2 KB |
 | `svg-scroll-draw/aos` (styles included) | 3.2 KB |
-| `svg-scroll-draw/snap` | 2.0 KB |
+| `svg-scroll-draw/snap` | 2.4 KB |
 | `svg-scroll-draw/devtools` | 1.8 KB (dev only) |
 | `svg-scroll-draw/pin` | 1.6 KB |
 <!-- size-table:end -->

package/dist/angular/index.cjs

@@ -1,3 +1,3 @@
-'use strict';function wr({tension:e=2.5,friction:r=2.2}={}){return t=>1-Math.cos(t*Math.PI*e)*Math.pow(1-t,r)}function vr({bounces:e=3,decay:r=.5}={}){let t=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),o=Math.sqrt(n),s=0,a=[];for(let p=0;p<t;p++){let g=Math.pow(o,p);a.push(g),s+=g;}let u=[0],f=0;for(let p=0;p<t;p++)f+=a[p]/s,u.push(f);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let g=0;g<t;g++)if(p<=u[g+1]){let x=(p-u[g])/(u[g+1]-u[g]);if(g===0)return x*(2-x);let h=1-Math.pow(n,g);return h+(1-h)*(2*x-1)*(2*x-1)}return 1}}function Er({amplitude:e=1,period:r=.4}={}){let t=Math.max(1,e),n=Math.max(.1,r),o=t<=1?n/4:n/(2*Math.PI)*Math.asin(1/t);return s=>s<=0?0:s>=1?1:t*Math.pow(2,-10*s)*Math.sin((s-o)*(2*Math.PI)/n)+1}var ee={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:wr(),bounce:vr(),elastic:Er()};function Qe(e,r,t){return Math.min(t,Math.max(r,e))}function ie(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[t="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:t,viewport:n}}var Ht=(e,r)=>e==="top"?0:e==="center"?.5:e==="bottom"?1:r;function kt(e,r,t,n){return e+t+r*Ht(n,0)}function Ot(e,r){return r*(/^\d+(\.\d+)?%$/.test(e)?parseFloat(e)/100:Ht(e,1))}function B(e,r,t,n){return t===r?0:Qe((e-r)/(t-r)*n,0,1)}function we(e,r,t,n,o){let s=kt(e.top,e.height,r,n.element)-Ot(n.viewport,t),a=kt(e.top,e.height,r,o.element)-Ot(o.viewport,t);return {tStart:s,tEnd:a}}function et(e,r,t){let n=e.getBoundingClientRect(),o=t==="x"?n.width:n.height;return r?{top:t==="x"?n.left-r.getBoundingClientRect().left-r.clientLeft+r.scrollLeft:n.top-r.getBoundingClientRect().top-r.clientTop+r.scrollTop,height:o,scroll:0}:{top:t==="x"?n.left:n.top,height:o,scroll:t==="x"?window.scrollX:window.scrollY}}function tt(e){let r=parseFloat(e.getAttribute("pathLength")??"");if(r>0)return r;let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function It(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let t=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(t)return [parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function rt(e,r,t){let n=It(e),o=It(r);return !n||!o?e:`rgb(${Math.round(n[0]+(o[0]-n[0])*t)},${Math.round(n[1]+(o[1]-n[1])*t)},${Math.round(n[2]+(o[2]-n[2])*t)})`}var Nt={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Ge=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ae(e,...r){Ge&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Sr="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Tr="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Dt=33;function xr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Mr(e){let r=[];for(let t=0;t<Dt;t++){let n=t/(Dt-1);r.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${r.join(",")})`}function nt(e){switch(e){case "linear":return "linear";case "ease-in":return Sr;case "ease-out":return Tr;case "ease-in-out":return xr()?Mr(ee["ease-in-out"]):null;default:return null}}var Rt=Symbol.for("svg-scroll-draw.registry");function Ft(){let e=globalThis;return e[Rt]||(e[Rt]=new Map)}function ve(e,r){Ft().set(e,r);}function Ee(e){Ft().delete(e);}function ot(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let r=window.matchMedia("(prefers-reduced-motion: reduce)"),t=o=>e(!!o.matches);if(typeof r.addEventListener=="function")return r.addEventListener("change",t),()=>r.removeEventListener("change",t);let n=r;return n.addListener?.(t),()=>n.removeListener?.(t)}function De(e,r){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return r(e,true);let t=r(e,false),n=ot(s=>{if(!s)return;n();let a=(t.getProgress?.()??0)>=1;t.destroy(),t=r(a?{...e,onComplete:void 0}:e,true);}),o={};for(let s of Object.keys(t))o[s]=(...a)=>t[s]?.(...a);return o.destroy=()=>{n(),t.destroy();},o}var Ye,st=new Set,it=new WeakMap,Ue=new Map,Vt=e=>{let r=e.getBoundingClientRect();return r.width+" "+r.height};function Lr(e){let r=new Set;for(let t of e)for(;t&&t!==document.body;t=t.parentElement)for(let n=t;n;n=n.previousElementSibling)r.add(n);return r}function _t(e,r){if(typeof ResizeObserver>"u"||typeof document>"u")return ()=>{};let t=()=>r();Ye??(Ye=new ResizeObserver(o=>{let s=false;for(let{target:a}of o)it.get(a)!==Vt(a)&&(s=true),it.set(a,"");s&&st.forEach(a=>a());})),st.add(t);let n=Lr(e);return [document.body,document.documentElement].forEach(o=>o&&n.add(o)),n.forEach(o=>{it.has(o)||it.set(o,Vt(o)),Ue.set(o,(Ue.get(o)??0)+1),Ye.observe(o);}),()=>{st.delete(t)&&(n.forEach(o=>{let s=(Ue.get(o)??1)-1;if(s)return void Ue.set(o,s);Ue.delete(o),Ye?.unobserve(o);}),st.size||(Ye?.disconnect(),Ye=void 0));}}function Me(e,r,t,n,o){let s,a=NaN,u,f,p=()=>{s=0,n(),!u&&!s&&(a=t())>0&&a<1&&(s=requestAnimationFrame(p));},g=()=>{!s&&!u&&t()!==a&&(s=requestAnimationFrame(p));},x=I=>{u=I,cancelAnimationFrame(s),s=a=NaN,g();},h=()=>{clearTimeout(f),o(),g();},H=()=>{clearTimeout(f),f=setTimeout(h,150);},j=_t(r,H),w=I=>{e[I]("scroll",g,{passive:true}),window[I]("resize",H),window[I]("orientationchange",H);};return w("addEventListener"),g(),{hold:x,remeasure:h,off(){x(true),w("removeEventListener"),j(),clearTimeout(f);}}}var Pr=0;function Cr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Wt(e,r){let t="";try{t=getComputedStyle(e).getPropertyValue(r).trim();}catch{}return t||(e.getAttribute(r)??"").trim()}var zt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Ar(e){if(!Ge)return;let r=Wt(e,"stroke");if(!r||r==="none"){ae("Element has no stroke \u2014 path will not be visible.",e);return}let t=(e.getAttribute("fill")??"").trim();t&&!zt.has(t)&&!zt.has(Wt(e,"fill"))&&ae("Element has a fill \u2014 it may obscure the stroke animation.",e);}function $r(e,r,t){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function o(){let s=t==="x"?window.scrollX:window.scrollY,a=e-s,u=r-s,f=t==="x";n.innerHTML=`
-      <div style="position:absolute;${f?`left:${a}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${a}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${f?`left:${u}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${u}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",o,{passive:true}),o(),{el:n,destroy(){window.removeEventListener("scroll",o),n.remove();}}}var Gt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Bt=/[MmLlHhVvCcSsQqTtAaZz]/g;function kr(e,r,t){if(!Ge)return;let n=(e.match(Bt)??[]).join("").toUpperCase(),o=(r.match(Bt)??[]).join("").toUpperCase(),s=(e.match(Gt)??[]).length,a=(r.match(Gt)??[]).length;if(n!==o){ae(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${o||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,t);return}s!==a&&ae(`morphTo: coordinate count differs (${s} \u2192 ${a}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,t);}function Or(e,r,t){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),o=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,s=>{let a=parseFloat(s),u=n[o++]??a;return String(+(a+(u-a)*t).toFixed(4))})}function jt(e,r={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:De(r,(t,n)=>Hr(e,t,n))}function Hr(e,r,t){let{preset:n,...o}=r,s=n?{...Nt[n],...o}:o,{selector:a="path, polyline, line, polygon, rect, circle",speed:u=1,fade:f=false,easing:p="linear",trigger:g={},stagger:x=0,direction:h="forward",once:H=false,debug:j=false,axis:w="y",scrollContainer:I,autoReverse:ue=false,delay:N=0,strokeColor:M,strokeWidth:P,fillOpacity:$,waypoints:v,velocityScale:C=false,threshold:D=0,rootMargin:te="0px",repeat:q=0,repeatDelay:F=0,morphTo:R,clip:E,autoplay:Y=false,duration:y=1e3,native:A=true,onProgress:Se,onStart:U,onComplete:_,onEnter:fe,onLeave:Te,onEnterBack:ge,onLeaveBack:me}=s,b=E===true?"left":typeof E=="string"?E:false,S=typeof p=="function"?p:ee[p]??ee.linear,he=ie(g.start||"top bottom"),He=ie(g.end||"bottom top"),X=typeof I=="string"?document.querySelector(I):I??null,Le=Array.isArray(M)?M[0]:null,Pe=Array.isArray(M)?M[1]:typeof M=="string"?M:null,ye=Array.isArray(P)?P[0]:null,Ie=Array.isArray(P)?P[1]:typeof P=="number"?P:null,Ce=Array.isArray($)?$[0]:null,be=Array.isArray($)?$[1]:typeof $=="number"?$:null;function Ae(i){let c=i*100;switch(b){case "right":return `inset(0 0 0 ${100-c}%)`;case "top":return `inset(0 0 ${100-c}% 0)`;case "bottom":return `inset(${100-c}% 0 0 0)`;case "center":return `circle(${i*150}% at 50% 50%)`;default:return `inset(0 ${100-c}% 0 0)`}}let l=b?[]:Array.from(e.querySelectorAll(a)),m=[],K=[],k=0,V=0,Q=x,W=0,Ne=0,Z=false,$e=false,ke=0,lt=-1,Xe=[],Ke=-1,pe=false,xe=0,Re=0,Fe,ct=false,ut=null;function bt(){ut?.destroy(),ut=null;}let Ve=new Set,wt=NaN,We=true,Ze=-1,vt=performance.now(),ze=NaN;function Je(){return X?w==="x"?X.scrollLeft:X.scrollTop:w==="x"?window.scrollX:window.scrollY}function Et(){return X?w==="x"?X.clientWidth:X.clientHeight:w==="x"?window.innerWidth:window.innerHeight}function St(){let i=et(e,X,w);return we(i,i.scroll,Et(),he,He)}function mr(){let i=V-k,c=l.length-1,d=X??document.documentElement,L=w==="x"?"Width":"Height";if(Q=x,x>0&&c>0&&i>0){let re=d[`scroll${L}`]-d[`client${L}`]-1-k-i/u;re>=0&&(Q=Math.min(x,re/(c*i)));}let J=Math.max(0,c)*Q*i,le=i/Math.min(u,1);W=k+Math.min(0,J,le,J+le),Ne=k+Math.max(0,J,le,J+le);}function Tt(){(({tStart:k,tEnd:V}=St())),mr(),j&&Ge&&(bt(),ut=$r(k,V,w));}function ft(i,c=St){ve(e,{type:"draw",getProgress:()=>i.getProgress(),getTrigger:c});let d=i.destroy;return i.destroy=()=>{d.call(i),Ee(e);},i}function xt(i,c){return H&&!ue?Math.max(lt,S(Xe[i]=Math.max(Xe[i]??0,c))):S(c)}function pr(i,c){if(e.style.setProperty("--scroll-draw-progress",String(i)),b){let d=c==="reverse"?1-i:i;e.style.clipPath=Ae(d);return}l.forEach((d,L)=>mt(d,L,i,c));}function mt(i,c,d,L){i.style.strokeDashoffset=L==="reverse"?`${m[c]*d}`:`${m[c]*(1-d)}`,f&&(i.style.opacity=L==="reverse"?`${1-d}`:`${d}`),Le&&Pe?i.style.stroke=rt(Le,Pe,d):Pe&&(i.style.stroke=Pe),ye!==null&&Ie!==null?i.style.strokeWidth=`${ye+(Ie-ye)*d}`:Ie!==null&&(i.style.strokeWidth=`${Ie}`),Ce!==null&&be!==null?i.style.fillOpacity=`${Ce+(be-Ce)*d}`:be!==null&&(i.style.fillOpacity=`${be}`),R&&i.tagName.toLowerCase()==="path"&&K[c]&&i.setAttribute("d",Or(K[c],R,d));}function pt(){if(e.style.setProperty("--scroll-draw-progress","0"),b){e.style.clipPath=Ae(h==="reverse"?1:0);return}l.forEach((i,c)=>{i.style.strokeDasharray=`${m[c]}`,i.style.strokeDashoffset=h==="reverse"?"0":`${m[c]}`,f?i.style.opacity=h==="reverse"?"1":"0":i.style.opacity="",Le&&(i.style.stroke=Le),ye!==null&&(i.style.strokeWidth=`${ye}`),Ce!==null&&(i.style.fillOpacity=`${Ce}`),R&&i.tagName.toLowerCase()==="path"&&K[c]&&i.setAttribute("d",K[c]);});}function Be(i,c){let d=i.getAttribute("d"),L=tt(i);if(R&&K[c]){i.setAttribute("d",R);let J=tt(i);i.setAttribute("d",K[c]),L=Math.max(tt(i),J),i.setAttribute("d",d);}m[c]=L,i.style.strokeDasharray=`${L}`;}if(l.forEach((i,c)=>{Ar(i);let d=i.tagName.toLowerCase()==="path";d?K.push(i.getAttribute("d")??""):K.push(""),Be(i,c);let L=m[c];R&&(d?kr(K[K.length-1],R,i):ae(`morphTo only applies to <path> elements \u2014 ignored on <${i.tagName}>.`,i)),t?(i.style.strokeDashoffset=h==="reverse"?`${L}`:"0",f&&(i.style.opacity="1"),Pe&&(i.style.stroke=Pe),Ie!==null&&(i.style.strokeWidth=`${Ie}`),be!==null&&(i.style.fillOpacity=`${be}`),R&&i.tagName.toLowerCase()==="path"&&i.setAttribute("d",R)):(i.style.strokeDashoffset=h==="reverse"?"0":`${L}`,f?i.style.opacity=h==="reverse"?"1":"0":i.style.opacity="",Le&&(i.style.stroke=Le),ye!==null&&(i.style.strokeWidth=`${ye}`),Ce!==null&&(i.style.fillOpacity=`${Ce}`));}),t)return b&&(e.style.clipPath=Ae(1)),_?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};b&&(e.style.clipPath=Ae(h==="reverse"?1:0));let Mt=typeof p=="string"?nt(p):null;function dr(){return !(A===false||Y||j&&Ge||!Cr()||!l.length||!Mt||b||w!=="y"||X||u!==1||x!==0||H||ue||C!==false||R||v||q||N>0||Se||U||_||fe||Te||ge||me||M!=null||P!=null||$!=null||(g.start||"top bottom").trim()!=="top bottom"||(g.end||"bottom top").trim()!=="bottom top")}function gr(){let i=++Pr,c=`svg-scroll-draw-${i}`,d=`svg-scroll-draw-host-${i}`,L=`--svg-scroll-draw-${i}`,J=h==="reverse"?"0":"var(--ssd-len)",le=h==="reverse"?"var(--ssd-len)":"0",re=`stroke-dashoffset:${J};`,z=`stroke-dashoffset:${le};`;f&&(re+=`opacity:${h==="reverse"?1:0};`,z+=`opacity:${h==="reverse"?0:1};`);let G=document.createElement("style");G.setAttribute("data-svg-scroll-draw",""),G.textContent=`@keyframes ${c}{from{${re}}to{${z}}}.${d}{view-timeline-name:${L};view-timeline-axis:block;}.${c}{animation-name:${c};animation-duration:auto;animation-timing-function:${Mt};animation-fill-mode:both;animation-timeline:${L};animation-range:cover 0% cover 100%;}`,document.head.appendChild(G),e.classList.add(d);function se(T,O){T.style.setProperty("--ssd-len",String(m[O])),T.style.strokeDasharray=`${m[O]}`,T.style.strokeDashoffset="",T.style.opacity="",T.style.animationPlayState="",T.classList.add(c);}l.forEach(se);let ne=false,ce=-1;function de(){if(ce>=0)return ce;let T=e.getBoundingClientRect(),{tStart:O,tEnd:oe}=we({top:T.top,height:T.height},Je(),Et(),he,He);return S(B(Je(),O,oe,u))}return {destroy(){e.classList.remove(d),l.forEach(T=>{T.classList.remove(c),T.style.removeProperty("--ssd-len"),T.style.animationPlayState="";}),G.remove();},replay(){ne=false,ce=-1,l.forEach(se);},pause(){ne=true,l.forEach(T=>{T.style.animationPlayState="paused";});},resume(){ne&&(ne=false,l.forEach(T=>{T.style.animationPlayState="running";}));},seek(T){let O=Math.min(1,Math.max(0,T));ce=O,ne=true,l.forEach((oe,Oe)=>{oe.classList.remove(c),oe.style.strokeDashoffset=h==="reverse"?`${m[Oe]*O}`:`${m[Oe]*(1-O)}`,f&&(oe.style.opacity=h==="reverse"?`${1-O}`:`${O}`);});},getProgress(){return de()},refresh(){l.forEach((T,O)=>{Be(T,O),T.style.setProperty("--ssd-len",String(m[O]));});}}}if(dr())return ft(gr());function hr(){let i=Math.max(1,y),c=b?i:i*(1+Math.max(0,l.length-1)*x),d=0,L=0,J=false;function le(ce){let de=true,T=Math.min(1,Math.max(0,ce/c));if(b){let O=Math.min(1,Math.max(0,ce/i)),oe=S(O);xe=oe,e.style.setProperty("--scroll-draw-progress",String(oe)),e.style.clipPath=Ae(h==="reverse"?1-oe:oe),Se?.(oe),O<1&&(de=false);}else {l.forEach((oe,Oe)=>{let br=Oe*x*i,$t=Math.min(1,Math.max(0,(ce-br)/i));mt(oe,Oe,S($t),h),$t<1&&(de=false);});let O=S(T);xe=O,Se?.(O),e.style.setProperty("--scroll-draw-progress",String(O));}if(v){let O=S(T);for(let oe in v){let Oe=parseFloat(oe);O>=Oe&&!Ve.has(Oe)&&(Ve.add(Oe),v[oe]?.());}}return de}function re(ce){if(pe)return;let de=ce-d;$e||($e=true,U?.());let T=le(de);if(T&&!Z){Z=true,le(c),_?.(),Re<(q==="infinite"?1/0:q??0)&&(Re++,Fe=setTimeout(()=>{d=performance.now(),$e=false,Z=false,Ve.clear(),pt(),ke=requestAnimationFrame(re);},F));return}T||(ke=requestAnimationFrame(re));}function z(){cancelAnimationFrame(ke),clearTimeout(Fe),d=performance.now(),L=0,pe=false,$e=false,Z=false,Re=0,J=true,xe=0,Ve.clear(),pt(),ke=requestAnimationFrame(re);}let G=new IntersectionObserver(ce=>{ce.forEach(de=>{de.isIntersecting&&!(H&&Z)?z():!de.isIntersecting&&!H&&!Z&&(cancelAnimationFrame(ke),clearTimeout(Fe),J=false);});},{root:X??null,threshold:D,rootMargin:te}),se;function ne(){clearTimeout(se),se=setTimeout(()=>l.forEach(Be),150);}return window.addEventListener("resize",ne),window.addEventListener("orientationchange",ne),N>0?setTimeout(()=>G.observe(e),N):G.observe(e),{destroy(){cancelAnimationFrame(ke),clearTimeout(Fe),G.disconnect(),window.removeEventListener("resize",ne),window.removeEventListener("orientationchange",ne),clearTimeout(se);},replay(){Re=0,z();},pause(){pe||!J||(pe=true,L=performance.now()-d,cancelAnimationFrame(ke));},resume(){pe&&(pe=false,J=true,d=performance.now()-L,ke=requestAnimationFrame(re));},seek(ce){let de=Math.min(1,Math.max(0,ce));xe=de,pe=true,L=de*c,d=performance.now()-L,cancelAnimationFrame(ke),le(L);},getProgress(){return xe},refresh(){clearTimeout(se),l.forEach(Be);}}}if(Y)return ft(hr());Tt();let Lt=()=>B(Je(),W,Ne,1);function Pt(){Z=true,_?.(),Re<(q==="infinite"?1/0:q)&&(Re++,Fe=setTimeout(()=>{ct=true;},F));}function Ct(){lt=-1,Xe=[],$e=false,Z=false,ct=false,Ve.clear(),pt(),We=true;}function yr(){let i=performance.now(),c=Je();if(ct&&Lt()%1&&Ct(),!We&&C===false&&c===wt)return;We=false,wt=c;let d=u;if(C!==false){let z=i-vt,G=z>0?Math.abs(c-(Ze<0?c:Ze))/z:0;d=u*Math.max(.2,1+G*(typeof C=="number"?C:1)*.04);}Ze=c,vt=i;let L=ue?Ke===-1||c>=Ke?"forward":"reverse":h;Ke=c;let J=V-k,le=true,re=J===0?0:(c-k)/J;if(isNaN(ze)||(ze<=0&&re>0&&fe?.(),ze<1&&re>=1&&Te?.(),ze>=1&&re<1&&ge?.(),ze>0&&re<=0&&me?.()),ze=re,b){let z=xt(0,B(c,k,V,d));xe=z,e.style.setProperty("--scroll-draw-progress",String(z));let G=L==="reverse"?1-z:z;e.style.clipPath=Ae(G),Se?.(z),!$e&&B(c,k,V,d)>0&&($e=true,U?.()),z>=1&&!Z?Pt():z<1&&!H&&(Z=false);return}if(l.forEach((z,G)=>{let se=G*Q*J,ne=xt(G,B(c,k+se,V+se,d));mt(z,G,ne,L),G===0&&(xe=ne,Se?.(ne),e.style.setProperty("--scroll-draw-progress",String(ne))),ne<1&&(le=false);}),v){let z=S(B(c,k,V,d));for(let G in v){let se=parseFloat(G);z>=se&&!Ve.has(se)&&(Ve.add(se),v[G]?.());}}!$e&&B(c,k,V,d)>0&&($e=true,U?.()),le&&!Z?Pt():!le&&!H&&(Z=false);}let je=Me(X??window,[e],Lt,yr,()=>{let i=m.join();l.forEach(Be),Tt(),We=true,m.join()!==i&&qe();}),dt=N>0;function qe(){je.hold(pe||dt);}let At;return dt&&(At=setTimeout(()=>{dt=false,qe();},N)),qe(),ft({destroy(){clearTimeout(Fe),clearTimeout(At),je.off(),bt();},replay(){Ct(),Ke=-1,Ze=-1,Re=0,pe=false,xe=0,clearTimeout(Fe),qe();},pause(){pe=true,je.hold(true);},resume(){pe&&(pe=false,We=true,qe());},seek(i){let c=Math.min(1,Math.max(0,i));xe=c,lt=c,Xe=[],pe=true,je.hold(true),pr(c,h),We=true;},getProgress(){return xe},refresh:je.remeasure},()=>({tStart:k,tEnd:V}))}var qt=new WeakMap,Ir=0;function gt(e){return JSON.stringify(e,(r,t)=>{if(typeof t=="function")return "\u0192";if(typeof Element<"u"&&t instanceof Element){let n=qt.get(t);return n===void 0&&qt.set(t,n=++Ir),`el#${n}`}return t})}function Qt(e,r){let t={...e};for(let n of Object.keys(t))typeof t[n]=="function"&&(t[n]=(...o)=>r()[n]?.(...o));return t}function Nr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Yt(e){let r=[],t=/([\w]+)\(([^)]*)\)/g,n;for(;(n=t.exec(e))!==null;){let o=[],s=[],a=n[2].trim();if(a)for(let u of a.split(/[\s,]+/)){let f=u.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(f?parseFloat(f[1]):0),s.push(f?f[2]:"");}r.push({fn:n[1],nums:o,units:s});}return r}function Dr(e,r,t){let n=Yt(e),o=Yt(r);return n.length===0||n.length!==o.length?t<1?e:r:n.map((s,a)=>{let u=o[a];return s.fn!==u.fn||s.nums.length!==u.nums.length?t<1?`${s.fn}(${s.nums.map((f,p)=>`${f}${s.units[p]}`).join(", ")})`:`${u.fn}(${u.nums.map((f,p)=>`${f}${u.units[p]}`).join(", ")})`:`${s.fn}(${s.nums.map((f,p)=>`${f+(u.nums[p]-f)*t}${s.units[p]}`).join(", ")})`}).join(" ")}function Ut(e,r,t){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*t);let n=String(e),o=String(r);if(Nr(n))return rt(n,o,t);if(n.includes("("))return Dr(n,o,t);let s=n.match(/^([-+]?[\d.]+)(.*)$/),a=o.match(/^([-+]?[\d.]+)(.*)$/);if(s&&a){let u=parseFloat(s[1]),f=parseFloat(a[1]);return `${u+(f-u)*t}${s[2]||a[2]}`}return t<1?n:o}function Rr(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var Fr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Vr=0,Xt="--scroll-draw-progress";function _r(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var Zt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Jt(e,r){return typeof window>"u"?Zt:r.respectReducedMotion===false?Kt(e,r,false):De(r,(t,n)=>Kt(e,t,n))}function Kt(e,r,t){let{props:n,trigger:o={},easing:s="ease-out",speed:a=1,once:u=false,axis:f="y",scrollContainer:p,native:g=true,velocityScale:x=false,triggerElement:h,onProgress:H,onComplete:j,onEnter:w,onLeave:I,onEnterBack:ue,onLeaveBack:N}=r,M=typeof s=="function"?s:ee[s]??ee["ease-out"],P=ie(o.start||"top bottom"),$=ie(o.end||"bottom top"),v=h??e,C=typeof p=="string"?document.querySelector(p):p??null,D=Object.entries(n).map(([l,m])=>({prop:Rr(l),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function te(){let l=window.getComputedStyle(e);for(let m of D)m.from===""&&(m.from=l.getPropertyValue(m.prop).trim()||"0");}function q(){for(let l of D)e.style.setProperty(l.prop,String(l.to));}let F=new Map;for(let l of [...D.map(m=>m.prop),Xt])F.set(l,e.style.getPropertyValue(l));function R(){for(let[l,m]of F)m?e.style.setProperty(l,m):e.style.removeProperty(l);}if(t)return q(),j?.(),{...Zt,destroy:R,getProgress:()=>1};te();let E=()=>C?f==="x"?C.scrollLeft:C.scrollTop:f==="x"?window.scrollX:window.scrollY,Y=()=>C?f==="x"?C.clientWidth:C.clientHeight:f==="x"?window.innerWidth:window.innerHeight,y=typeof s=="string"?nt(s):null;function A(){if(!g||!_r()||!y||f!=="y"||C||v!==e||u||a!==1||H||j||w||I||ue||N||x!==false||(o.start||"top bottom").trim()!=="top bottom"||(o.end||"bottom top").trim()!=="bottom top")return  false;for(let l of D)if(!Fr.has(l.prop))return  false;return  true}function Se(){let l=`ssd-a-${++Vr}`,m=D.map(W=>`${W.prop}:${W.from}`).join(";"),K=D.map(W=>`${W.prop}:${W.to}`).join(";"),k=document.createElement("style");k.setAttribute("data-ssd-animate",""),k.textContent=`@keyframes ${l}{from{${m}}to{${K}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${y};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(k),e.classList.add(l);let V=()=>{let W=e.getBoundingClientRect();return we({top:W.top,height:W.height},E(),Y(),P,$)};ve(e,{type:"animate",getProgress:()=>Q.getProgress(),getTrigger:V});let Q={refresh(){},destroy(){e.classList.remove(l),k.remove(),e.style.animationPlayState="",R(),Ee(e);},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(W){let Ne=Math.min(1,Math.max(0,W));e.classList.remove(l);for(let Z of D)e.style.setProperty(Z.prop,Ut(Z.from,Z.to,Ne));},getProgress(){let{tStart:W,tEnd:Ne}=V();return M(B(E(),W,Ne,a))}};return Q}if(A())return Se();let U=0,_=0,fe=false,Te=-1,ge=0,me=0,b=false,S=NaN,he=-1,He=0,X=v===e?D:[],Le=false;function Pe(){let l=e.style,m=X.map(Q=>l.getPropertyValue(Q.prop)),K=l.transition;X.length&&(l.transition="none"),X.forEach(Q=>l.setProperty(Q.prop,F.get(Q.prop)??""));let k=et(v,C,f);X.forEach((Q,W)=>l.setProperty(Q.prop,m[W])),X.length&&(e.offsetWidth,l.transition=K);let V=we(k,k.scroll,Y(),P,$);Le&&Math.abs(V.tStart-U)<1&&Math.abs(V.tEnd-_)<1||(Le=true,U=V.tStart,_=V.tEnd);}function ye(l){e.style.setProperty(Xt,String(l));for(let m of D)e.style.setProperty(m.prop,Ut(m.from,m.to,l));H?.(l);}function Ie(l){if(isNaN(S)){S=l;return}S<=0&&l>0&&w?.(),S<1&&l>=1&&I?.(),S>=1&&l<1&&ue?.(),S>0&&l<=0&&N?.(),S=l;}function Ce(){if(fe)return;let l=performance.now(),m=E(),K=a;if(x!==false){let W=l-He,Ne=W>0?Math.abs(m-(he<0?m:he))/W:0;K=a*Math.max(.2,1+Ne*(typeof x=="number"?x:1)*.04);}he=m,He=l;let k=_===U?0:(m-U)/(_-U);Ie(k);let V=B(m,U,_,K),Q=u?Math.max(Te,M(ge=Math.max(ge,V))):M(V);me=Q,ye(Q),Q>=1&&!b?(b=true,j?.()):Q<1&&!u&&(b=false);}let be=Me(C??window,[v],()=>B(E(),U,_,Math.min(a,1)),Ce,Pe);Pe(),_===U&&ae("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.",e),ge=B(E(),U,_,a),me=M(ge),ye(me),ve(e,{type:"animate",getProgress:()=>me,getTrigger:()=>({tStart:U,tEnd:_})});function Ae(){fe=true,be.hold(true);}return {destroy(){fe=true,be.off(),R(),Ee(e);},replay(){Te=-1,ge=0,b=false,me=0,fe=false,ye(0),be.hold(false);},pause:Ae,resume(){fe&&(fe=false,be.hold(false));},seek(l){let m=Math.min(1,Math.max(0,l));me=m,Te=m,ge=0,Ae(),ye(m);},getProgress(){return me},refresh:be.remeasure}}var ht={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function er(e,r){if(typeof window>"u")return ht;let t=typeof e=="string"?document.querySelector(e):e;return t?De(r,(n,o)=>Wr(t,n,o)):(ae("scrollCounter: element not found:",e),ht)}function Wr(e,r,t){let{from:n=0,to:o,format:s,easing:a="ease-out",trigger:u={},once:f=true,decimals:p,onComplete:g}=r,x=p!==void 0?y=>y.toFixed(p):s??(y=>String(Math.round(y))),h=typeof a=="function"?a:ee[a]??ee["ease-out"],H=ie(u.start||"top 80%"),j=ie(u.end||"top 20%");if(t)return e.textContent=x(o),g?.(),{...ht,getProgress:()=>1};let w=0,I=0,ue=false,N=-1,M=0,P=0,$=false,v=()=>window.scrollY,C=()=>window.innerHeight;function D(){let y=e.getBoundingClientRect(),A=we({top:y.top,height:y.height},v(),C(),H,j);ue&&Math.abs(A.tStart-w)<1&&Math.abs(A.tEnd-I)<1||(ue=true,w=A.tStart,I=A.tEnd);}let te=e.style.getPropertyValue("--scroll-draw-progress");function q(y){e.textContent=x(n+(o-n)*y),e.style.setProperty("--scroll-draw-progress",String(y));}let F=()=>B(v(),w,I,1);function R(){let y=F(),A=f?Math.max(N,h(M=Math.max(M,y))):h(y);P=A,q(A),A>=1&&!$?($=true,g?.()):A<1&&!f&&($=false);}D();{M=B(v(),w,I,1);let y=h(M);P=y,q(y);}let E=Me(window,[e],F,R,D);ve(e,{type:"counter",getProgress:()=>P,getTrigger:()=>({tStart:w,tEnd:I})});let Y=()=>E.hold(false);return {destroy(){E.off(),e.style.setProperty("--scroll-draw-progress",te),Ee(e);},replay(){N=-1,M=0,$=false,P=0,q(0),Y();},pause:()=>E.hold(true),resume:Y,seek(y){let A=Math.min(1,Math.max(0,y));P=A,N=A,M=0,E.hold(true),q(A);},getProgress(){return P}}}var tr={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function rr(e,r={}){if(typeof window>"u")return tr;let t=typeof e=="string"?document.querySelector(e):e;if(!t||t.tagName.toLowerCase()!=="video")return ae("scrollVideo: <video> element not found:",e),tr;let n=t,{trigger:o={},easing:s="linear",once:a=false,axis:u="y",preload:f="auto",triggerElement:p,onReady:g,onComplete:x,onProgress:h}=r,H=p??n,j=window.matchMedia("(prefers-reduced-motion: reduce)").matches,w=typeof s=="function"?s:ee[s]??ee.linear,I=ie(o.start||"top top"),ue=ie(o.end||"bottom top");n.pause(),n.hasAttribute("preload")||(n.preload=f);let N=r.from??0,M=r.to,P=0,$=0,v=false,C=-1,D=0,te=0,q=false,F=false,R=()=>u==="x"?window.scrollX:window.scrollY,E=()=>u==="x"?window.innerWidth:window.innerHeight;function Y(){let b=H.getBoundingClientRect(),S=u==="x"?b.left:b.top,he=u==="x"?b.width:b.height,He=we({top:S,height:he},R(),E(),I,ue);P=He.tStart,$=He.tEnd,F&&$===P&&ae("scrollVideo: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",n);}let y=NaN;function A(b){if(!F)return;let S=M??n.duration??0,he=N+(S-N)*b;he!==y&&(y=he,n.currentTime=he),n.style.setProperty("--scroll-draw-progress",String(b)),h?.(b);}let Se=()=>B(R(),P,$,1);function U(){if(!F||j)return;let b=Se(),S=a?Math.max(C,w(D=Math.max(D,b))):w(b);te=S,A(S),S>=1&&!q?(q=true,x?.()):S<1&&!a&&(q=false);}let _=Me(window,[H],Se,U,Y),fe=()=>_.hold(v||!F||j);fe();function Te(){if(F=true,M===void 0&&(M=n.duration),j){A(1),g?.();return}Y(),g?.(),v?A(te):fe();}n.readyState>=1?Te():n.addEventListener("loadedmetadata",Te,{once:true}),F||Y();let ge=j?()=>{}:ot(b=>{b&&(ge(),j=true,_.hold(true),A(1));});ve(n,{type:"video",getProgress:()=>te,getTrigger:()=>({tStart:P,tEnd:$})});function me(){v&&(v=false,fe());}return {destroy(){_.off(),n.removeEventListener("loadedmetadata",Te),ge(),Ee(n);},replay(){C=-1,D=0,q=false,te=0,y=NaN,A(0),me();},pause(){v=true,_.hold(true);},resume:me,seek(b){let S=Math.min(1,Math.max(0,b));te=S,C=S,D=0,v=true,_.hold(true),y=NaN,A(S);},getProgress(){return te}}}function nr(e,r){let t=document.createElement("span");t.textContent=r,t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none",e.appendChild(t);}function at(e=""){let r=document.createElement("span");return r.setAttribute("aria-hidden","true"),r.textContent=e,r}function sr(e){let r=e.textContent??"";return e.textContent="",r.split(/(\s+)/).filter(Boolean).map(t=>{let n=e.appendChild(at(t)),o=/^\s+$/.test(t);return o?n.style.whiteSpace="pre":n.style.display="inline-block",o?null:n}).filter(t=>t!==null)}function zr(e){let r=e.textContent??"";e.textContent="";let t=[],n=null;for(let o of r){let s=at(o),a=o===" ";a?s.style.whiteSpace="pre":(s.style.display="inline-block",t.push(s)),a||o>"\u0DFF"?n=null:n||(n=e.appendChild(at()),n.style.cssText="display:inline-block;white-space:nowrap"),(n??e).appendChild(s);}return t}function or(e){let r=sr(e),t=new Map;for(let s of r){let a=s.offsetTop;t.has(a)||t.set(a,[]),t.get(a).push(s);}let n=[],o=Array.from(t.keys()).sort((s,a)=>s-a);for(let s of o){let a=t.get(s),u=at();u.style.display="inline-block",a.forEach((f,p)=>{let g=f.nextElementSibling;u.appendChild(f),p<a.length-1&&g&&g.style.whiteSpace==="pre"&&u.appendChild(g);}),n.push(u);}return e.textContent="",n.forEach((s,a)=>{e.appendChild(s),a<n.length-1&&e.appendChild(document.createTextNode(" "));}),n}function Gr(e,r,t,n){if(t<=1||n===0)return e;n=Math.min(n,1/t);let o=(t-1)*n,s=r*n,a=s+(1-o);return a<=s?e>=s?1:0:Qe((e-s)/(a-s),0,1)}function Br(e,r){let t=[];if(r?.y!==void 0&&t.push(`translateY(${r.y*(1-e)}px)`),r?.x!==void 0&&t.push(`translateX(${r.x*(1-e)}px)`),r?.rotate!==void 0&&t.push(`rotate(${r.rotate*(1-e)}deg)`),r?.scale!==void 0){let n=r.scale+(1-r.scale)*e;t.push(`scale(${n})`);}return t.join(" ")}var yt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ir(e,r={}){if(typeof window>"u")return yt;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return ae("scrollText: element not found:",e),yt;let n=t;return De(r,(o,s)=>jr(n,o,s))}function jr(e,r,t){let{split:n="words",stagger:o=.04,easing:s="ease-out",from:a={opacity:0,y:24},trigger:u={},once:f=true,onComplete:p}=r,g=typeof s=="function"?s:ee[s]??ee["ease-out"],x=ie(u.start||"top 85%"),h=ie(u.end||"top 40%"),H=e.innerHTML,j=e.textContent??"",w;n==="chars"?w=zr(e):n==="lines"?w=or(e):w=sr(e),nr(e,j);let I=w.length;function ue(E,Y){a?.opacity!==void 0&&(E.style.opacity=String(a.opacity+(1-a.opacity)*Y));let y=Br(Y,a);y&&(E.style.transform=y);}function N(E){e.style.setProperty("--scroll-draw-progress",String(E)),w.forEach((Y,y)=>{let A=g(Gr(E,y,I,o));ue(Y,A);});}if(t)return N(1),p?.(),{...yt,destroy:()=>{e.innerHTML=H;},getProgress:()=>1};N(0);let M=0,P=0,$=-1,v=0,C=false;function D(){({tStart:M,tEnd:P}=we(e.getBoundingClientRect(),window.scrollY,window.innerHeight,x,h));}let te=()=>B(window.scrollY,M,P,1);function q(){let E=f?$=Math.max($,te()):te();v=E,N(E),E>=1&&!C?(C=true,p?.()):E<1&&!f&&(C=false);}D();let F=Me(window,[e],te,q,()=>{n==="lines"&&(e.innerHTML=H,w=or(e),nr(e,j),N(v)),D();});ve(e,{type:"text",getProgress:()=>v,getTrigger:()=>({tStart:M,tEnd:P})});let R=()=>F.hold(false);return {destroy(){F.off(),e.innerHTML=H,Ee(e);},replay(){$=-1,C=false,v=0,N(0),R();},pause:()=>F.hold(true),resume:R,seek(E){F.hold(true),N(v=$=Qe(E,0,1));},getProgress(){return v}}}var _e=class{constructor(r){this.create=r;this.instance=null;this.el=null;this.key="";}init(r,t){return this.destroy(),this.el=r,this.latest=t,this.key=gt(t),this.instance=this.create(r,Qt(t,()=>this.latest)),this}update(r){return this.el?gt(r)!==this.key?this.init(this.el,r):(this.latest=r,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},ar=class extends _e{constructor(){super(jt);}init(r,t={}){return super.init(r,t)}},lr=class extends _e{constructor(){super(Jt);}},cr=class extends _e{constructor(){super(er);}},ur=class extends _e{constructor(){super(rr);}init(r,t={}){return super.init(r,t)}},fr=class extends _e{constructor(){super(ir);}init(r,t={}){return super.init(r,t)}};exports.EngineRef=_e;exports.ScrollAnimateRef=lr;exports.ScrollCounterRef=cr;exports.ScrollDrawRef=ar;exports.ScrollTextRef=fr;exports.ScrollVideoRef=ur;
+'use strict';var Ke=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function $(e,...r){Ke&&console.warn(`[svg-scroll-draw] ${e}`,...r);}function Ar({tension:e=2.5,friction:r=2.2}={}){return t=>1-Math.cos(t*Math.PI*e)*Math.pow(1-t,r)}function kr({bounces:e=3,decay:r=.5}={}){let t=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),o=Math.sqrt(n),s=0,i=[];for(let g=0;g<t;g++){let w=Math.pow(o,g);i.push(w),s+=w;}let c=[0],m=0;for(let g=0;g<t;g++)m+=i[g]/s,c.push(m);return g=>{if(g<=0)return 0;if(g>=1)return 1;for(let w=0;w<t;w++)if(g<=c[w+1]){let A=(g-c[w])/(c[w+1]-c[w]);if(w===0)return A*(2-A);let S=1-Math.pow(n,w);return S+(1-S)*(2*A-1)*(2*A-1)}return 1}}function $r({amplitude:e=1,period:r=.4}={}){let t=Math.max(1,e),n=Math.max(.1,r),o=t<=1?n/4:n/(2*Math.PI)*Math.asin(1/t);return s=>s<=0?0:s>=1?1:t*Math.pow(2,-10*s)*Math.sin((s-o)*(2*Math.PI)/n)+1}var Xe={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:Ar(),bounce:kr(),elastic:$r()};function Or(e,r,t,n){let o=(s,i,c)=>((1+3*s-3*i)*c+3*i-6*s)*c*c+3*s*c;return s=>{if(s<=0||s>=1)return +(s>0);let i=s;for(let c=0;c<8;c++)i-=(o(e,t,i)-s)/((3*(1+3*e-3*t)*i+6*t-12*e)*i+3*e);if(!(i>=0&&i<=1&&Math.abs(o(e,t,i)-s)<1e-9))for(let c=0,m=0,g=1;c<30;c++)i=(m+g)/2,o(e,t,i)<s?m=i:g=i;return o(r,n,i)}}function Et(e){let r=/^cubic-bezier\((.*)\)$/.exec(e==="ease"?"cubic-bezier(.25,.1,.25,1)":e.trim()),t=r?r[1].split(",").map(parseFloat):[];if(t.length===4&&t.every(Number.isFinite)&&t[0]*(1-t[0])>=0&&t[2]*(1-t[2])>=0)return [Or(t[0],t[1],t[2],t[3]),`cubic-bezier(${t})`]}var It=new Set;function Re(e,r="linear"){if(typeof e=="function")return e;if(e==null)return Xe[r];if({}.hasOwnProperty.call(Xe,e))return Xe[e];let t=Et(String(e));return t?t[0]:(!It.has(e)&&It.add(e)&&$(`Unknown easing ${JSON.stringify(e)}: use a name, cubic-bezier() or a function.`),Xe[r])}function rt(e,r,t){return Math.min(t,Math.max(r,e))}function ae(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[t="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:t,viewport:n}}var Nt=(e,r)=>e==="top"?0:e==="center"?.5:e==="bottom"?1:r;function Rt(e,r,t,n){return e+t+r*Nt(n,0)}function Dt(e,r){return r*(/^\d+(\.\d+)?%$/.test(e)?parseFloat(e)/100:Nt(e,1))}function Y(e,r,t,n){return t===r?0:rt((e-r)/(t-r)*n,0,1)}function Le(e,r,t,n,o){let s=Rt(e.top,e.height,r,n.element)-Dt(n.viewport,t),i=Rt(e.top,e.height,r,o.element)-Dt(o.viewport,t);return {tStart:s,tEnd:i}}function lt(e,r,t){let n=e.getBoundingClientRect(),o=t==="x"?n.width:n.height;return r?{top:t==="x"?n.left-r.getBoundingClientRect().left-r.clientLeft+r.scrollLeft:n.top-r.getBoundingClientRect().top-r.clientTop+r.scrollTop,height:o,scroll:0}:{top:t==="x"?n.left:n.top,height:o,scroll:t==="x"?window.scrollX:window.scrollY}}function ct(e){let r=parseFloat(e.getAttribute("pathLength")??"");if(r>0)return r;let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function ut(e){return `${e} ${e*2}`}function _t(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let t=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(t)return [parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function ft(e,r,t){let n=_t(e),o=_t(r);return !n||!o?e:`rgb(${Math.round(n[0]+(o[0]-n[0])*t)},${Math.round(n[1]+(o[1]-n[1])*t)},${Math.round(n[2]+(o[2]-n[2])*t)})`}var Vt={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Fr="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Hr="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",zt=33;function Ir(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Rr(e){let r=[];for(let t=0;t<zt;t++){let n=t/(zt-1);r.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${r.join(",")})`}function mt(e){switch(e){case "linear":return "linear";case "ease-in":return Fr;case "ease-out":return Hr;case "ease-in-out":return Ir()?Rr(Xe["ease-in-out"]):null;default:return Et(e)?.[1]??null}}var Wt=Symbol.for("svg-scroll-draw.registry");function Gt(){let e=globalThis;return e[Wt]||(e[Wt]=new Map)}function ke(e,r){Gt().set(e,r);}function $e(e){Gt().delete(e);}function Je(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let r=window.matchMedia("(prefers-reduced-motion: reduce)"),t=o=>e(!!o.matches);if(typeof r.addEventListener=="function")return r.addEventListener("change",t),()=>r.removeEventListener("change",t);let n=r;return n.addListener?.(t),()=>n.removeListener?.(t)}function Be(e,r){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return r(e,true);let t=r(e,false),n=Je(s=>{if(!s)return;n();let i=(t.getProgress?.()??0)>=1;t.destroy(),t=r(i?{...e,onComplete:void 0}:e,true);}),o={};for(let s of Object.keys(t))o[s]=(...i)=>t[s]?.(...i);return o.destroy=()=>{n(),t.destroy();},o}var nt,pt=new Set,dt=new WeakMap,ot=new Map,Bt=e=>{let r=e.getBoundingClientRect();return r.width+" "+r.height};function Dr(e){let r=new Set;for(let t of e)for(;t&&t!==document.body;t=t.parentElement)for(let n=t;n;n=n.previousElementSibling)r.add(n);return r}function qt(e,r){if(typeof ResizeObserver>"u"||typeof document>"u")return ()=>{};let t=()=>r();nt??(nt=new ResizeObserver(o=>{let s=false;for(let{target:i}of o)dt.get(i)!==Bt(i)&&(s=true),dt.set(i,"");s&&pt.forEach(i=>i());})),pt.add(t);let n=Dr(e);return [document.body,document.documentElement].forEach(o=>o&&n.add(o)),n.forEach(o=>{dt.has(o)||dt.set(o,Bt(o)),ot.set(o,(ot.get(o)??0)+1),nt.observe(o);}),()=>{pt.delete(t)&&(n.forEach(o=>{let s=(ot.get(o)??1)-1;if(s)return void ot.set(o,s);ot.delete(o),nt?.unobserve(o);}),pt.size||(nt?.disconnect(),nt=void 0));}}function De(e,r,t,n,o){let s,i=NaN,c,m,g=()=>{s=0,n(),!c&&!s&&(i=t())>0&&i<1&&(s=requestAnimationFrame(g));},w=()=>{!s&&!c&&t()!==i&&(s=requestAnimationFrame(g));},A=z=>{c=z,cancelAnimationFrame(s),s=i=NaN,w();},S=()=>{clearTimeout(m),o(),w();},G=()=>{clearTimeout(m),m=setTimeout(S,150);},Q=qt(r,G),v=z=>{e[z]("scroll",w,{passive:true}),window[z]("resize",G),window[z]("orientationchange",G);};return v("addEventListener"),w(),{hold:A,remeasure:S,off(){A(true),v("removeEventListener"),Q(),clearTimeout(m);}}}var Nr=0;function _r(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function jt(e,r){let t="";try{t=getComputedStyle(e).getPropertyValue(r).trim();}catch{}return t||(e.getAttribute(r)??"").trim()}var Ut=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Vr(e){if(!Ke)return;let r=jt(e,"stroke");if(!r||r==="none"){$("Element has no stroke \u2014 path will not be visible.",e);return}let t=(e.getAttribute("fill")??"").trim();t&&!Ut.has(t)&&!Ut.has(jt(e,"fill"))&&$("Element has a fill \u2014 it may obscure the stroke animation.",e);}function zr(e,r,t){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function o(){let s=t==="x"?window.scrollX:window.scrollY,i=e-s,c=r-s,m=t==="x";n.innerHTML=`
+      <div style="position:absolute;${m?`left:${i}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${i}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${m?`left:${c}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${c}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",o,{passive:true}),o(),{el:n,destroy(){window.removeEventListener("scroll",o),n.remove();}}}var Yt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Qt=/[MmLlHhVvCcSsQqTtAaZz]/g;function Wr(e,r,t){if(!Ke)return;let n=(e.match(Qt)??[]).join("").toUpperCase(),o=(r.match(Qt)??[]).join("").toUpperCase(),s=(e.match(Yt)??[]).length,i=(r.match(Yt)??[]).length;if(n!==o){$(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${o||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,t);return}s!==i&&$(`morphTo: coordinate count differs (${s} \u2192 ${i}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,t);}function Gr(e,r,t){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),o=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,s=>{let i=parseFloat(s),c=n[o++]??i;return String(+(i+(c-i)*t).toFixed(4))})}function Kt(e,r={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:Be(r,(t,n)=>Br(e,t,n))}function Br(e,r,t){let{preset:n,...o}=r,s=n?{...Vt[n],...o}:o,{selector:i="path, polyline, line, polygon, rect, circle",speed:c=1,fade:m=false,easing:g="linear",trigger:w={},stagger:A=0,direction:S="forward",once:G=false,debug:Q=false,axis:v="y",scrollContainer:z,autoReverse:Z=false,delay:k=0,strokeColor:C,strokeWidth:L,fillOpacity:O,waypoints:h,velocityScale:F=false,threshold:W=0,rootMargin:se="0px",repeat:K=0,repeatDelay:_=0,morphTo:R,clip:T,autoplay:X=false,duration:E=1e3,native:P=true,onProgress:he,onStart:D,onComplete:q,onEnter:ue,onLeave:Ee,onEnterBack:fe,onLeaveBack:ie}=s,x=T===true?"left":typeof T=="string"?T:false,M=Re(g),re=ae(w.start||"top bottom"),Oe=ae(w.end||"bottom top"),J=typeof z=="string"?document.querySelector(z):z??null,Fe=Array.isArray(C)?C[0]:null,Se=Array.isArray(C)?C[1]:typeof C=="string"?C:null,ye=Array.isArray(L)?L[0]:null,_e=Array.isArray(L)?L[1]:typeof L=="number"?L:null,He=Array.isArray(O)?O[0]:null,Te=Array.isArray(O)?O[1]:typeof O=="number"?O:null;function Pe(a){let f=a*100;switch(x){case "right":return `inset(0 0 0 ${100-f}%)`;case "top":return `inset(0 0 ${100-f}% 0)`;case "bottom":return `inset(${100-f}% 0 0 0)`;case "center":return `circle(${a*150}% at 50% 50%)`;default:return `inset(0 ${100-f}% 0 0)`}}let l=x?[]:Array.from(e.querySelectorAll(i)),d=[],ne=[],H=0,V=0,B=A,j=0,Ne=0,oe=false,Ie=false,be=0,Ye=-1,je=[],Ue=-1,me=false,u=0,p=0,b,le=false,we=null;function Ve(){we?.destroy(),we=null;}let Ce=new Set,ze=NaN,We=true,it=-1,xt=performance.now(),Qe=NaN;function at(){return J?v==="x"?J.scrollLeft:J.scrollTop:v==="x"?window.scrollX:window.scrollY}function Mt(){return J?v==="x"?J.clientWidth:J.clientHeight:v==="x"?window.innerWidth:window.innerHeight}function Lt(){let a=lt(e,J,v);return Le(a,a.scroll,Mt(),re,Oe)}function Sr(){let a=V-H,f=l.length-1,y=J??document.documentElement,N=v==="x"?"Width":"Height";if(B=A,A>0&&f>0&&a>0){let pe=y[`scroll${N}`]-y[`client${N}`]-1-H-a/c;pe>=0&&(B=Math.min(A,pe/(f*a)));}let ce=Math.max(0,f)*B*a,xe=a/Math.min(c,1);j=H+Math.min(0,ce,xe,ce+xe),Ne=H+Math.max(0,ce,xe,ce+xe);}function Pt(){(({tStart:H,tEnd:V}=Lt())),Sr(),Q&&Ke&&(Ve(),we=zr(H,V,v));}function yt(a,f=Lt){ke(e,{type:"draw",getProgress:()=>a.getProgress(),getTrigger:f});let y=a.destroy;return a.destroy=()=>{y.call(a),$e(e);},a}function Ct(a,f){return G&&!Z?Math.max(Ye,M(je[a]=Math.max(je[a]??0,f))):M(f)}function Tr(a,f){if(e.style.setProperty("--scroll-draw-progress",String(a)),x){let y=f==="reverse"?1-a:a;e.style.clipPath=Pe(y);return}l.forEach((y,N)=>bt(y,N,a,f));}function bt(a,f,y,N){a.style.strokeDashoffset=N==="reverse"?`${d[f]*y}`:`${d[f]*(1-y)}`,m&&(a.style.opacity=N==="reverse"?`${1-y}`:`${y}`),Fe&&Se?a.style.stroke=ft(Fe,Se,y):Se&&(a.style.stroke=Se),ye!==null&&_e!==null?a.style.strokeWidth=`${ye+(_e-ye)*y}`:_e!==null&&(a.style.strokeWidth=`${_e}`),He!==null&&Te!==null?a.style.fillOpacity=`${He+(Te-He)*y}`:Te!==null&&(a.style.fillOpacity=`${Te}`),R&&a.tagName.toLowerCase()==="path"&&ne[f]&&a.setAttribute("d",Gr(ne[f],R,y));}function wt(){if(e.style.setProperty("--scroll-draw-progress","0"),x){e.style.clipPath=Pe(S==="reverse"?1:0);return}l.forEach((a,f)=>{a.style.strokeDasharray=ut(d[f]),a.style.strokeDashoffset=S==="reverse"?"0":`${d[f]}`,m?a.style.opacity=S==="reverse"?"1":"0":a.style.opacity="",Fe&&(a.style.stroke=Fe),ye!==null&&(a.style.strokeWidth=`${ye}`),He!==null&&(a.style.fillOpacity=`${He}`),R&&a.tagName.toLowerCase()==="path"&&ne[f]&&a.setAttribute("d",ne[f]);});}function Ze(a,f){let y=a.getAttribute("d"),N=ct(a);if(R&&ne[f]){a.setAttribute("d",R);let ce=ct(a);a.setAttribute("d",ne[f]),N=Math.max(ct(a),ce),a.setAttribute("d",y);}d[f]=N,a.style.strokeDasharray=ut(N);}if(l.forEach((a,f)=>{Vr(a);let y=a.tagName.toLowerCase()==="path";y?ne.push(a.getAttribute("d")??""):ne.push(""),Ze(a,f);let N=d[f];R&&(y?Wr(ne[ne.length-1],R,a):$(`morphTo only applies to <path> elements \u2014 ignored on <${a.tagName}>.`,a)),t?(a.style.strokeDashoffset=S==="reverse"?`${N}`:"0",m&&(a.style.opacity="1"),Se&&(a.style.stroke=Se),_e!==null&&(a.style.strokeWidth=`${_e}`),Te!==null&&(a.style.fillOpacity=`${Te}`),R&&a.tagName.toLowerCase()==="path"&&a.setAttribute("d",R)):(a.style.strokeDashoffset=S==="reverse"?"0":`${N}`,m?a.style.opacity=S==="reverse"?"1":"0":a.style.opacity="",Fe&&(a.style.stroke=Fe),ye!==null&&(a.style.strokeWidth=`${ye}`),He!==null&&(a.style.fillOpacity=`${He}`));}),t)return x&&(e.style.clipPath=Pe(1)),q?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};x&&(e.style.clipPath=Pe(S==="reverse"?1:0));let At=typeof g=="string"?mt(g):null;function xr(){return !(P===false||X||Q&&Ke||!_r()||!l.length||!At||x||v!=="y"||J||c!==1||A!==0||G||Z||F!==false||R||h||K||k>0||he||D||q||ue||Ee||fe||ie||C!=null||L!=null||O!=null||(w.start||"top bottom").trim()!=="top bottom"||(w.end||"bottom top").trim()!=="bottom top")}function Mr(){let a=++Nr,f=`svg-scroll-draw-${a}`,y=`svg-scroll-draw-host-${a}`,N=`--svg-scroll-draw-${a}`,ce=S==="reverse"?"0":"var(--ssd-len)",xe=S==="reverse"?"var(--ssd-len)":"0",pe=`stroke-dashoffset:${ce};`,ee=`stroke-dashoffset:${xe};`;m&&(pe+=`opacity:${S==="reverse"?1:0};`,ee+=`opacity:${S==="reverse"?0:1};`);let te=document.createElement("style");te.setAttribute("data-svg-scroll-draw",""),te.textContent=`@keyframes ${f}{from{${pe}}to{${ee}}}.${y}{view-timeline-name:${N};view-timeline-axis:block;}.${f}{animation-name:${f};animation-duration:auto;animation-timing-function:${At};animation-fill-mode:both;animation-timeline:${N};animation-range:cover 0% cover 100%;}`,document.head.appendChild(te),e.classList.add(y);function ve(I,U){I.style.setProperty("--ssd-len",String(d[U])),I.style.strokeDasharray=ut(d[U]),I.style.strokeDashoffset="",I.style.opacity="",I.style.animationPlayState="",I.classList.add(f);}l.forEach(ve);let de=false,Me=-1;function Ae(){if(Me>=0)return Me;let I=e.getBoundingClientRect(),{tStart:U,tEnd:ge}=Le({top:I.top,height:I.height},at(),Mt(),re,Oe);return M(Y(at(),U,ge,c))}return {destroy(){e.classList.remove(y),l.forEach(I=>{I.classList.remove(f),I.style.removeProperty("--ssd-len"),I.style.animationPlayState="";}),te.remove();},replay(){de=false,Me=-1,l.forEach(ve);},pause(){de=true,l.forEach(I=>{I.style.animationPlayState="paused";});},resume(){de&&(de=false,l.forEach(I=>{I.style.animationPlayState="running";}));},seek(I){let U=Math.min(1,Math.max(0,I));Me=U,de=true,l.forEach((ge,Ge)=>{ge.classList.remove(f),ge.style.strokeDashoffset=S==="reverse"?`${d[Ge]*U}`:`${d[Ge]*(1-U)}`,m&&(ge.style.opacity=S==="reverse"?`${1-U}`:`${U}`);});},getProgress(){return Ae()},refresh(){l.forEach((I,U)=>{Ze(I,U),I.style.setProperty("--ssd-len",String(d[U]));});}}}if(xr())return yt(Mr());function Lr(){let a=Math.max(1,E),f=x?a:a*(1+Math.max(0,l.length-1)*A),y=0,N=0,ce=false;function xe(Me){let Ae=true,I=Math.min(1,Math.max(0,Me/f));if(x){let U=Math.min(1,Math.max(0,Me/a)),ge=M(U);u=ge,e.style.setProperty("--scroll-draw-progress",String(ge)),e.style.clipPath=Pe(S==="reverse"?1-ge:ge),he?.(ge),U<1&&(Ae=false);}else {l.forEach((ge,Ge)=>{let Cr=Ge*A*a,Ht=Math.min(1,Math.max(0,(Me-Cr)/a));bt(ge,Ge,M(Ht),S),Ht<1&&(Ae=false);});let U=M(I);u=U,he?.(U),e.style.setProperty("--scroll-draw-progress",String(U));}if(h){let U=M(I);for(let ge in h){let Ge=parseFloat(ge);U>=Ge&&!Ce.has(Ge)&&(Ce.add(Ge),h[ge]?.());}}return Ae}function pe(Me){if(me)return;let Ae=Me-y;Ie||(Ie=true,D?.());let I=xe(Ae);if(I&&!oe){oe=true,xe(f),q?.(),p<(K==="infinite"?1/0:K??0)&&(p++,b=setTimeout(()=>{y=performance.now(),Ie=false,oe=false,Ce.clear(),wt(),be=requestAnimationFrame(pe);},_));return}I||(be=requestAnimationFrame(pe));}function ee(){cancelAnimationFrame(be),clearTimeout(b),y=performance.now(),N=0,me=false,Ie=false,oe=false,p=0,ce=true,u=0,Ce.clear(),wt(),be=requestAnimationFrame(pe);}let te=new IntersectionObserver(Me=>{Me.forEach(Ae=>{Ae.isIntersecting&&!(G&&oe)?ee():!Ae.isIntersecting&&!G&&!oe&&(cancelAnimationFrame(be),clearTimeout(b),ce=false);});},{root:J??null,threshold:W,rootMargin:se}),ve;function de(){clearTimeout(ve),ve=setTimeout(()=>l.forEach(Ze),150);}return window.addEventListener("resize",de),window.addEventListener("orientationchange",de),k>0?setTimeout(()=>te.observe(e),k):te.observe(e),{destroy(){cancelAnimationFrame(be),clearTimeout(b),te.disconnect(),window.removeEventListener("resize",de),window.removeEventListener("orientationchange",de),clearTimeout(ve);},replay(){p=0,ee();},pause(){me||!ce||(me=true,N=performance.now()-y,cancelAnimationFrame(be));},resume(){me&&(me=false,ce=true,y=performance.now()-N,be=requestAnimationFrame(pe));},seek(Me){let Ae=Math.min(1,Math.max(0,Me));u=Ae,me=true,N=Ae*f,y=performance.now()-N,cancelAnimationFrame(be),xe(N);},getProgress(){return u},refresh(){clearTimeout(ve),l.forEach(Ze);}}}if(X)return yt(Lr());Pt();let kt=()=>Y(at(),j,Ne,1);function $t(){oe=true,q?.(),p<(K==="infinite"?1/0:K)&&(p++,b=setTimeout(()=>{le=true;},_));}function Ot(){Ye=-1,je=[],Ie=false,oe=false,le=false,Ce.clear(),wt(),We=true;}function Pr(){let a=performance.now(),f=at();if(le&&kt()%1&&Ot(),!We&&F===false&&f===ze)return;We=false,ze=f;let y=c;if(F!==false){let ee=a-xt,te=ee>0?Math.abs(f-(it<0?f:it))/ee:0;y=c*Math.max(.2,1+te*(typeof F=="number"?F:1)*.04);}it=f,xt=a;let N=Z?Ue===-1||f>=Ue?"forward":"reverse":S;Ue=f;let ce=V-H,xe=true,pe=ce===0?0:(f-H)/ce;if(isNaN(Qe)||(Qe<=0&&pe>0&&ue?.(),Qe<1&&pe>=1&&Ee?.(),Qe>=1&&pe<1&&fe?.(),Qe>0&&pe<=0&&ie?.()),Qe=pe,x){let ee=Ct(0,Y(f,H,V,y));u=ee,e.style.setProperty("--scroll-draw-progress",String(ee));let te=N==="reverse"?1-ee:ee;e.style.clipPath=Pe(te),he?.(ee),!Ie&&Y(f,H,V,y)>0&&(Ie=true,D?.()),ee>=1&&!oe?$t():ee<1&&!G&&(oe=false);return}if(l.forEach((ee,te)=>{let ve=te*B*ce,de=Ct(te,Y(f,H+ve,V+ve,y));bt(ee,te,de,N),te===0&&(u=de,he?.(de),e.style.setProperty("--scroll-draw-progress",String(de))),de<1&&(xe=false);}),h){let ee=M(Y(f,H,V,y));for(let te in h){let ve=parseFloat(te);ee>=ve&&!Ce.has(ve)&&(Ce.add(ve),h[te]?.());}}!Ie&&Y(f,H,V,y)>0&&(Ie=true,D?.()),xe&&!oe?$t():!xe&&!G&&(oe=false);}let et=De(J??window,[e],kt,Pr,()=>{let a=d.join();l.forEach(Ze),Pt(),We=true,d.join()!==a&&tt();}),vt=k>0;function tt(){et.hold(me||vt);}let Ft;return vt&&(Ft=setTimeout(()=>{vt=false,tt();},k)),tt(),yt({destroy(){clearTimeout(b),clearTimeout(Ft),et.off(),Ve();},replay(){Ot(),Ue=-1,it=-1,p=0,me=false,u=0,clearTimeout(b),tt();},pause(){me=true,et.hold(true);},resume(){me&&(me=false,We=true,tt());},seek(a){let f=Math.min(1,Math.max(0,a));u=f,Ye=f,je=[],me=true,et.hold(true),Tr(f,S),We=true;},getProgress(){return u},refresh:et.remeasure},()=>({tStart:H,tEnd:V}))}var Xt=new WeakMap,qr=0;function st(e){return JSON.stringify(e,(r,t)=>{if(typeof t=="function")return "\u0192";if(typeof Element<"u"&&t instanceof Element){let n=Xt.get(t);return n===void 0&&Xt.set(t,n=++qr),`el#${n}`}return t})}function Jt(e,r){let t={...e};for(let n of Object.keys(t))typeof t[n]=="function"&&(t[n]=(...o)=>r()[n]?.(...o));return t}function jr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Zt(e){let r=[],t=/([\w]+)\(([^)]*)\)/g,n;for(;(n=t.exec(e))!==null;){let o=[],s=[],i=n[2].trim();if(i)for(let c of i.split(/[\s,]+/)){let m=c.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(m?parseFloat(m[1]):0),s.push(m?m[2]:"");}r.push({fn:n[1],nums:o,units:s});}return r}function Ur(e,r,t){let n=Zt(e),o=Zt(r);return n.length===0||n.length!==o.length?t<1?e:r:n.map((s,i)=>{let c=o[i];return s.fn!==c.fn||s.nums.length!==c.nums.length?t<1?`${s.fn}(${s.nums.map((m,g)=>`${m}${s.units[g]}`).join(", ")})`:`${c.fn}(${c.nums.map((m,g)=>`${m}${c.units[g]}`).join(", ")})`:`${s.fn}(${s.nums.map((m,g)=>`${m+(c.nums[g]-m)*t}${s.units[g]}`).join(", ")})`}).join(" ")}function er(e,r,t){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*t);let n=String(e),o=String(r);if(jr(n))return ft(n,o,t);if(n.includes("("))return Ur(n,o,t);let s=n.match(/^([-+]?[\d.]+)(.*)$/),i=o.match(/^([-+]?[\d.]+)(.*)$/);if(s&&i){let c=parseFloat(s[1]),m=parseFloat(i[1]);return `${c+(m-c)*t}${s[2]||i[2]}`}return t<1?n:o}function Yr(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var Qr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Kr=0,tr="--scroll-draw-progress";function Xr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var nr={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function or(e,r){return typeof window>"u"?nr:r.respectReducedMotion===false?rr(e,r,false):Be(r,(t,n)=>rr(e,t,n))}function rr(e,r,t){let{props:n,trigger:o={},easing:s="ease-out",speed:i=1,once:c=false,axis:m="y",scrollContainer:g,native:w=true,velocityScale:A=false,triggerElement:S,onProgress:G,onComplete:Q,onEnter:v,onLeave:z,onEnterBack:Z,onLeaveBack:k}=r,C=Re(s,"ease-out"),L=ae(o.start||"top bottom"),O=ae(o.end||"bottom top"),h=S??e,F=typeof g=="string"?document.querySelector(g):g??null,W=Object.entries(n).map(([l,d])=>({prop:Yr(l),from:Array.isArray(d)?d[0]:"",to:Array.isArray(d)?d[1]:d}));function se(){let l=window.getComputedStyle(e);for(let d of W)d.from===""&&(d.from=l.getPropertyValue(d.prop).trim()||"0");}function K(){for(let l of W)e.style.setProperty(l.prop,String(l.to));}let _=new Map;for(let l of [...W.map(d=>d.prop),tr])_.set(l,e.style.getPropertyValue(l));function R(){for(let[l,d]of _)d?e.style.setProperty(l,d):e.style.removeProperty(l);}if(t)return K(),Q?.(),{...nr,destroy:R,getProgress:()=>1};se();let T=()=>F?m==="x"?F.scrollLeft:F.scrollTop:m==="x"?window.scrollX:window.scrollY,X=()=>F?m==="x"?F.clientWidth:F.clientHeight:m==="x"?window.innerWidth:window.innerHeight,E=typeof s=="string"?mt(s):null;function P(){if(!w||!Xr()||!E||m!=="y"||F||h!==e||c||i!==1||G||Q||v||z||Z||k||A!==false||(o.start||"top bottom").trim()!=="top bottom"||(o.end||"bottom top").trim()!=="bottom top")return  false;for(let l of W)if(!Qr.has(l.prop))return  false;return  true}function he(){let l=`ssd-a-${++Kr}`,d=W.map(j=>`${j.prop}:${j.from}`).join(";"),ne=W.map(j=>`${j.prop}:${j.to}`).join(";"),H=document.createElement("style");H.setAttribute("data-ssd-animate",""),H.textContent=`@keyframes ${l}{from{${d}}to{${ne}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${E};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(H),e.classList.add(l);let V=()=>{let j=e.getBoundingClientRect();return Le({top:j.top,height:j.height},T(),X(),L,O)};ke(e,{type:"animate",getProgress:()=>B.getProgress(),getTrigger:V});let B={refresh(){},destroy(){e.classList.remove(l),H.remove(),e.style.animationPlayState="",R(),$e(e);},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(j){let Ne=Math.min(1,Math.max(0,j));e.classList.remove(l);for(let oe of W)e.style.setProperty(oe.prop,er(oe.from,oe.to,Ne));},getProgress(){let{tStart:j,tEnd:Ne}=V();return C(Y(T(),j,Ne,i))}};return B}if(P())return he();let D=0,q=0,ue=false,Ee=-1,fe=0,ie=0,x=false,M=NaN,re=-1,Oe=0,J=h===e?W:[],Fe=false;function Se(){let l=e.style,d=J.map(B=>l.getPropertyValue(B.prop)),ne=l.transition;J.length&&(l.transition="none"),J.forEach(B=>l.setProperty(B.prop,_.get(B.prop)??""));let H=lt(h,F,m);J.forEach((B,j)=>l.setProperty(B.prop,d[j])),J.length&&(e.offsetWidth,l.transition=ne);let V=Le(H,H.scroll,X(),L,O);Fe&&Math.abs(V.tStart-D)<1&&Math.abs(V.tEnd-q)<1||(Fe=true,D=V.tStart,q=V.tEnd);}function ye(l){e.style.setProperty(tr,String(l));for(let d of W)e.style.setProperty(d.prop,er(d.from,d.to,l));G?.(l);}function _e(l){if(isNaN(M)){M=l;return}M<=0&&l>0&&v?.(),M<1&&l>=1&&z?.(),M>=1&&l<1&&Z?.(),M>0&&l<=0&&k?.(),M=l;}function He(){if(ue)return;let l=performance.now(),d=T(),ne=i;if(A!==false){let j=l-Oe,Ne=j>0?Math.abs(d-(re<0?d:re))/j:0;ne=i*Math.max(.2,1+Ne*(typeof A=="number"?A:1)*.04);}re=d,Oe=l;let H=q===D?0:(d-D)/(q-D);_e(H);let V=Y(d,D,q,ne),B=c?Math.max(Ee,C(fe=Math.max(fe,V))):C(V);ie=B,ye(B),B>=1&&!x?(x=true,Q?.()):B<1&&!c&&(x=false);}let Te=De(F??window,[h],()=>Y(T(),D,q,Math.min(i,1)),He,Se);Se(),q===D&&$("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.",e),fe=Y(T(),D,q,i),ie=C(fe),ye(ie),ke(e,{type:"animate",getProgress:()=>ie,getTrigger:()=>({tStart:D,tEnd:q})});function Pe(){ue=true,Te.hold(true);}return {destroy(){ue=true,Te.off(),R(),$e(e);},replay(){Ee=-1,fe=0,x=false,ie=0,ue=false,ye(0),Te.hold(false);},pause:Pe,resume(){ue&&(ue=false,Te.hold(false));},seek(l){let d=Math.min(1,Math.max(0,l));ie=d,Ee=d,fe=0,Pe(),ye(d);},getProgress(){return ie},refresh:Te.remeasure}}var St={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function sr(e,r){if(typeof window>"u")return St;let t=typeof e=="string"?document.querySelector(e):e;return t?Be(r,(n,o)=>Jr(t,n,o)):($("scrollCounter: element not found:",e),St)}function Jr(e,r,t){let{from:n=0,to:o,format:s,easing:i="ease-out",trigger:c={},once:m=true,decimals:g,onComplete:w}=r,A=g!==void 0?E=>E.toFixed(g):s??(E=>String(Math.round(E))),S=Re(i,"ease-out"),G=ae(c.start||"top 80%"),Q=ae(c.end||"top 20%");if(t)return e.textContent=A(o),w?.(),{...St,getProgress:()=>1};let v=0,z=0,Z=false,k=-1,C=0,L=0,O=false,h=()=>window.scrollY,F=()=>window.innerHeight;function W(){let E=e.getBoundingClientRect(),P=Le({top:E.top,height:E.height},h(),F(),G,Q);Z&&Math.abs(P.tStart-v)<1&&Math.abs(P.tEnd-z)<1||(Z=true,v=P.tStart,z=P.tEnd);}let se=e.style.getPropertyValue("--scroll-draw-progress");function K(E){e.textContent=A(n+(o-n)*E),e.style.setProperty("--scroll-draw-progress",String(E));}let _=()=>Y(h(),v,z,1);function R(){let E=_(),P=m?Math.max(k,S(C=Math.max(C,E))):S(E);L=P,K(P),P>=1&&!O?(O=true,w?.()):P<1&&!m&&(O=false);}W();{C=Y(h(),v,z,1);let E=S(C);L=E,K(E);}let T=De(window,[e],_,R,W);ke(e,{type:"counter",getProgress:()=>L,getTrigger:()=>({tStart:v,tEnd:z})});let X=()=>T.hold(false);return {destroy(){T.off(),e.style.setProperty("--scroll-draw-progress",se),$e(e);},replay(){k=-1,C=0,O=false,L=0,K(0),X();},pause:()=>T.hold(true),resume:X,seek(E){let P=Math.min(1,Math.max(0,E));L=P,k=P,C=0,T.hold(true),K(P);},getProgress(){return L}}}var ir={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ar(e,r={}){if(typeof window>"u")return ir;let t=typeof e=="string"?document.querySelector(e):e;if(!t||t.tagName.toLowerCase()!=="video")return $("scrollVideo: <video> element not found:",e),ir;let n=t,{trigger:o={},easing:s="linear",once:i=false,axis:c="y",preload:m="auto",triggerElement:g,onReady:w,onComplete:A,onProgress:S}=r,G=g??n,Q=window.matchMedia("(prefers-reduced-motion: reduce)").matches,v=Re(s),z=ae(o.start||"top top"),Z=ae(o.end||"bottom top");n.pause(),n.hasAttribute("preload")||(n.preload=m);let k=r.from??0,C=r.to,L=0,O=0,h=false,F=-1,W=0,se=0,K=false,_=false,R=()=>c==="x"?window.scrollX:window.scrollY,T=()=>c==="x"?window.innerWidth:window.innerHeight;function X(){let x=G.getBoundingClientRect(),M=c==="x"?x.left:x.top,re=c==="x"?x.width:x.height,Oe=Le({top:M,height:re},R(),T(),z,Z);L=Oe.tStart,O=Oe.tEnd,_&&O===L&&$("scrollVideo: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",n);}let E=NaN;function P(x){if(!_)return;let M=C??n.duration??0,re=k+(M-k)*x;re!==E&&(E=re,n.currentTime=re),n.style.setProperty("--scroll-draw-progress",String(x)),S?.(x);}let he=()=>Y(R(),L,O,1);function D(){if(!_||Q)return;let x=he(),M=i?Math.max(F,v(W=Math.max(W,x))):v(x);se=M,P(M),M>=1&&!K?(K=true,A?.()):M<1&&!i&&(K=false);}let q=De(window,[G],he,D,X),ue=()=>q.hold(h||!_||Q);ue();function Ee(){if(_=true,C===void 0&&(C=n.duration),Q){P(1),w?.();return}X(),w?.(),h?P(se):ue();}n.readyState>=1?Ee():n.addEventListener("loadedmetadata",Ee,{once:true}),_||X();let fe=Q?()=>{}:Je(x=>{x&&(fe(),Q=true,q.hold(true),P(1));});ke(n,{type:"video",getProgress:()=>se,getTrigger:()=>({tStart:L,tEnd:O})});function ie(){h&&(h=false,ue());}return {destroy(){q.off(),n.removeEventListener("loadedmetadata",Ee),fe(),$e(n);},replay(){F=-1,W=0,K=false,se=0,E=NaN,P(0),ie();},pause(){h=true,q.hold(true);},resume:ie,seek(x){let M=Math.min(1,Math.max(0,x));se=M,F=M,W=0,h=true,q.hold(true),E=NaN,P(M);},getProgress(){return se}}}var Zr=1e4;function lr(e){let{frames:r,count:t}=e;if(typeof r!="function")return st(e);let n=Number.isFinite(t)?Math.min(Math.max(Math.floor(t),0),Zr):0,o;try{o=Array.from({length:n},(s,i)=>r(i));}catch{o=["throws"];}return st({...e,frames:o})}function cr(e,r="<ScrollFrames>"){if(!e||e.getAttribute("aria-hidden")==="true")return;let t=e.getAttribute("role");t==="presentation"||t==="none"||e.getAttribute("aria-label")||e.getAttribute("aria-labelledby")||$(`${r}: the canvas has no aria-label. Say what the frames show, or set aria-hidden="true" if they are decoration.`,e);}var gt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function en(e){let r=e>1?[0,e-1]:[0],t=[[0,e-1]];for(let n=0;n<t.length;n++){let[o,s]=t[n];if(s-o<2)continue;let i=o+s>>1;r.push(i),t.push([o,i],[i,s]);}return r}function ur(e,r){if(typeof window>"u")return gt;let t=typeof e=="string"?document.querySelector(e):e;if(!t||t.tagName.toLowerCase()!=="canvas")return $("scrollFrames: <canvas> element not found:",e),gt;let n=t,{frames:o,trigger:s={},easing:i="linear",once:c=false,axis:m="y",fit:g="cover",triggerElement:w,onReady:A,onLoad:S,onComplete:G,onProgress:Q}=r||{},v=Array.isArray(o)?o:null,z=r?.count,Z=Math.floor(v?Math.min(z??v.length,v.length):z??NaN);if(!(v||typeof o=="function")||!Number.isFinite(Z)||Z<1)return $("scrollFrames: no frames. Pass `frames` as an array of URLs, or a function with a finite `count` of 1 or more.",n),gt;let k=r.concurrency??6;(!Number.isFinite(k)||k<1)&&($("scrollFrames: `concurrency` must be a finite number of 1 or more; using 6.",r.concurrency),k=6),k=Math.floor(k);let C=n.getContext("2d");if(!C)return $("scrollFrames: the canvas has no 2D context.",n),gt;let L=Z-1,O=w??n,h=window.matchMedia("(prefers-reduced-motion: reduce)").matches,F=Re(i),W=u=>{let p=F(u);return p===p?p:0},se=ae(s.start||"top top"),K=ae(s.end||"bottom top"),_=0,R=0,T=false,X=-1,E=0,P=0,he=false,D=false,q=false,ue=false,Ee=0,fe=-1,ie=new Array(Z),x=new Uint8Array(Z),M=new Set,re=h?[L]:en(Z),Oe=0,J=0,Fe=false,Se=(u,...p)=>{if(u)try{u(...p);}catch(b){typeof reportError=="function"?reportError(b):setTimeout(()=>{throw b});}},ye=false,_e=u=>{let p;try{p=v?v[u]:o(u);}catch(b){p=b;}return typeof p=="string"&&p?p:(ye||(ye=true,$(`scrollFrames: no URL for frame ${u}; it is skipped for its nearest neighbour.`,p)),null)},He=()=>m==="x"?window.scrollX:window.scrollY,Te=()=>m==="x"?window.innerWidth:window.innerHeight;function Pe(){!Fe&&J===re.length&&(Fe=true,Se(S));}function l(){for(;!D&&M.size<k&&Oe<re.length;){let u=re[Oe++];x[u]||d(u);}}function d(u){x[u]=1;let p=_e(u);if(p===null){J++,queueMicrotask(()=>{D||Pe();});return}let b=new Image,le=false,we=Ve=>{le||D||(le=true,b.onload=b.onerror=null,M.delete(b),Ve?ie[u]=b:$("scrollFrames: a frame failed to load; its nearest neighbour shows instead:",p),J++,l(),V(),Pe());};M.add(b),b.decoding="async",b.onerror=()=>we(false),b.src=p,typeof b.decode=="function"?b.decode().then(()=>we(true),()=>{b.complete?we(b.naturalWidth>0):b.onload=()=>we(true);}):b.onload=()=>we(true);}function ne(u){for(let p=0;p<=L;p++){if(ie[u-p])return u-p;if(ie[u+p])return u+p}return  -1}function H(){let u=n.clientWidth,p=n.clientHeight;if(!u||!p)return;let b=Math.min(window.devicePixelRatio||1,2),le=Math.round(u*b),we=Math.round(p*b);if(Math.abs(n.width-le)<=1&&Math.abs(n.height-we)<=1)return;n.width=le,n.height=we,fe=-1;let Ve=n.clientWidth,Ce=n.clientHeight;if(Ve!==u||Ce!==p){let ze=n.style;Ve!==u&&Ce!==p?(ze.width=`${u}px`,ze.height=`${p}px`):ze.aspectRatio=`${u} / ${p}`;}}function V(){let u=ne(Ee);if(u<0||u===fe)return;let p=ie[u],b=n.width,le=n.height,we=p.naturalWidth||b,Ve=p.naturalHeight||le,Ce=(g==="contain"?Math.min:Math.max)(b/we,le/Ve),ze=we*Ce,We=Ve*Ce;C.clearRect(0,0,b,le),C.drawImage(p,(b-ze)/2,(le-We)/2,ze,We),fe=u,q||(q=true,Se(A));}function B(u){Ee=Math.min(L,Math.max(0,Math.round(u*L))),n.style.setProperty("--scroll-draw-progress",String(u)),V(),Se(Q,u,Ee);}function j(){let u=O.getBoundingClientRect(),p=m==="x"?u.left:u.top,b=m==="x"?u.width:u.height,le=Le({top:p,height:b},He(),Te(),se,K);_=le.tStart,R=le.tEnd,R===_&&b>0&&!h&&!ue&&(ue=true,$("scrollFrames: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",n));}let Ne=()=>Y(He(),_,R,1);function oe(){if(h)return;let u=Ne(),p=c?Math.max(X,W(E=Math.max(E,u))):W(u);P=p,B(p),p>=1&&!he?(he=true,Se(G)):p<1&&!c&&(he=false);}function Ie(){P=1,B(1);}H(),h||j();let be=De(window,[O],Ne,oe,()=>{H(),h||j(),V();}),Ye=()=>be.hold(T||h);Ye(),h&&Ie(),l();let je=typeof ResizeObserver=="function"?new ResizeObserver(()=>{H(),V();}):null;je?.observe(n);let Ue=h?()=>{}:Je(u=>{u&&(Ue(),h=true,be.hold(true),re=re.slice(0,Oe),x[L]||re.push(L),Pe(),Ie(),l());});ke(n,{type:"frames",getProgress:()=>P,getTrigger:()=>({tStart:_,tEnd:R})});function me(){D||!T||(T=false,Ye());}return {destroy(){if(!D){D=true,be.off(),je?.disconnect(),Ue();for(let u of M)u.onload=u.onerror=null,u.src="";M.clear(),$e(n);}},replay(){D||(X=-1,E=0,he=false,P=0,B(0),me());},pause(){D||(T=true,be.hold(true));},resume:me,seek(u){if(D)return;let p=Math.min(1,Math.max(0,u===u?u:0));P=p,X=p,E=0,T=true,be.hold(true),B(p);},getProgress(){return P}}}function fr(e,{triggerElement:r,...t},n){let o=r;return typeof r=="string"&&typeof document<"u"&&(o=document.querySelector(r),o||$(`scrollFrames: triggerElement "${r}" matches nothing; measuring the canvas.`)),ur(e,{...t,frames:n.frames,triggerElement:o??void 0})}function mr(e,r){let t=document.createElement("span");t.textContent=r,t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none",e.appendChild(t);}function ht(e=""){let r=document.createElement("span");return r.setAttribute("aria-hidden","true"),r.textContent=e,r}function dr(e){let r=e.textContent??"";return e.textContent="",r.split(/(\s+)/).filter(Boolean).map(t=>{let n=e.appendChild(ht(t)),o=/^\s+$/.test(t);return o?n.style.whiteSpace="pre":n.style.display="inline-block",o?null:n}).filter(t=>t!==null)}function tn(e){let r=e.textContent??"";e.textContent="";let t=[],n=null;for(let o of r){let s=ht(o),i=o===" ";i?s.style.whiteSpace="pre":(s.style.display="inline-block",t.push(s)),i||o>"\u0DFF"?n=null:n||(n=e.appendChild(ht()),n.style.cssText="display:inline-block;white-space:nowrap"),(n??e).appendChild(s);}return t}function pr(e){let r=dr(e),t=new Map;for(let s of r){let i=s.offsetTop;t.has(i)||t.set(i,[]),t.get(i).push(s);}let n=[],o=Array.from(t.keys()).sort((s,i)=>s-i);for(let s of o){let i=t.get(s),c=ht();c.style.display="inline-block",i.forEach((m,g)=>{let w=m.nextElementSibling;c.appendChild(m),g<i.length-1&&w&&w.style.whiteSpace==="pre"&&c.appendChild(w);}),n.push(c);}return e.textContent="",n.forEach((s,i)=>{e.appendChild(s),i<n.length-1&&e.appendChild(document.createTextNode(" "));}),n}function rn(e,r,t,n){if(t<=1||n===0)return e;n=Math.min(n,1/t);let o=(t-1)*n,s=r*n,i=s+(1-o);return i<=s?e>=s?1:0:rt((e-s)/(i-s),0,1)}function nn(e,r){let t=[];if(r?.y!==void 0&&t.push(`translateY(${r.y*(1-e)}px)`),r?.x!==void 0&&t.push(`translateX(${r.x*(1-e)}px)`),r?.rotate!==void 0&&t.push(`rotate(${r.rotate*(1-e)}deg)`),r?.scale!==void 0){let n=r.scale+(1-r.scale)*e;t.push(`scale(${n})`);}return t.join(" ")}var Tt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function gr(e,r={}){if(typeof window>"u")return Tt;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return $("scrollText: element not found:",e),Tt;let n=t;return Be(r,(o,s)=>on(n,o,s))}function on(e,r,t){let{split:n="words",stagger:o=.04,easing:s="ease-out",from:i={opacity:0,y:24},trigger:c={},once:m=true,onComplete:g}=r,w=Re(s,"ease-out"),A=ae(c.start||"top 85%"),S=ae(c.end||"top 40%"),G=e.innerHTML,Q=e.textContent??"",v;n==="chars"?v=tn(e):n==="lines"?v=pr(e):v=dr(e),mr(e,Q);let z=v.length;function Z(T,X){i?.opacity!==void 0&&(T.style.opacity=String(i.opacity+(1-i.opacity)*X));let E=nn(X,i);E&&(T.style.transform=E);}function k(T){e.style.setProperty("--scroll-draw-progress",String(T)),v.forEach((X,E)=>{let P=w(rn(T,E,z,o));Z(X,P);});}if(t)return k(1),g?.(),{...Tt,destroy:()=>{e.innerHTML=G;},getProgress:()=>1};k(0);let C=0,L=0,O=-1,h=0,F=false;function W(){({tStart:C,tEnd:L}=Le(e.getBoundingClientRect(),window.scrollY,window.innerHeight,A,S));}let se=()=>Y(window.scrollY,C,L,1);function K(){let T=m?O=Math.max(O,se()):se();h=T,k(T),T>=1&&!F?(F=true,g?.()):T<1&&!m&&(F=false);}W();let _=De(window,[e],se,K,()=>{n==="lines"&&(e.innerHTML=G,v=pr(e),mr(e,Q),k(h)),W();});ke(e,{type:"text",getProgress:()=>h,getTrigger:()=>({tStart:C,tEnd:L})});let R=()=>_.hold(false);return {destroy(){_.off(),e.innerHTML=G,$e(e);},replay(){O=-1,F=false,h=0,k(0),R();},pause:()=>_.hold(true),resume:R,seek(T){_.hold(true),k(h=O=rt(T,0,1));},getProgress(){return h}}}var qe=class{constructor(r,t=st){this.create=r;this.keyOf=t;this.instance=null;this.el=null;this.key="";}init(r,t){return this.destroy(),this.el=r,this.latest=t,this.key=this.keyOf(t),this.instance=this.create(r,Jt(t,()=>this.latest),t),this}update(r){return this.el?this.keyOf(r)!==this.key?this.init(this.el,r):(this.latest=r,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},hr=class extends qe{constructor(){super(Kt);}init(r,t={}){return super.init(r,t)}},yr=class extends qe{constructor(){super(or);}},br=class extends qe{constructor(){super(sr);}},wr=class extends qe{constructor(){super(ar);}init(r,t={}){return super.init(r,t)}},vr=class extends qe{constructor(){super(fr,lr);this.named=null;}init(t,n){return this.named!==t&&cr(t,"ScrollFramesRef"),this.named=t,super.init(t,n)}},Er=class extends qe{constructor(){super(gr);}init(r,t={}){return super.init(r,t)}};exports.EngineRef=qe;exports.ScrollAnimateRef=yr;exports.ScrollCounterRef=br;exports.ScrollDrawRef=hr;exports.ScrollFramesRef=vr;exports.ScrollTextRef=Er;exports.ScrollVideoRef=wr;

package/dist/angular/index.d.mts

@@ -1,7 +1,9 @@
-import { S as ScrollDrawInstance, a as ScrollDrawOptions } from '../types-9bcJdVcg.mjs';
-import { S as ScrollAnimateOptions } from '../engine-BLWKCfxC.mjs';
-import { S as ScrollCounterOptions } from '../index-DVjblK_4.mjs';
+import { F as FramesInput } from '../wrapper-BOHrDnBO.mjs';
+import { S as ScrollDrawInstance, a as ScrollDrawOptions } from '../types-iITMwrru.mjs';
+import { S as ScrollAnimateOptions } from '../engine-Bi2x8-X-.mjs';
+import { S as ScrollCounterOptions } from '../index-BMMZ8aW7.mjs';
 import { ScrollVideoOptions } from '../video/index.mjs';
+export { ScrollFramesOptions } from '../frames/index.mjs';
 import { ScrollTextOptions } from '../text/index.mjs';
 
 /**
@@ -9,15 +11,21 @@ import { ScrollTextOptions } from '../text/index.mjs';
  * `ngOnChanges`: it rebuilds the engine when an option really changed and does
  * nothing for an equal object, so binding it to every change is safe. Callbacks
  * are read live, so a new function alone never rebuilds. Exported for typing;
- * use the five Ref classes below.
+ * use the six Ref classes below.
  */
 declare class EngineRef<E extends Element, O extends object> {
     private readonly create;
+    private readonly keyOf;
     private instance;
     private el;
     private key;
     private latest;
-    constructor(create: (el: E, options: O) => ScrollDrawInstance);
+    /**
+     * `keyOf` is the options' fingerprint: optionsKey, or the one scrollFrames
+     * passes, which reads a `frames` function by the URLs it gives. `create`
+     * gets the options with live callbacks, and as they were passed.
+     */
+    constructor(create: (el: E, options: O, raw: O) => ScrollDrawInstance, keyOf?: (options: O) => string);
     init(element: E, options: O): this;
     /** Call from `ngOnChanges` with the current options. A no-op before `init()`. */
     update(options: O): this;
@@ -124,6 +132,52 @@ declare class ScrollVideoRef extends EngineRef<HTMLVideoElement, ScrollVideoOpti
     constructor();
     init(element: HTMLVideoElement, options?: ScrollVideoOptions): this;
 }
+/**
+ * Scrub an image sequence on a <canvas> with the scroll (scrollFrames) —
+ * Angular class-based API. The canvas is in your template, so give it
+ * role="img" and an aria-label saying what the frames show; in development
+ * `init()` warns when it has no name (unless it is aria-hidden="true" or
+ * role="presentation").
+ *
+ * `update()` from ngOnChanges starts a new film only when the URLs (a `frames`
+ * function is read by the URLs it gives for `count`) or another option
+ * changed; callbacks are read live. `triggerElement` takes an element or a
+ * selector, found when the film starts.
+ *
+ * @example
+ * @Component({
+ *   template: `
+ *     <section #track style="height: 400vh">
+ *       <div style="position: sticky; top: 0; height: 100vh">
+ *         <canvas #film role="img" aria-label="The headphones turning"></canvas>
+ *       </div>
+ *     </section>`,
+ * })
+ * export class FilmComponent implements AfterViewInit, OnChanges, OnDestroy {
+ *   @ViewChild('film') filmRef!: ElementRef<HTMLCanvasElement>;
+ *   @ViewChild('track') trackRef!: ElementRef<HTMLElement>;
+ *   @Input() count = 120;
+ *   private film = new ScrollFramesRef();
+ *
+ *   ngAfterViewInit() { this.film.init(this.filmRef.nativeElement, this.options()); }
+ *   ngOnChanges() { this.film.update(this.options()); }
+ *   ngOnDestroy() { this.film.destroy(); }
+ *
+ *   private options() {
+ *     return {
+ *       frames: (i: number) => `/film/${i + 1}.jpg`, count: this.count,
+ *       triggerElement: this.trackRef?.nativeElement,
+ *       trigger: { start: 'top top', end: 'bottom bottom' },
+ *     };
+ *   }
+ * }
+ */
+declare class ScrollFramesRef extends EngineRef<HTMLCanvasElement, FramesInput> {
+    /** The canvas whose label was checked: once per canvas, not per new film. */
+    private named;
+    constructor();
+    init(element: HTMLCanvasElement, options: FramesInput): this;
+}
 /**
  * Split text and stagger-animate each piece on scroll — Angular class-based API.
  *
@@ -150,4 +204,4 @@ declare class ScrollTextRef extends EngineRef<HTMLElement, ScrollTextOptions> {
     init(element: HTMLElement, options?: ScrollTextOptions): this;
 }
 
-export { EngineRef, ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawInstance, ScrollDrawOptions, ScrollDrawRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };
+export { EngineRef, ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawInstance, ScrollDrawOptions, ScrollDrawRef, ScrollFramesRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };

package/dist/angular/index.d.ts

@@ -1,7 +1,9 @@
-import { S as ScrollDrawInstance, a as ScrollDrawOptions } from '../types-9bcJdVcg.js';
-import { S as ScrollAnimateOptions } from '../engine-6VsjEwzb.js';
-import { S as ScrollCounterOptions } from '../index-BN8yKeQ3.js';
+import { F as FramesInput } from '../wrapper-Cm7JTIVl.js';
+import { S as ScrollDrawInstance, a as ScrollDrawOptions } from '../types-iITMwrru.js';
+import { S as ScrollAnimateOptions } from '../engine-DAlvk6i0.js';
+import { S as ScrollCounterOptions } from '../index-MdQ4ti_z.js';
 import { ScrollVideoOptions } from '../video/index.js';
+export { ScrollFramesOptions } from '../frames/index.js';
 import { ScrollTextOptions } from '../text/index.js';
 
 /**
@@ -9,15 +11,21 @@ import { ScrollTextOptions } from '../text/index.js';
  * `ngOnChanges`: it rebuilds the engine when an option really changed and does
  * nothing for an equal object, so binding it to every change is safe. Callbacks
  * are read live, so a new function alone never rebuilds. Exported for typing;
- * use the five Ref classes below.
+ * use the six Ref classes below.
  */
 declare class EngineRef<E extends Element, O extends object> {
     private readonly create;
+    private readonly keyOf;
     private instance;
     private el;
     private key;
     private latest;
-    constructor(create: (el: E, options: O) => ScrollDrawInstance);
+    /**
+     * `keyOf` is the options' fingerprint: optionsKey, or the one scrollFrames
+     * passes, which reads a `frames` function by the URLs it gives. `create`
+     * gets the options with live callbacks, and as they were passed.
+     */
+    constructor(create: (el: E, options: O, raw: O) => ScrollDrawInstance, keyOf?: (options: O) => string);
     init(element: E, options: O): this;
     /** Call from `ngOnChanges` with the current options. A no-op before `init()`. */
     update(options: O): this;
@@ -124,6 +132,52 @@ declare class ScrollVideoRef extends EngineRef<HTMLVideoElement, ScrollVideoOpti
     constructor();
     init(element: HTMLVideoElement, options?: ScrollVideoOptions): this;
 }
+/**
+ * Scrub an image sequence on a <canvas> with the scroll (scrollFrames) —
+ * Angular class-based API. The canvas is in your template, so give it
+ * role="img" and an aria-label saying what the frames show; in development
+ * `init()` warns when it has no name (unless it is aria-hidden="true" or
+ * role="presentation").
+ *
+ * `update()` from ngOnChanges starts a new film only when the URLs (a `frames`
+ * function is read by the URLs it gives for `count`) or another option
+ * changed; callbacks are read live. `triggerElement` takes an element or a
+ * selector, found when the film starts.
+ *
+ * @example
+ * @Component({
+ *   template: `
+ *     <section #track style="height: 400vh">
+ *       <div style="position: sticky; top: 0; height: 100vh">
+ *         <canvas #film role="img" aria-label="The headphones turning"></canvas>
+ *       </div>
+ *     </section>`,
+ * })
+ * export class FilmComponent implements AfterViewInit, OnChanges, OnDestroy {
+ *   @ViewChild('film') filmRef!: ElementRef<HTMLCanvasElement>;
+ *   @ViewChild('track') trackRef!: ElementRef<HTMLElement>;
+ *   @Input() count = 120;
+ *   private film = new ScrollFramesRef();
+ *
+ *   ngAfterViewInit() { this.film.init(this.filmRef.nativeElement, this.options()); }
+ *   ngOnChanges() { this.film.update(this.options()); }
+ *   ngOnDestroy() { this.film.destroy(); }
+ *
+ *   private options() {
+ *     return {
+ *       frames: (i: number) => `/film/${i + 1}.jpg`, count: this.count,
+ *       triggerElement: this.trackRef?.nativeElement,
+ *       trigger: { start: 'top top', end: 'bottom bottom' },
+ *     };
+ *   }
+ * }
+ */
+declare class ScrollFramesRef extends EngineRef<HTMLCanvasElement, FramesInput> {
+    /** The canvas whose label was checked: once per canvas, not per new film. */
+    private named;
+    constructor();
+    init(element: HTMLCanvasElement, options: FramesInput): this;
+}
 /**
  * Split text and stagger-animate each piece on scroll — Angular class-based API.
  *
@@ -150,4 +204,4 @@ declare class ScrollTextRef extends EngineRef<HTMLElement, ScrollTextOptions> {
     init(element: HTMLElement, options?: ScrollTextOptions): this;
 }
 
-export { EngineRef, ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawInstance, ScrollDrawOptions, ScrollDrawRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };
+export { EngineRef, ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawInstance, ScrollDrawOptions, ScrollDrawRef, ScrollFramesRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };

package/dist/angular/index.mjs

@@ -1 +1 @@
-import {a,b}from'../chunk-XSVTHCLO.mjs';import {a as a$3}from'../chunk-BRV2B2YW.mjs';import {a as a$4}from'../chunk-32ZCSGFZ.mjs';import {a as a$2}from'../chunk-U5TKLHGW.mjs';import {a as a$1}from'../chunk-7USW2XFB.mjs';import {b as b$1}from'../chunk-7XOFQCQE.mjs';import'../chunk-V3Z6G5JE.mjs';import'../chunk-UPWWULKI.mjs';import'../chunk-XC5NR2MU.mjs';import'../chunk-2PYLM3E7.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-THPTANES.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import'../chunk-LFSU6LR3.mjs';var r=class{constructor(t){this.create=t;this.instance=null;this.el=null;this.key="";}init(t,e){return this.destroy(),this.el=t,this.latest=e,this.key=a(e),this.instance=this.create(t,b(e,()=>this.latest)),this}update(t){return this.el?a(t)!==this.key?this.init(this.el,t):(this.latest=t,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(t){return this.instance?.seek(t),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},u=class extends r{constructor(){super(b$1);}init(t,e={}){return super.init(t,e)}},h=class extends r{constructor(){super(a$1);}},m=class extends r{constructor(){super(a$2);}},O=class extends r{constructor(){super(a$3);}init(t,e={}){return super.init(t,e)}},d=class extends r{constructor(){super(a$4);}init(t,e={}){return super.init(t,e)}};export{r as EngineRef,h as ScrollAnimateRef,m as ScrollCounterRef,u as ScrollDrawRef,d as ScrollTextRef,O as ScrollVideoRef};
+import {a as a$4}from'../chunk-NJV6S5LD.mjs';import {a,b,c,d as d$1}from'../chunk-KN2YB54Z.mjs';import {a as a$3}from'../chunk-HJTHOZK5.mjs';import'../chunk-GBFWTY5L.mjs';import {a as a$5}from'../chunk-UF3MO5XQ.mjs';import {a as a$2}from'../chunk-Z72TVDHY.mjs';import {a as a$1}from'../chunk-HAGTU5EX.mjs';import {b as b$1}from'../chunk-XLXVGQ3P.mjs';import'../chunk-7LDSB4FT.mjs';import'../chunk-UPWWULKI.mjs';import'../chunk-XC5NR2MU.mjs';import'../chunk-YOOPMYT6.mjs';import'../chunk-2PYLM3E7.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-IXR6RML7.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import'../chunk-LFSU6LR3.mjs';var r=class{constructor(t,e=a){this.create=t;this.keyOf=e;this.instance=null;this.el=null;this.key="";}init(t,e){return this.destroy(),this.el=t,this.latest=e,this.key=this.keyOf(e),this.instance=this.create(t,b(e,()=>this.latest),e),this}update(t){return this.el?this.keyOf(t)!==this.key?this.init(this.el,t):(this.latest=t,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(t){return this.instance?.seek(t),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},O=class extends r{constructor(){super(b$1);}init(t,e={}){return super.init(t,e)}},d=class extends r{constructor(){super(a$1);}},y=class extends r{constructor(){super(a$2);}},x=class extends r{constructor(){super(a$3);}init(t,e={}){return super.init(t,e)}},S=class extends r{constructor(){super(a$4,c);this.named=null;}init(e,f){return this.named!==e&&d$1(e,"ScrollFramesRef"),this.named=e,super.init(e,f)}},E=class extends r{constructor(){super(a$5);}init(t,e={}){return super.init(t,e)}};export{r as EngineRef,d as ScrollAnimateRef,y as ScrollCounterRef,O as ScrollDrawRef,S as ScrollFramesRef,E as ScrollTextRef,x as ScrollVideoRef};