svg-scroll-draw 2.15.2 → 2.15.3

package/README.md

@@ -622,7 +622,7 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 |---|---|
 | `svg-scroll-draw` (main, every core API) | 10.2 KB |
 | `svg-scroll-draw/react` (includes the engine) | 11.2 KB |
-| `svg-scroll-draw/reveal` | 4.5 KB |
+| `svg-scroll-draw/reveal` | 4.7 KB |
 | `svg-scroll-draw/text` | 2.5 KB |
 | `svg-scroll-draw/video` | 2.0 KB |
 | `svg-scroll-draw/scrollreveal` | 4.5 KB |

package/dist/angular/index.d.mts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/angular/index.d.ts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/astro/index.d.mts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/astro/index.d.ts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/group/index.d.mts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/group/index.d.ts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/index.d.mts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/index.d.ts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/nuxt/index.d.mts

@@ -104,8 +104,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/nuxt/index.d.ts

@@ -104,8 +104,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/react/index.d.mts

@@ -104,8 +104,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/react/index.d.ts

@@ -104,8 +104,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/reveal/index.cjs

@@ -1 +1 @@
-'use strict';function _e({bounces:e=3,decay:n=.5}={}){let t=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,n)),a=Math.sqrt(r),i=0,m=[];for(let c=0;c<t;c++){let p=Math.pow(a,c);m.push(p),i+=p;}let l=[0],u=0;for(let c=0;c<t;c++)u+=m[c]/i,l.push(u);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<t;p++)if(c<=l[p+1]){let g=(c-l[p])/(l[p+1]-l[p]);if(p===0)return g*(2-g);let M=1-Math.pow(r,p);return M+(1-M)*(2*g-1)*(2*g-1)}return 1}}function Ce({amplitude:e=1,period:n=.4}={}){let t=Math.max(1,e),r=Math.max(.1,n),a=t<=1?r/4:r/(2*Math.PI)*Math.asin(1/t);return i=>i<=0?0:i>=1?1:t*Math.pow(2,-10*i)*Math.sin((i-a)*(2*Math.PI)/r)+1}var $={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:_e(),elastic:Ce()};function K(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[t="top",r="bottom"]=n.split(/\s+/).filter(Boolean);return {element:t,viewport:r}}function me(e,n,t,r){switch(r){case "top":return e+t;case "center":return e+t+n/2;case "bottom":return e+t+n;default:return e+t}}function pe(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function Ne(e,n,t){return Math.min(t,Math.max(n,e))}function X(e,n,t,r){return t===n?0:Ne((e-n)/(t-n)*r,0,1)}function ge(e,n,t){let r=e.getBoundingClientRect(),a=t==="x"?r.width:r.height;return n?{top:t==="x"?r.left-n.getBoundingClientRect().left+n.scrollLeft:r.top-n.getBoundingClientRect().top+n.scrollTop,height:a,scroll:0}:{top:t==="x"?r.left:r.top,height:a,scroll:t==="x"?window.scrollX:window.scrollY}}function Z(e,n,t,r,a){let i=me(e.top,e.height,n,r.element)-pe(r.viewport,t),m=me(e.top,e.height,n,a.element)-pe(a.viewport,t);return {tStart:i,tEnd:m}}function fe(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[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 r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function de(e,n,t){let r=fe(e),a=fe(n);return !r||!a?e:`rgb(${Math.round(r[0]+(a[0]-r[0])*t)},${Math.round(r[1]+(a[1]-r[1])*t)},${Math.round(r[2]+(a[2]-r[2])*t)})`}var Fe="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Oe="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",be=33;function De(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Ve(e){let n=[];for(let t=0;t<be;t++){let r=t/(be-1);n.push(String(Math.round(e(r)*1e5)/1e5));}return `linear(${n.join(",")})`}function ye(e){switch(e){case "linear":return "linear";case "ease-in":return Fe;case "ease-out":return Oe;case "ease-in-out":return De()?Ve($["ease-in-out"]):null;default:return null}}var he=Symbol.for("svg-scroll-draw.registry");function we(){let e=globalThis;return e[he]||(e[he]=new Map)}function J(e,n){we().set(e,n);}function ee(e){we().delete(e);}var He=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function k(e,...n){He&&console.warn(`[svg-scroll-draw] ${e}`,...n);}function Xe(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Ee(e){let n=[],t=/([\w]+)\(([^)]*)\)/g,r;for(;(r=t.exec(e))!==null;){let a=[],i=[],m=r[2].trim();if(m)for(let l of m.split(/[\s,]+/)){let u=l.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"");}n.push({fn:r[1],nums:a,units:i});}return n}function ke(e,n,t){let r=Ee(e),a=Ee(n);return r.length===0||r.length!==a.length?t<1?e:n:r.map((i,m)=>{let l=a[m];return i.fn!==l.fn||i.nums.length!==l.nums.length?t<1?`${i.fn}(${i.nums.map((u,c)=>`${u}${i.units[c]}`).join(", ")})`:`${l.fn}(${l.nums.map((u,c)=>`${u}${l.units[c]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,c)=>`${u+(l.nums[c]-u)*t}${i.units[c]}`).join(", ")})`}).join(" ")}function Se(e,n,t){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*t);let r=String(e),a=String(n);if(Xe(r))return de(r,a,t);if(r.includes("("))return ke(r,a,t);let i=r.match(/^([-+]?[\d.]+)(.*)$/),m=a.match(/^([-+]?[\d.]+)(.*)$/);if(i&&m){let l=parseFloat(i[1]),u=parseFloat(m[1]);return `${l+(u-l)*t}${i[2]||m[2]}`}return t<1?r:a}function Be(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var ze=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),We=0,ve="--scroll-draw-progress";function Ye(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function xe(e,n){let t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return t;let{props:r,trigger:a={},easing:i="ease-out",speed:m=1,once:l=false,axis:u="y",scrollContainer:c,native:p=true,velocityScale:g=false,respectReducedMotion:M=true,triggerElement:B,onProgress:I,onComplete:w,onEnter:P,onLeave:A,onEnterBack:_,onLeaveBack:te}=n,Pe=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,z=typeof i=="function"?i:$[i]??$["ease-out"],ne=K(a.start??"top bottom"),re=K(a.end??"bottom top"),oe=B??e,d=typeof c=="string"?document.querySelector(c):c??null,y=Object.entries(r).map(([o,s])=>({prop:Be(o),from:Array.isArray(s)?s[0]:"",to:Array.isArray(s)?s[1]:s}));function Te(){let o=window.getComputedStyle(e);for(let s of y)s.from===""&&(s.from=o.getPropertyValue(s.prop).trim()||"0");}function Re(){for(let o of y)e.style.setProperty(o.prop,String(o.to));}let se=new Map;for(let o of [...y.map(s=>s.prop),ve])se.set(o,e.style.getPropertyValue(o));function W(){for(let[o,s]of se)s?e.style.setProperty(o,s):e.style.removeProperty(o);}if(Pe)return Re(),w?.(),{...t,destroy:W,getProgress:()=>1};Te();let ie=typeof i=="string"?ye(i):null;function Le(){if(!p||!Ye()||!ie||u!=="y"||d||oe!==e||l||m!==1||I||w||P||A||_||te||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return  false;for(let o of y)if(!ze.has(o.prop))return  false;return  true}function Ae(){let o=`ssd-a-${++We}`,s=y.map(f=>`${f.prop}:${f.from}`).join(";"),D=y.map(f=>`${f.prop}:${f.to}`).join(";"),L=document.createElement("style");L.setAttribute("data-ssd-animate",""),L.textContent=`@keyframes ${o}{from{${s}}to{${D}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ie};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L),e.classList.add(o);let b=()=>u==="x"?window.scrollX:window.scrollY,V=()=>u==="x"?window.innerWidth:window.innerHeight,H=()=>{let f=e.getBoundingClientRect();return Z({top:f.top,height:f.height},b(),V(),ne,re)};J(e,{type:"animate",getProgress:()=>q.getProgress(),getTrigger:H});let q={destroy(){e.classList.remove(o),L.remove(),e.style.animationPlayState="",W(),ee(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(f){let U=Math.min(1,Math.max(0,f));e.classList.remove(o);for(let Q of y)e.style.setProperty(Q.prop,Se(Q.from,Q.to,U));},getProgress(){let{tStart:f,tEnd:U}=H();return z(X(b(),f,U,m))}};return q}if(Le())return Ae();let h=0,E=0,S=0,C=false,v=false,T=-1,R=0,N=false,x=NaN,Y=-1,ae=0,ue=()=>d?u==="x"?d.scrollLeft:d.scrollTop:u==="x"?window.scrollX:window.scrollY,$e=()=>d?u==="x"?d.clientWidth:d.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function ce(){let o=ge(oe,d,u),s=Z(o,o.scroll,$e(),ne,re);h=s.tStart,E=s.tEnd;}function F(o){e.style.setProperty(ve,String(o));for(let s of y)e.style.setProperty(s.prop,Se(s.from,s.to,o));I?.(o);}function Ie(o){if(isNaN(x)){x=o;return}x<=0&&o>0?P?.():x>0&&o<=0&&te?.(),x<1&&o>=1?A?.():x>=1&&o<1&&_?.(),x=o;}function G(){if(!C||v)return;let o=performance.now(),s=ue(),D=m;if(g!==false){let V=o-ae,H=V>0?Math.abs(s-(Y<0?s:Y))/V:0;D=m*Math.max(.2,1+H*(typeof g=="number"?g:1)*.04);}Y=s,ae=o;let L=E===h?0:(s-h)/(E-h);Ie(L);let b=z(X(s,h,E,D));l&&(T=Math.max(T,b),b=T),R=b,F(b),b>=1&&!N?(N=true,w?.()):b<1&&!l&&(N=false),S=requestAnimationFrame(G);}ce(),E===h&&k("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=z(X(ue(),h,E,m));l&&o>0&&(T=o),R=o,F(o);}let le=new IntersectionObserver(o=>{o.forEach(s=>{C=s.isIntersecting,C&&!v?S=requestAnimationFrame(G):cancelAnimationFrame(S);});},{root:d??null}),j;function O(){clearTimeout(j),j=setTimeout(ce,150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),le.observe(e),J(e,{type:"animate",getProgress:()=>R,getTrigger:()=>({tStart:h,tEnd:E})}),{destroy(){cancelAnimationFrame(S),le.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(j),W(),ee(e);},replay(){T=-1,N=false,R=0,v=false,F(0);},pause(){v=true,cancelAnimationFrame(S);},resume(){v&&(v=false,C&&(S=requestAnimationFrame(G)));},seek(o){let s=Math.min(1,Math.max(0,o));R=s,T=s,v=true,cancelAnimationFrame(S),F(s);},getProgress(){return R}}}var Ge={fadeUp:{opacity:0,y:32},fadeDown:{opacity:0,y:-32},fadeLeft:{opacity:0,x:32},fadeRight:{opacity:0,x:-32},scale:{opacity:0,scale:.88},flip:{opacity:0,rotateX:20},flipX:{opacity:0,rotateY:20}};function je(e){let n={};e.opacity!==void 0&&(n.opacity=[e.opacity,1]);let t=[],r=[];return e.x!==void 0&&(t.push(`translateX(${e.x}px)`),r.push("translateX(0px)")),e.y!==void 0&&(t.push(`translateY(${e.y}px)`),r.push("translateY(0px)")),e.scale!==void 0&&(t.push(`scale(${e.scale})`),r.push("scale(1)")),e.rotate!==void 0&&(t.push(`rotate(${e.rotate}deg)`),r.push("rotate(0deg)")),e.rotateX!==void 0&&(t.push(`rotateX(${e.rotateX}deg)`),r.push("rotateX(0deg)")),e.rotateY!==void 0&&(t.push(`rotateY(${e.rotateY}deg)`),r.push("rotateY(0deg)")),t.length>0&&(n.transform=[t.join(" "),r.join(" ")]),n}function qe(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)):e instanceof NodeList?Array.from(e):e}var Me={destroy:()=>{}};function at(e,n={}){if(typeof window>"u")return Me;let t=qe(e);if(!t.length)return k("scrollReveal: no elements found:",e),Me;let{preset:r="fadeUp",from:a,stagger:i=.08,easing:m="ease-out",once:l=true,trigger:u,onEnter:c,onLeave:p}=n,g={...Ge[r],...a},M=je(g),B=Math.min(i*4,4),I=t.map((w,P)=>{let A=Math.max(50,88-P*B),_=Math.max(20,A-35);return xe(w,{props:M,easing:m,once:l,native:false,trigger:u??{start:`top ${A}%`,end:`top ${_}%`},onEnter:P===0?c:void 0,onLeave:P===t.length-1?p:void 0})});return {destroy(){I.forEach(w=>w.destroy());}}}exports.scrollReveal=at;
+'use strict';function Ne({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),a=Math.sqrt(r),s=0,m=[];for(let c=0;c<n;c++){let p=Math.pow(a,c);m.push(p),s+=p;}let l=[0],u=0;for(let c=0;c<n;c++)u+=m[c]/s,l.push(u);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<n;p++)if(c<=l[p+1]){let g=(c-l[p])/(l[p+1]-l[p]);if(p===0)return g*(2-g);let M=1-Math.pow(r,p);return M+(1-M)*(2*g-1)*(2*g-1)}return 1}}function Fe({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),a=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-a)*(2*Math.PI)/r)+1}var N={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Ne(),elastic:Fe()};function J(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function fe(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function ge(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function Oe(e,t,n){return Math.min(n,Math.max(t,e))}function W(e,t,n,r){return n===t?0:Oe((e-t)/(n-t)*r,0,1)}function be(e,t,n){let r=e.getBoundingClientRect(),a=n==="x"?r.width:r.height;return t?{top:n==="x"?r.left-t.getBoundingClientRect().left+t.scrollLeft:r.top-t.getBoundingClientRect().top+t.scrollTop,height:a,scroll:0}:{top:n==="x"?r.left:r.top,height:a,scroll:n==="x"?window.scrollX:window.scrollY}}function ee(e,t,n,r,a){let s=fe(e.top,e.height,t,r.element)-ge(r.viewport,n),m=fe(e.top,e.height,t,a.element)-ge(a.viewport,n);return {tStart:s,tEnd:m}}function de(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function he(e,t,n){let r=de(e),a=de(t);return !r||!a?e:`rgb(${Math.round(r[0]+(a[0]-r[0])*n)},${Math.round(r[1]+(a[1]-r[1])*n)},${Math.round(r[2]+(a[2]-r[2])*n)})`}var De="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ve="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ye=33;function He(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Xe(e){let t=[];for(let n=0;n<ye;n++){let r=n/(ye-1);t.push(String(Math.round(e(r)*1e5)/1e5));}return `linear(${t.join(",")})`}function we(e){switch(e){case "linear":return "linear";case "ease-in":return De;case "ease-out":return Ve;case "ease-in-out":return He()?Xe(N["ease-in-out"]):null;default:return null}}var Ee=Symbol.for("svg-scroll-draw.registry");function ve(){let e=globalThis;return e[Ee]||(e[Ee]=new Map)}function te(e,t){ve().set(e,t);}function ne(e){ve().delete(e);}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 Y(e,...t){ke&&console.warn(`[svg-scroll-draw] ${e}`,...t);}function Be(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Se(e){let t=[],n=/([\w]+)\(([^)]*)\)/g,r;for(;(r=n.exec(e))!==null;){let a=[],s=[],m=r[2].trim();if(m)for(let l of m.split(/[\s,]+/)){let u=l.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(u?parseFloat(u[1]):0),s.push(u?u[2]:"");}t.push({fn:r[1],nums:a,units:s});}return t}function ze(e,t,n){let r=Se(e),a=Se(t);return r.length===0||r.length!==a.length?n<1?e:t:r.map((s,m)=>{let l=a[m];return s.fn!==l.fn||s.nums.length!==l.nums.length?n<1?`${s.fn}(${s.nums.map((u,c)=>`${u}${s.units[c]}`).join(", ")})`:`${l.fn}(${l.nums.map((u,c)=>`${u}${l.units[c]}`).join(", ")})`:`${s.fn}(${s.nums.map((u,c)=>`${u+(l.nums[c]-u)*n}${s.units[c]}`).join(", ")})`}).join(" ")}function xe(e,t,n){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*n);let r=String(e),a=String(t);if(Be(r))return he(r,a,n);if(r.includes("("))return ze(r,a,n);let s=r.match(/^([-+]?[\d.]+)(.*)$/),m=a.match(/^([-+]?[\d.]+)(.*)$/);if(s&&m){let l=parseFloat(s[1]),u=parseFloat(m[1]);return `${l+(u-l)*n}${s[2]||m[2]}`}return n<1?r:a}function We(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Ye=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Ge=0,Me="--scroll-draw-progress";function je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Te(e,t){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:r,trigger:a={},easing:s="ease-out",speed:m=1,once:l=false,axis:u="y",scrollContainer:c,native:p=true,velocityScale:g=false,respectReducedMotion:M=true,triggerElement:I,onProgress:T,onComplete:P,onEnter:C,onLeave:F,onEnterBack:O,onLeaveBack:R}=t,_=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,w=typeof s=="function"?s:N[s]??N["ease-out"],oe=J(a.start??"top bottom"),se=J(a.end??"bottom top"),ie=I??e,d=typeof c=="string"?document.querySelector(c):c??null,h=Object.entries(r).map(([o,i])=>({prop:We(o),from:Array.isArray(i)?i[0]:"",to:Array.isArray(i)?i[1]:i}));function Le(){let o=window.getComputedStyle(e);for(let i of h)i.from===""&&(i.from=o.getPropertyValue(i.prop).trim()||"0");}function $e(){for(let o of h)e.style.setProperty(o.prop,String(o.to));}let ae=new Map;for(let o of [...h.map(i=>i.prop),Me])ae.set(o,e.style.getPropertyValue(o));function G(){for(let[o,i]of ae)i?e.style.setProperty(o,i):e.style.removeProperty(o);}if(_)return $e(),P?.(),{...n,destroy:G,getProgress:()=>1};Le();let ue=typeof s=="string"?we(s):null;function Ae(){if(!p||!je()||!ue||u!=="y"||d||ie!==e||l||m!==1||T||P||C||F||O||R||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return  false;for(let o of h)if(!Ye.has(o.prop))return  false;return  true}function Ie(){let o=`ssd-a-${++Ge}`,i=h.map(f=>`${f.prop}:${f.from}`).join(";"),k=h.map(f=>`${f.prop}:${f.to}`).join(";"),A=document.createElement("style");A.setAttribute("data-ssd-animate",""),A.textContent=`@keyframes ${o}{from{${i}}to{${k}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ue};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(A),e.classList.add(o);let b=()=>u==="x"?window.scrollX:window.scrollY,B=()=>u==="x"?window.innerWidth:window.innerHeight,z=()=>{let f=e.getBoundingClientRect();return ee({top:f.top,height:f.height},b(),B(),oe,se)};te(e,{type:"animate",getProgress:()=>Q.getProgress(),getTrigger:z});let Q={destroy(){e.classList.remove(o),A.remove(),e.style.animationPlayState="",G(),ne(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(f){let K=Math.min(1,Math.max(0,f));e.classList.remove(o);for(let Z of h)e.style.setProperty(Z.prop,xe(Z.from,Z.to,K));},getProgress(){let{tStart:f,tEnd:K}=z();return w(W(b(),f,K,m))}};return Q}if(Ae())return Ie();let y=0,E=0,v=0,D=false,S=false,L=-1,$=0,V=false,x=NaN,j=-1,ce=0,le=()=>d?u==="x"?d.scrollLeft:d.scrollTop:u==="x"?window.scrollX:window.scrollY,Ce=()=>d?u==="x"?d.clientWidth:d.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function me(){let o=be(ie,d,u),i=ee(o,o.scroll,Ce(),oe,se);y=i.tStart,E=i.tEnd;}function H(o){e.style.setProperty(Me,String(o));for(let i of h)e.style.setProperty(i.prop,xe(i.from,i.to,o));T?.(o);}function _e(o){if(isNaN(x)){x=o;return}x<=0&&o>0?C?.():x>0&&o<=0&&R?.(),x<1&&o>=1?F?.():x>=1&&o<1&&O?.(),x=o;}function q(){if(!D||S)return;let o=performance.now(),i=le(),k=m;if(g!==false){let B=o-ce,z=B>0?Math.abs(i-(j<0?i:j))/B:0;k=m*Math.max(.2,1+z*(typeof g=="number"?g:1)*.04);}j=i,ce=o;let A=E===y?0:(i-y)/(E-y);_e(A);let b=w(W(i,y,E,k));l&&(L=Math.max(L,b),b=L),$=b,H(b),b>=1&&!V?(V=true,P?.()):b<1&&!l&&(V=false),v=requestAnimationFrame(q);}me(),E===y&&Y("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=w(W(le(),y,E,m));l&&o>0&&(L=o),$=o,H(o);}let pe=new IntersectionObserver(o=>{o.forEach(i=>{D=i.isIntersecting,D&&!S?v=requestAnimationFrame(q):cancelAnimationFrame(v);});},{root:d??null}),U;function X(){clearTimeout(U),U=setTimeout(me,150);}return window.addEventListener("resize",X),window.addEventListener("orientationchange",X),pe.observe(e),te(e,{type:"animate",getProgress:()=>$,getTrigger:()=>({tStart:y,tEnd:E})}),{destroy(){cancelAnimationFrame(v),pe.disconnect(),window.removeEventListener("resize",X),window.removeEventListener("orientationchange",X),clearTimeout(U),G(),ne(e);},replay(){L=-1,V=false,$=0,S=false,H(0);},pause(){S=true,cancelAnimationFrame(v);},resume(){S&&(S=false,D&&(v=requestAnimationFrame(q)));},seek(o){let i=Math.min(1,Math.max(0,o));$=i,L=i,S=true,cancelAnimationFrame(v),H(i);},getProgress(){return $}}}var qe={fadeUp:{opacity:0,y:32},fadeDown:{opacity:0,y:-32},fadeLeft:{opacity:0,x:32},fadeRight:{opacity:0,x:-32},scale:{opacity:0,scale:.88},flip:{opacity:0,rotateX:20},flipX:{opacity:0,rotateY:20}};function Ue(e){let t={};e.opacity!==void 0&&(t.opacity=[e.opacity,1]);let n=[],r=[];return e.x!==void 0&&(n.push(`translateX(${e.x}px)`),r.push("translateX(0px)")),e.y!==void 0&&(n.push(`translateY(${e.y}px)`),r.push("translateY(0px)")),e.scale!==void 0&&(n.push(`scale(${e.scale})`),r.push("scale(1)")),e.rotate!==void 0&&(n.push(`rotate(${e.rotate}deg)`),r.push("rotate(0deg)")),e.rotateX!==void 0&&(n.push(`rotateX(${e.rotateX}deg)`),r.push("rotateX(0deg)")),e.rotateY!==void 0&&(n.push(`rotateY(${e.rotateY}deg)`),r.push("rotateY(0deg)")),n.length>0&&(t.transform=[n.join(" "),r.join(" ")]),t}function Qe(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)):e instanceof NodeList?Array.from(e):e}function re(e){let t=e.trim().split(/\s+/),[n,r]=t.length>1?t:/%$/.test(t[0])?["top",t[0]]:[t[0],"bottom"];return [n,/%$/.test(r)?parseFloat(r):r==="top"?0:r==="center"?50:100]}function Pe(e,t){let[n,r]=re(e);return `${n} ${+Math.max(0,r-t).toFixed(3)}%`}function Ke(e){let t=NaN,n=0,r=0;return e.map(a=>{let s=a.getBoundingClientRect();return Math.abs(s.top-t)<=Math.max(8,Math.min(s.height,n||s.height)/2)?r++:(t=s.top,n=s.height,r=0),r})}var Re={destroy:()=>{}};function lt(e,t={}){if(typeof window>"u")return Re;let n=Qe(e);if(!n.length)return Y("scrollReveal: no elements found:",e),Re;let{preset:r="fadeUp",from:a,stagger:s=.15,easing:m="ease-out",once:l=true,trigger:u,onEnter:c,onLeave:p}=t,g={...qe[r],...a},M=Ue(g),I=u?.start??"top 88%",T=u?.end??"top 53%",P=Math.abs(re(I)[1]-re(T)[1]),C=Math.min(Math.max(s,0),1)*P,F=C>0?Ke(n):n.map(()=>0),O=n.map((R,_)=>{let w=Math.min(F[_]*C,P);return Te(R,{props:M,easing:m,once:l,native:false,trigger:w>0?{start:Pe(I,w),end:Pe(T,w)}:{start:I,end:T},onEnter:_===0?c:void 0,onLeave:_===n.length-1?p:void 0})});return {destroy(){O.forEach(R=>R.destroy());}}}exports.scrollReveal=lt;

package/dist/reveal/index.d.mts

@@ -39,9 +39,15 @@ interface ScrollRevealOptions {
     /** Custom start state. Keys: opacity, x, y, scale, rotate, rotateX, rotateY. */
     from?: ScrollRevealFrom;
     /**
-     * Delay between each element's animation start (seconds).
-     * Elements are staggered by offsetting their trigger window.
-     * Default: 0.08.
+     * How far behind its neighbour each element in the same row starts, as a
+     * fraction of the reveal window (0–1). At `0.15` each card begins 15% of the
+     * way into the previous card's reveal; `0` reveals a row all at once.
+     *
+     * Rows are read from the layout: elements whose tops line up (a grid row, a
+     * line of badges) cascade one after another, and each new row starts its own
+     * count — its place further down the page already staggers it. A row's last
+     * element never starts more than one full window after its first. The offset
+     * applies on top of a custom `trigger` as well. Default: 0.15.
      */
     stagger?: number;
     /** Animation easing. Default: `'ease-out'`. */

package/dist/reveal/index.d.ts

@@ -39,9 +39,15 @@ interface ScrollRevealOptions {
     /** Custom start state. Keys: opacity, x, y, scale, rotate, rotateX, rotateY. */
     from?: ScrollRevealFrom;
     /**
-     * Delay between each element's animation start (seconds).
-     * Elements are staggered by offsetting their trigger window.
-     * Default: 0.08.
+     * How far behind its neighbour each element in the same row starts, as a
+     * fraction of the reveal window (0–1). At `0.15` each card begins 15% of the
+     * way into the previous card's reveal; `0` reveals a row all at once.
+     *
+     * Rows are read from the layout: elements whose tops line up (a grid row, a
+     * line of badges) cascade one after another, and each new row starts its own
+     * count — its place further down the page already staggers it. A row's last
+     * element never starts more than one full window after its first. The offset
+     * applies on top of a custom `trigger` as well. Default: 0.15.
      */
     stagger?: number;
     /** Animation easing. Default: `'ease-out'`. */

package/dist/reveal/index.mjs

@@ -1 +1 @@
-function _e({bounces:e=3,decay:n=.5}={}){let t=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,n)),a=Math.sqrt(r),i=0,m=[];for(let c=0;c<t;c++){let p=Math.pow(a,c);m.push(p),i+=p;}let l=[0],u=0;for(let c=0;c<t;c++)u+=m[c]/i,l.push(u);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<t;p++)if(c<=l[p+1]){let g=(c-l[p])/(l[p+1]-l[p]);if(p===0)return g*(2-g);let M=1-Math.pow(r,p);return M+(1-M)*(2*g-1)*(2*g-1)}return 1}}function Ce({amplitude:e=1,period:n=.4}={}){let t=Math.max(1,e),r=Math.max(.1,n),a=t<=1?r/4:r/(2*Math.PI)*Math.asin(1/t);return i=>i<=0?0:i>=1?1:t*Math.pow(2,-10*i)*Math.sin((i-a)*(2*Math.PI)/r)+1}var $={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:_e(),elastic:Ce()};function K(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[t="top",r="bottom"]=n.split(/\s+/).filter(Boolean);return {element:t,viewport:r}}function me(e,n,t,r){switch(r){case "top":return e+t;case "center":return e+t+n/2;case "bottom":return e+t+n;default:return e+t}}function pe(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function Ne(e,n,t){return Math.min(t,Math.max(n,e))}function X(e,n,t,r){return t===n?0:Ne((e-n)/(t-n)*r,0,1)}function ge(e,n,t){let r=e.getBoundingClientRect(),a=t==="x"?r.width:r.height;return n?{top:t==="x"?r.left-n.getBoundingClientRect().left+n.scrollLeft:r.top-n.getBoundingClientRect().top+n.scrollTop,height:a,scroll:0}:{top:t==="x"?r.left:r.top,height:a,scroll:t==="x"?window.scrollX:window.scrollY}}function Z(e,n,t,r,a){let i=me(e.top,e.height,n,r.element)-pe(r.viewport,t),m=me(e.top,e.height,n,a.element)-pe(a.viewport,t);return {tStart:i,tEnd:m}}function fe(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[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 r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function de(e,n,t){let r=fe(e),a=fe(n);return !r||!a?e:`rgb(${Math.round(r[0]+(a[0]-r[0])*t)},${Math.round(r[1]+(a[1]-r[1])*t)},${Math.round(r[2]+(a[2]-r[2])*t)})`}var Fe="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Oe="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",be=33;function De(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Ve(e){let n=[];for(let t=0;t<be;t++){let r=t/(be-1);n.push(String(Math.round(e(r)*1e5)/1e5));}return `linear(${n.join(",")})`}function ye(e){switch(e){case "linear":return "linear";case "ease-in":return Fe;case "ease-out":return Oe;case "ease-in-out":return De()?Ve($["ease-in-out"]):null;default:return null}}var he=Symbol.for("svg-scroll-draw.registry");function we(){let e=globalThis;return e[he]||(e[he]=new Map)}function J(e,n){we().set(e,n);}function ee(e){we().delete(e);}var He=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function k(e,...n){He&&console.warn(`[svg-scroll-draw] ${e}`,...n);}function Xe(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Ee(e){let n=[],t=/([\w]+)\(([^)]*)\)/g,r;for(;(r=t.exec(e))!==null;){let a=[],i=[],m=r[2].trim();if(m)for(let l of m.split(/[\s,]+/)){let u=l.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"");}n.push({fn:r[1],nums:a,units:i});}return n}function ke(e,n,t){let r=Ee(e),a=Ee(n);return r.length===0||r.length!==a.length?t<1?e:n:r.map((i,m)=>{let l=a[m];return i.fn!==l.fn||i.nums.length!==l.nums.length?t<1?`${i.fn}(${i.nums.map((u,c)=>`${u}${i.units[c]}`).join(", ")})`:`${l.fn}(${l.nums.map((u,c)=>`${u}${l.units[c]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,c)=>`${u+(l.nums[c]-u)*t}${i.units[c]}`).join(", ")})`}).join(" ")}function Se(e,n,t){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*t);let r=String(e),a=String(n);if(Xe(r))return de(r,a,t);if(r.includes("("))return ke(r,a,t);let i=r.match(/^([-+]?[\d.]+)(.*)$/),m=a.match(/^([-+]?[\d.]+)(.*)$/);if(i&&m){let l=parseFloat(i[1]),u=parseFloat(m[1]);return `${l+(u-l)*t}${i[2]||m[2]}`}return t<1?r:a}function Be(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var ze=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),We=0,ve="--scroll-draw-progress";function Ye(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function xe(e,n){let t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return t;let{props:r,trigger:a={},easing:i="ease-out",speed:m=1,once:l=false,axis:u="y",scrollContainer:c,native:p=true,velocityScale:g=false,respectReducedMotion:M=true,triggerElement:B,onProgress:I,onComplete:w,onEnter:P,onLeave:A,onEnterBack:_,onLeaveBack:te}=n,Pe=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,z=typeof i=="function"?i:$[i]??$["ease-out"],ne=K(a.start??"top bottom"),re=K(a.end??"bottom top"),oe=B??e,d=typeof c=="string"?document.querySelector(c):c??null,y=Object.entries(r).map(([o,s])=>({prop:Be(o),from:Array.isArray(s)?s[0]:"",to:Array.isArray(s)?s[1]:s}));function Te(){let o=window.getComputedStyle(e);for(let s of y)s.from===""&&(s.from=o.getPropertyValue(s.prop).trim()||"0");}function Re(){for(let o of y)e.style.setProperty(o.prop,String(o.to));}let se=new Map;for(let o of [...y.map(s=>s.prop),ve])se.set(o,e.style.getPropertyValue(o));function W(){for(let[o,s]of se)s?e.style.setProperty(o,s):e.style.removeProperty(o);}if(Pe)return Re(),w?.(),{...t,destroy:W,getProgress:()=>1};Te();let ie=typeof i=="string"?ye(i):null;function Le(){if(!p||!Ye()||!ie||u!=="y"||d||oe!==e||l||m!==1||I||w||P||A||_||te||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return  false;for(let o of y)if(!ze.has(o.prop))return  false;return  true}function Ae(){let o=`ssd-a-${++We}`,s=y.map(f=>`${f.prop}:${f.from}`).join(";"),D=y.map(f=>`${f.prop}:${f.to}`).join(";"),L=document.createElement("style");L.setAttribute("data-ssd-animate",""),L.textContent=`@keyframes ${o}{from{${s}}to{${D}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ie};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L),e.classList.add(o);let b=()=>u==="x"?window.scrollX:window.scrollY,V=()=>u==="x"?window.innerWidth:window.innerHeight,H=()=>{let f=e.getBoundingClientRect();return Z({top:f.top,height:f.height},b(),V(),ne,re)};J(e,{type:"animate",getProgress:()=>q.getProgress(),getTrigger:H});let q={destroy(){e.classList.remove(o),L.remove(),e.style.animationPlayState="",W(),ee(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(f){let U=Math.min(1,Math.max(0,f));e.classList.remove(o);for(let Q of y)e.style.setProperty(Q.prop,Se(Q.from,Q.to,U));},getProgress(){let{tStart:f,tEnd:U}=H();return z(X(b(),f,U,m))}};return q}if(Le())return Ae();let h=0,E=0,S=0,C=false,v=false,T=-1,R=0,N=false,x=NaN,Y=-1,ae=0,ue=()=>d?u==="x"?d.scrollLeft:d.scrollTop:u==="x"?window.scrollX:window.scrollY,$e=()=>d?u==="x"?d.clientWidth:d.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function ce(){let o=ge(oe,d,u),s=Z(o,o.scroll,$e(),ne,re);h=s.tStart,E=s.tEnd;}function F(o){e.style.setProperty(ve,String(o));for(let s of y)e.style.setProperty(s.prop,Se(s.from,s.to,o));I?.(o);}function Ie(o){if(isNaN(x)){x=o;return}x<=0&&o>0?P?.():x>0&&o<=0&&te?.(),x<1&&o>=1?A?.():x>=1&&o<1&&_?.(),x=o;}function G(){if(!C||v)return;let o=performance.now(),s=ue(),D=m;if(g!==false){let V=o-ae,H=V>0?Math.abs(s-(Y<0?s:Y))/V:0;D=m*Math.max(.2,1+H*(typeof g=="number"?g:1)*.04);}Y=s,ae=o;let L=E===h?0:(s-h)/(E-h);Ie(L);let b=z(X(s,h,E,D));l&&(T=Math.max(T,b),b=T),R=b,F(b),b>=1&&!N?(N=true,w?.()):b<1&&!l&&(N=false),S=requestAnimationFrame(G);}ce(),E===h&&k("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=z(X(ue(),h,E,m));l&&o>0&&(T=o),R=o,F(o);}let le=new IntersectionObserver(o=>{o.forEach(s=>{C=s.isIntersecting,C&&!v?S=requestAnimationFrame(G):cancelAnimationFrame(S);});},{root:d??null}),j;function O(){clearTimeout(j),j=setTimeout(ce,150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),le.observe(e),J(e,{type:"animate",getProgress:()=>R,getTrigger:()=>({tStart:h,tEnd:E})}),{destroy(){cancelAnimationFrame(S),le.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(j),W(),ee(e);},replay(){T=-1,N=false,R=0,v=false,F(0);},pause(){v=true,cancelAnimationFrame(S);},resume(){v&&(v=false,C&&(S=requestAnimationFrame(G)));},seek(o){let s=Math.min(1,Math.max(0,o));R=s,T=s,v=true,cancelAnimationFrame(S),F(s);},getProgress(){return R}}}var Ge={fadeUp:{opacity:0,y:32},fadeDown:{opacity:0,y:-32},fadeLeft:{opacity:0,x:32},fadeRight:{opacity:0,x:-32},scale:{opacity:0,scale:.88},flip:{opacity:0,rotateX:20},flipX:{opacity:0,rotateY:20}};function je(e){let n={};e.opacity!==void 0&&(n.opacity=[e.opacity,1]);let t=[],r=[];return e.x!==void 0&&(t.push(`translateX(${e.x}px)`),r.push("translateX(0px)")),e.y!==void 0&&(t.push(`translateY(${e.y}px)`),r.push("translateY(0px)")),e.scale!==void 0&&(t.push(`scale(${e.scale})`),r.push("scale(1)")),e.rotate!==void 0&&(t.push(`rotate(${e.rotate}deg)`),r.push("rotate(0deg)")),e.rotateX!==void 0&&(t.push(`rotateX(${e.rotateX}deg)`),r.push("rotateX(0deg)")),e.rotateY!==void 0&&(t.push(`rotateY(${e.rotateY}deg)`),r.push("rotateY(0deg)")),t.length>0&&(n.transform=[t.join(" "),r.join(" ")]),n}function qe(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)):e instanceof NodeList?Array.from(e):e}var Me={destroy:()=>{}};function at(e,n={}){if(typeof window>"u")return Me;let t=qe(e);if(!t.length)return k("scrollReveal: no elements found:",e),Me;let{preset:r="fadeUp",from:a,stagger:i=.08,easing:m="ease-out",once:l=true,trigger:u,onEnter:c,onLeave:p}=n,g={...Ge[r],...a},M=je(g),B=Math.min(i*4,4),I=t.map((w,P)=>{let A=Math.max(50,88-P*B),_=Math.max(20,A-35);return xe(w,{props:M,easing:m,once:l,native:false,trigger:u??{start:`top ${A}%`,end:`top ${_}%`},onEnter:P===0?c:void 0,onLeave:P===t.length-1?p:void 0})});return {destroy(){I.forEach(w=>w.destroy());}}}export{at as scrollReveal};
+function Ne({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),a=Math.sqrt(r),s=0,m=[];for(let c=0;c<n;c++){let p=Math.pow(a,c);m.push(p),s+=p;}let l=[0],u=0;for(let c=0;c<n;c++)u+=m[c]/s,l.push(u);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<n;p++)if(c<=l[p+1]){let g=(c-l[p])/(l[p+1]-l[p]);if(p===0)return g*(2-g);let M=1-Math.pow(r,p);return M+(1-M)*(2*g-1)*(2*g-1)}return 1}}function Fe({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),a=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-a)*(2*Math.PI)/r)+1}var N={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Ne(),elastic:Fe()};function J(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function fe(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function ge(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function Oe(e,t,n){return Math.min(n,Math.max(t,e))}function W(e,t,n,r){return n===t?0:Oe((e-t)/(n-t)*r,0,1)}function be(e,t,n){let r=e.getBoundingClientRect(),a=n==="x"?r.width:r.height;return t?{top:n==="x"?r.left-t.getBoundingClientRect().left+t.scrollLeft:r.top-t.getBoundingClientRect().top+t.scrollTop,height:a,scroll:0}:{top:n==="x"?r.left:r.top,height:a,scroll:n==="x"?window.scrollX:window.scrollY}}function ee(e,t,n,r,a){let s=fe(e.top,e.height,t,r.element)-ge(r.viewport,n),m=fe(e.top,e.height,t,a.element)-ge(a.viewport,n);return {tStart:s,tEnd:m}}function de(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function he(e,t,n){let r=de(e),a=de(t);return !r||!a?e:`rgb(${Math.round(r[0]+(a[0]-r[0])*n)},${Math.round(r[1]+(a[1]-r[1])*n)},${Math.round(r[2]+(a[2]-r[2])*n)})`}var De="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ve="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ye=33;function He(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Xe(e){let t=[];for(let n=0;n<ye;n++){let r=n/(ye-1);t.push(String(Math.round(e(r)*1e5)/1e5));}return `linear(${t.join(",")})`}function we(e){switch(e){case "linear":return "linear";case "ease-in":return De;case "ease-out":return Ve;case "ease-in-out":return He()?Xe(N["ease-in-out"]):null;default:return null}}var Ee=Symbol.for("svg-scroll-draw.registry");function ve(){let e=globalThis;return e[Ee]||(e[Ee]=new Map)}function te(e,t){ve().set(e,t);}function ne(e){ve().delete(e);}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 Y(e,...t){ke&&console.warn(`[svg-scroll-draw] ${e}`,...t);}function Be(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Se(e){let t=[],n=/([\w]+)\(([^)]*)\)/g,r;for(;(r=n.exec(e))!==null;){let a=[],s=[],m=r[2].trim();if(m)for(let l of m.split(/[\s,]+/)){let u=l.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(u?parseFloat(u[1]):0),s.push(u?u[2]:"");}t.push({fn:r[1],nums:a,units:s});}return t}function ze(e,t,n){let r=Se(e),a=Se(t);return r.length===0||r.length!==a.length?n<1?e:t:r.map((s,m)=>{let l=a[m];return s.fn!==l.fn||s.nums.length!==l.nums.length?n<1?`${s.fn}(${s.nums.map((u,c)=>`${u}${s.units[c]}`).join(", ")})`:`${l.fn}(${l.nums.map((u,c)=>`${u}${l.units[c]}`).join(", ")})`:`${s.fn}(${s.nums.map((u,c)=>`${u+(l.nums[c]-u)*n}${s.units[c]}`).join(", ")})`}).join(" ")}function xe(e,t,n){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*n);let r=String(e),a=String(t);if(Be(r))return he(r,a,n);if(r.includes("("))return ze(r,a,n);let s=r.match(/^([-+]?[\d.]+)(.*)$/),m=a.match(/^([-+]?[\d.]+)(.*)$/);if(s&&m){let l=parseFloat(s[1]),u=parseFloat(m[1]);return `${l+(u-l)*n}${s[2]||m[2]}`}return n<1?r:a}function We(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Ye=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Ge=0,Me="--scroll-draw-progress";function je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Te(e,t){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:r,trigger:a={},easing:s="ease-out",speed:m=1,once:l=false,axis:u="y",scrollContainer:c,native:p=true,velocityScale:g=false,respectReducedMotion:M=true,triggerElement:I,onProgress:T,onComplete:P,onEnter:C,onLeave:F,onEnterBack:O,onLeaveBack:R}=t,_=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,w=typeof s=="function"?s:N[s]??N["ease-out"],oe=J(a.start??"top bottom"),se=J(a.end??"bottom top"),ie=I??e,d=typeof c=="string"?document.querySelector(c):c??null,h=Object.entries(r).map(([o,i])=>({prop:We(o),from:Array.isArray(i)?i[0]:"",to:Array.isArray(i)?i[1]:i}));function Le(){let o=window.getComputedStyle(e);for(let i of h)i.from===""&&(i.from=o.getPropertyValue(i.prop).trim()||"0");}function $e(){for(let o of h)e.style.setProperty(o.prop,String(o.to));}let ae=new Map;for(let o of [...h.map(i=>i.prop),Me])ae.set(o,e.style.getPropertyValue(o));function G(){for(let[o,i]of ae)i?e.style.setProperty(o,i):e.style.removeProperty(o);}if(_)return $e(),P?.(),{...n,destroy:G,getProgress:()=>1};Le();let ue=typeof s=="string"?we(s):null;function Ae(){if(!p||!je()||!ue||u!=="y"||d||ie!==e||l||m!==1||T||P||C||F||O||R||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return  false;for(let o of h)if(!Ye.has(o.prop))return  false;return  true}function Ie(){let o=`ssd-a-${++Ge}`,i=h.map(f=>`${f.prop}:${f.from}`).join(";"),k=h.map(f=>`${f.prop}:${f.to}`).join(";"),A=document.createElement("style");A.setAttribute("data-ssd-animate",""),A.textContent=`@keyframes ${o}{from{${i}}to{${k}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ue};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(A),e.classList.add(o);let b=()=>u==="x"?window.scrollX:window.scrollY,B=()=>u==="x"?window.innerWidth:window.innerHeight,z=()=>{let f=e.getBoundingClientRect();return ee({top:f.top,height:f.height},b(),B(),oe,se)};te(e,{type:"animate",getProgress:()=>Q.getProgress(),getTrigger:z});let Q={destroy(){e.classList.remove(o),A.remove(),e.style.animationPlayState="",G(),ne(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(f){let K=Math.min(1,Math.max(0,f));e.classList.remove(o);for(let Z of h)e.style.setProperty(Z.prop,xe(Z.from,Z.to,K));},getProgress(){let{tStart:f,tEnd:K}=z();return w(W(b(),f,K,m))}};return Q}if(Ae())return Ie();let y=0,E=0,v=0,D=false,S=false,L=-1,$=0,V=false,x=NaN,j=-1,ce=0,le=()=>d?u==="x"?d.scrollLeft:d.scrollTop:u==="x"?window.scrollX:window.scrollY,Ce=()=>d?u==="x"?d.clientWidth:d.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function me(){let o=be(ie,d,u),i=ee(o,o.scroll,Ce(),oe,se);y=i.tStart,E=i.tEnd;}function H(o){e.style.setProperty(Me,String(o));for(let i of h)e.style.setProperty(i.prop,xe(i.from,i.to,o));T?.(o);}function _e(o){if(isNaN(x)){x=o;return}x<=0&&o>0?C?.():x>0&&o<=0&&R?.(),x<1&&o>=1?F?.():x>=1&&o<1&&O?.(),x=o;}function q(){if(!D||S)return;let o=performance.now(),i=le(),k=m;if(g!==false){let B=o-ce,z=B>0?Math.abs(i-(j<0?i:j))/B:0;k=m*Math.max(.2,1+z*(typeof g=="number"?g:1)*.04);}j=i,ce=o;let A=E===y?0:(i-y)/(E-y);_e(A);let b=w(W(i,y,E,k));l&&(L=Math.max(L,b),b=L),$=b,H(b),b>=1&&!V?(V=true,P?.()):b<1&&!l&&(V=false),v=requestAnimationFrame(q);}me(),E===y&&Y("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=w(W(le(),y,E,m));l&&o>0&&(L=o),$=o,H(o);}let pe=new IntersectionObserver(o=>{o.forEach(i=>{D=i.isIntersecting,D&&!S?v=requestAnimationFrame(q):cancelAnimationFrame(v);});},{root:d??null}),U;function X(){clearTimeout(U),U=setTimeout(me,150);}return window.addEventListener("resize",X),window.addEventListener("orientationchange",X),pe.observe(e),te(e,{type:"animate",getProgress:()=>$,getTrigger:()=>({tStart:y,tEnd:E})}),{destroy(){cancelAnimationFrame(v),pe.disconnect(),window.removeEventListener("resize",X),window.removeEventListener("orientationchange",X),clearTimeout(U),G(),ne(e);},replay(){L=-1,V=false,$=0,S=false,H(0);},pause(){S=true,cancelAnimationFrame(v);},resume(){S&&(S=false,D&&(v=requestAnimationFrame(q)));},seek(o){let i=Math.min(1,Math.max(0,o));$=i,L=i,S=true,cancelAnimationFrame(v),H(i);},getProgress(){return $}}}var qe={fadeUp:{opacity:0,y:32},fadeDown:{opacity:0,y:-32},fadeLeft:{opacity:0,x:32},fadeRight:{opacity:0,x:-32},scale:{opacity:0,scale:.88},flip:{opacity:0,rotateX:20},flipX:{opacity:0,rotateY:20}};function Ue(e){let t={};e.opacity!==void 0&&(t.opacity=[e.opacity,1]);let n=[],r=[];return e.x!==void 0&&(n.push(`translateX(${e.x}px)`),r.push("translateX(0px)")),e.y!==void 0&&(n.push(`translateY(${e.y}px)`),r.push("translateY(0px)")),e.scale!==void 0&&(n.push(`scale(${e.scale})`),r.push("scale(1)")),e.rotate!==void 0&&(n.push(`rotate(${e.rotate}deg)`),r.push("rotate(0deg)")),e.rotateX!==void 0&&(n.push(`rotateX(${e.rotateX}deg)`),r.push("rotateX(0deg)")),e.rotateY!==void 0&&(n.push(`rotateY(${e.rotateY}deg)`),r.push("rotateY(0deg)")),n.length>0&&(t.transform=[n.join(" "),r.join(" ")]),t}function Qe(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)):e instanceof NodeList?Array.from(e):e}function re(e){let t=e.trim().split(/\s+/),[n,r]=t.length>1?t:/%$/.test(t[0])?["top",t[0]]:[t[0],"bottom"];return [n,/%$/.test(r)?parseFloat(r):r==="top"?0:r==="center"?50:100]}function Pe(e,t){let[n,r]=re(e);return `${n} ${+Math.max(0,r-t).toFixed(3)}%`}function Ke(e){let t=NaN,n=0,r=0;return e.map(a=>{let s=a.getBoundingClientRect();return Math.abs(s.top-t)<=Math.max(8,Math.min(s.height,n||s.height)/2)?r++:(t=s.top,n=s.height,r=0),r})}var Re={destroy:()=>{}};function lt(e,t={}){if(typeof window>"u")return Re;let n=Qe(e);if(!n.length)return Y("scrollReveal: no elements found:",e),Re;let{preset:r="fadeUp",from:a,stagger:s=.15,easing:m="ease-out",once:l=true,trigger:u,onEnter:c,onLeave:p}=t,g={...qe[r],...a},M=Ue(g),I=u?.start??"top 88%",T=u?.end??"top 53%",P=Math.abs(re(I)[1]-re(T)[1]),C=Math.min(Math.max(s,0),1)*P,F=C>0?Ke(n):n.map(()=>0),O=n.map((R,_)=>{let w=Math.min(F[_]*C,P);return Te(R,{props:M,easing:m,once:l,native:false,trigger:w>0?{start:Pe(I,w),end:Pe(T,w)}:{start:I,end:T},onEnter:_===0?c:void 0,onLeave:_===n.length-1?p:void 0})});return {destroy(){O.forEach(R=>R.destroy());}}}export{lt as scrollReveal};

package/dist/solid/index.d.mts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/solid/index.d.ts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/svelte/index.d.mts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/svelte/index.d.ts

@@ -101,8 +101,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/vue/index.d.mts

@@ -103,8 +103,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/dist/vue/index.d.ts

@@ -103,8 +103,10 @@ interface ScrollDrawOptions {
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
-     * the browser supports it. This runs the draw entirely on the compositor —
-     * zero per-frame JavaScript, zero scroll/resize listeners.
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
      *
      * Falls back to the JS engine automatically when unsupported or when the
      * config uses a feature native CSS can't express (callbacks, stagger, morph,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.15.2",
+  "version": "2.15.3",
   "description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
   "keywords": [
     "svg",