use-scroll-animate 2.9.0 → 3.1.0

package/dist/react.js

@@ -1,5 +1,5 @@
-import { c as createScrollAnimate } from './chunks/core-J_KM443q.js';
-import { s as staggerChildren } from './chunks/stagger-CGF18oNs.js';
+import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
+import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
 
 /**
  * use-scroll-animate - React Integration
@@ -7,7 +7,7 @@ import { s as staggerChildren } from './chunks/stagger-CGF18oNs.js';
  * `useScrollStagger({ observeChildren: true })` also animates children added later.
  *
  * Both hooks are thin wrappers around the core engine, so they share its
- * behaviour: `once`, `offset`, custom easing functions, parallax,
+ * behaviour: `once`, `offset`, custom easing functions, progress,
  * `prefers-reduced-motion` support, and proper cleanup on unmount.
  */
 const CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'];

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":["../src/react.ts"],"sourcesContent":["/**\n * use-scroll-animate - React Integration\n * Provides useScrollAnimate and useScrollStagger hooks for React applications.\n * `useScrollStagger({ observeChildren: true })` also animates children added later.\n *\n * Both hooks are thin wrappers around the core engine, so they share its\n * behaviour: `once`, `offset`, custom easing functions, parallax,\n * `prefers-reduced-motion` support, and proper cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\ntype ReactRef<T> = { current: T | null };\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/**\n * Wrap the callbacks that exist at mount so they always call the latest\n * version from the most recent render (avoids stale closures without\n * re-creating observers on every render).\n * @internal\n */\nexport function withLatestCallbacks(latest: ReactRef<AnimateOptions>): AnimateOptions {\n  const initial = latest.current || {};\n  const opts: AnimateOptions = { ...initial };\n  CALLBACKS.forEach((name) => {\n    if (typeof initial[name] === 'function') {\n      (opts as any)[name] = (...args: unknown[]) => (latest.current?.[name] as any)?.(...args);\n    }\n  });\n  return opts;\n}\n\nexport function createReactHooks(React: {\n  useRef: <T>(initial: T | null) => ReactRef<T>;\n  useEffect: (effect: () => (() => void) | void, deps?: unknown[]) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const ref = React.useRef<Element>(null);\n    const optionsRef = React.useRef<AnimateOptions>(options);\n    optionsRef.current = options;\n\n    React.useEffect(() => {\n      const el = ref.current;\n      if (!el) return;\n      const sa = getInstance();\n      sa.observe(el, withLatestCallbacks(optionsRef));\n      return () => sa.unobserve(el);\n    }, []);\n\n    return ref;\n  }\n\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const ref = React.useRef<Element>(null);\n    const optionsRef = React.useRef<AnimateOptions>(options);\n    optionsRef.current = options;\n\n    React.useEffect(() => {\n      const container = ref.current;\n      if (!container) return;\n      return staggerChildren(container, withLatestCallbacks(optionsRef) as StaggerOptions, getInstance());\n    }, []);\n\n    return ref;\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAQH,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAU;AAExF;;;;;AAKG;AACG,SAAU,mBAAmB,CAAC,MAAgC,EAAA;AAClE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE;AACpC,IAAA,MAAM,IAAI,GAAmB,EAAE,GAAG,OAAO,EAAE;AAC3C,IAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;QACzB,IAAI,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,UAAU,EAAE;YACtC,IAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAe,KAAM,MAAM,CAAC,OAAO,GAAG,IAAI,CAAS,GAAG,GAAG,IAAI,CAAC;QAC1F;AACF,IAAA,CAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;AAEM,SAAU,gBAAgB,CAAC,KAGhC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAU,IAAI,CAAC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,OAAO,CAAC;AACxD,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO;AACtB,YAAA,IAAI,CAAC,EAAE;gBAAE;AACT,YAAA,MAAM,EAAE,GAAG,WAAW,EAAE;YACxB,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;YAC/C,OAAO,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;QAC/B,CAAC,EAAE,EAAE,CAAC;AAEN,QAAA,OAAO,GAAG;IACZ;IAEA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAU,IAAI,CAAC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,OAAO,CAAC;AACxD,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO;AAC7B,YAAA,IAAI,CAAC,SAAS;gBAAE;AAChB,YAAA,OAAO,eAAe,CAAC,SAAS,EAAE,mBAAmB,CAAC,UAAU,CAAmB,EAAE,WAAW,EAAE,CAAC;QACrG,CAAC,EAAE,EAAE,CAAC;AAEN,QAAA,OAAO,GAAG;IACZ;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}
+{"version":3,"file":"react.js","sources":["../src/react.ts"],"sourcesContent":["/**\n * use-scroll-animate - React Integration\n * Provides useScrollAnimate and useScrollStagger hooks for React applications.\n * `useScrollStagger({ observeChildren: true })` also animates children added later.\n *\n * Both hooks are thin wrappers around the core engine, so they share its\n * behaviour: `once`, `offset`, custom easing functions, progress,\n * `prefers-reduced-motion` support, and proper cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\ntype ReactRef<T> = { current: T | null };\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/**\n * Wrap the callbacks that exist at mount so they always call the latest\n * version from the most recent render (avoids stale closures without\n * re-creating observers on every render).\n * @internal\n */\nexport function withLatestCallbacks(latest: ReactRef<AnimateOptions>): AnimateOptions {\n  const initial = latest.current || {};\n  const opts: AnimateOptions = { ...initial };\n  CALLBACKS.forEach((name) => {\n    if (typeof initial[name] === 'function') {\n      (opts as any)[name] = (...args: unknown[]) => (latest.current?.[name] as any)?.(...args);\n    }\n  });\n  return opts;\n}\n\nexport function createReactHooks(React: {\n  useRef: <T>(initial: T | null) => ReactRef<T>;\n  useEffect: (effect: () => (() => void) | void, deps?: unknown[]) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const ref = React.useRef<Element>(null);\n    const optionsRef = React.useRef<AnimateOptions>(options);\n    optionsRef.current = options;\n\n    React.useEffect(() => {\n      const el = ref.current;\n      if (!el) return;\n      const sa = getInstance();\n      sa.observe(el, withLatestCallbacks(optionsRef));\n      return () => sa.unobserve(el);\n    }, []);\n\n    return ref;\n  }\n\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const ref = React.useRef<Element>(null);\n    const optionsRef = React.useRef<AnimateOptions>(options);\n    optionsRef.current = options;\n\n    React.useEffect(() => {\n      const container = ref.current;\n      if (!container) return;\n      return staggerChildren(container, withLatestCallbacks(optionsRef) as StaggerOptions, getInstance());\n    }, []);\n\n    return ref;\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAQH,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAU;AAExF;;;;;AAKG;AACG,SAAU,mBAAmB,CAAC,MAAgC,EAAA;AAClE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE;AACpC,IAAA,MAAM,IAAI,GAAmB,EAAE,GAAG,OAAO,EAAE;AAC3C,IAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;QACzB,IAAI,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,UAAU,EAAE;YACtC,IAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAe,KAAM,MAAM,CAAC,OAAO,GAAG,IAAI,CAAS,GAAG,GAAG,IAAI,CAAC;QAC1F;AACF,IAAA,CAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;AAEM,SAAU,gBAAgB,CAAC,KAGhC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAU,IAAI,CAAC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,OAAO,CAAC;AACxD,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO;AACtB,YAAA,IAAI,CAAC,EAAE;gBAAE;AACT,YAAA,MAAM,EAAE,GAAG,WAAW,EAAE;YACxB,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;YAC/C,OAAO,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;QAC/B,CAAC,EAAE,EAAE,CAAC;AAEN,QAAA,OAAO,GAAG;IACZ;IAEA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAU,IAAI,CAAC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,OAAO,CAAC;AACxD,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO;AAC7B,YAAA,IAAI,CAAC,SAAS;gBAAE;AAChB,YAAA,OAAO,eAAe,CAAC,SAAS,EAAE,mBAAmB,CAAC,UAAU,CAAmB,EAAE,WAAW,EAAE,CAAC;QACrG,CAAC,EAAE,EAAE,CAAC;AAEN,QAAA,OAAO,GAAG;IACZ;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}

package/dist/solid.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var solidJs = require('solid-js');
-var core = require('./chunks/core-C1cEwjJj.cjs');
-var stagger = require('./chunks/stagger-DtKKS6GP.cjs');
+var core = require('./chunks/core-qpECfEkb.cjs');
+var stagger = require('./chunks/stagger-CLc3j58T.cjs');
 
 /**
  * use-scroll-animate - Solid integration

package/dist/solid.d.cts

@@ -5,7 +5,7 @@
 /** Built-in animation presets */
 type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -141,7 +126,7 @@ interface ScrollAnimateConfig {
     root?: Element | null;
     /**
      * Drop `once` elements from the registry as soon as their entrance animation
-     * has been triggered (unless they still need parallax/onProgress), so they can
+     * has been triggered (unless they still need onProgress/progressVar), so they can
      * be garbage-collected. They are remembered in a WeakSet, so `init()`/`observe()`
      * never re-hide or replay them. (default: true)
      */

package/dist/solid.d.ts

@@ -5,7 +5,7 @@
 /** Built-in animation presets */
 type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -141,7 +126,7 @@ interface ScrollAnimateConfig {
     root?: Element | null;
     /**
      * Drop `once` elements from the registry as soon as their entrance animation
-     * has been triggered (unless they still need parallax/onProgress), so they can
+     * has been triggered (unless they still need onProgress/progressVar), so they can
      * be garbage-collected. They are remembered in a WeakSet, so `init()`/`observe()`
      * never re-hide or replay them. (default: true)
      */

package/dist/solid.js

@@ -1,6 +1,6 @@
 import { onMount, onCleanup } from 'solid-js';
-import { c as createScrollAnimate } from './chunks/core-J_KM443q.js';
-import { s as staggerChildren } from './chunks/stagger-CGF18oNs.js';
+import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
+import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
 
 /**
  * use-scroll-animate - Solid integration

package/dist/svelte.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var core = require('./chunks/core-C1cEwjJj.cjs');
-var stagger = require('./chunks/stagger-DtKKS6GP.cjs');
+var core = require('./chunks/core-qpECfEkb.cjs');
+var stagger = require('./chunks/stagger-CLc3j58T.cjs');
 
 /**
  * use-scroll-animate - Svelte integration

package/dist/svelte.d.cts

@@ -5,7 +5,7 @@
 /** Built-in animation presets */
 type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -141,7 +126,7 @@ interface ScrollAnimateConfig {
     root?: Element | null;
     /**
      * Drop `once` elements from the registry as soon as their entrance animation
-     * has been triggered (unless they still need parallax/onProgress), so they can
+     * has been triggered (unless they still need onProgress/progressVar), so they can
      * be garbage-collected. They are remembered in a WeakSet, so `init()`/`observe()`
      * never re-hide or replay them. (default: true)
      */

package/dist/svelte.d.ts

@@ -5,7 +5,7 @@
 /** Built-in animation presets */
 type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -141,7 +126,7 @@ interface ScrollAnimateConfig {
     root?: Element | null;
     /**
      * Drop `once` elements from the registry as soon as their entrance animation
-     * has been triggered (unless they still need parallax/onProgress), so they can
+     * has been triggered (unless they still need onProgress/progressVar), so they can
      * be garbage-collected. They are remembered in a WeakSet, so `init()`/`observe()`
      * never re-hide or replay them. (default: true)
      */

package/dist/svelte.js

@@ -1,5 +1,5 @@
-import { c as createScrollAnimate } from './chunks/core-J_KM443q.js';
-import { s as staggerChildren } from './chunks/stagger-CGF18oNs.js';
+import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
+import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
 
 /**
  * use-scroll-animate - Svelte integration

package/dist/vue.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var core = require('./chunks/core-C1cEwjJj.cjs');
-var stagger = require('./chunks/stagger-DtKKS6GP.cjs');
+var core = require('./chunks/core-qpECfEkb.cjs');
+var stagger = require('./chunks/stagger-CLc3j58T.cjs');
 
 /**
  * use-scroll-animate - Vue 3 Integration
  * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.
  *
  * A thin wrapper around the core engine, so it shares its behaviour: `once`,
- * `offset`, custom easing functions, parallax, `prefers-reduced-motion`
+ * `offset`, custom easing functions, progress, `prefers-reduced-motion`
  * support, and cleanup on unmount.
  */
 /** Support refs on components (`$el`) as well as plain elements. */

package/dist/vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"vue.cjs","sources":["../src/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate - Vue 3 Integration\n * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.\n *\n * A thin wrapper around the core engine, so it shares its behaviour: `once`,\n * `offset`, custom easing functions, parallax, `prefers-reduced-motion`\n * support, and cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\n/** Support refs on components (`$el`) as well as plain elements. */\nfunction unwrap(value: unknown): Element | null {\n  if (value && typeof Element !== 'undefined' && !(value instanceof Element) && (value as any).$el instanceof Element) {\n    return (value as any).$el as Element;\n  }\n  return (value as Element | null) || null;\n}\n\nexport function createVueComposables(Vue: {\n  ref: <T>(value: T | null) => { value: T | null };\n  onMounted: (fn: () => void) => void;\n  onUnmounted: (fn: () => void) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const animateRef = Vue.ref<Element>(null);\n    let el: Element | null = null;\n\n    Vue.onMounted(() => {\n      const target = unwrap(animateRef.value);\n      if (!target) return;\n      el = target;\n      getInstance().observe(el, options);\n    });\n\n    Vue.onUnmounted(() => {\n      if (el) getInstance().unobserve(el);\n      el = null;\n    });\n\n    return { animateRef };\n  }\n\n  /** Stagger the children of `staggerRef`; `observeChildren: true` also animates children added later. */\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const staggerRef = Vue.ref<Element>(null);\n    let stop: (() => void) | undefined;\n\n    Vue.onMounted(() => {\n      const target = unwrap(staggerRef.value);\n      if (target) stop = staggerChildren(target, options, getInstance());\n    });\n\n    Vue.onUnmounted(() => {\n      stop?.();\n      stop = undefined;\n    });\n\n    return { staggerRef };\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":["createScrollAnimate","staggerChildren"],"mappings":";;;;;AAAA;;;;;;;AAOG;AAMH;AACA,SAAS,MAAM,CAAC,KAAc,EAAA;IAC5B,IAAI,KAAK,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,EAAE,KAAK,YAAY,OAAO,CAAC,IAAK,KAAa,CAAC,GAAG,YAAY,OAAO,EAAE;QACnH,OAAQ,KAAa,CAAC,GAAc;IACtC;IACA,OAAQ,KAAwB,IAAI,IAAI;AAC1C;AAEM,SAAU,oBAAoB,CAAC,GAIpC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAGA,wBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;QACzC,IAAI,EAAE,GAAmB,IAAI;AAE7B,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,CAAC,MAAM;gBAAE;YACb,EAAE,GAAG,MAAM;YACX,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC;AACpC,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;AACnB,YAAA,IAAI,EAAE;AAAE,gBAAA,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,EAAE,GAAG,IAAI;AACX,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;;IAGA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;AACzC,QAAA,IAAI,IAA8B;AAElC,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,MAAM;gBAAE,IAAI,GAAGC,uBAAe,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AACpE,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;YACnB,IAAI,IAAI;YACR,IAAI,GAAG,SAAS;AAClB,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}
+{"version":3,"file":"vue.cjs","sources":["../src/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate - Vue 3 Integration\n * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.\n *\n * A thin wrapper around the core engine, so it shares its behaviour: `once`,\n * `offset`, custom easing functions, progress, `prefers-reduced-motion`\n * support, and cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\n/** Support refs on components (`$el`) as well as plain elements. */\nfunction unwrap(value: unknown): Element | null {\n  if (value && typeof Element !== 'undefined' && !(value instanceof Element) && (value as any).$el instanceof Element) {\n    return (value as any).$el as Element;\n  }\n  return (value as Element | null) || null;\n}\n\nexport function createVueComposables(Vue: {\n  ref: <T>(value: T | null) => { value: T | null };\n  onMounted: (fn: () => void) => void;\n  onUnmounted: (fn: () => void) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const animateRef = Vue.ref<Element>(null);\n    let el: Element | null = null;\n\n    Vue.onMounted(() => {\n      const target = unwrap(animateRef.value);\n      if (!target) return;\n      el = target;\n      getInstance().observe(el, options);\n    });\n\n    Vue.onUnmounted(() => {\n      if (el) getInstance().unobserve(el);\n      el = null;\n    });\n\n    return { animateRef };\n  }\n\n  /** Stagger the children of `staggerRef`; `observeChildren: true` also animates children added later. */\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const staggerRef = Vue.ref<Element>(null);\n    let stop: (() => void) | undefined;\n\n    Vue.onMounted(() => {\n      const target = unwrap(staggerRef.value);\n      if (target) stop = staggerChildren(target, options, getInstance());\n    });\n\n    Vue.onUnmounted(() => {\n      stop?.();\n      stop = undefined;\n    });\n\n    return { staggerRef };\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":["createScrollAnimate","staggerChildren"],"mappings":";;;;;AAAA;;;;;;;AAOG;AAMH;AACA,SAAS,MAAM,CAAC,KAAc,EAAA;IAC5B,IAAI,KAAK,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,EAAE,KAAK,YAAY,OAAO,CAAC,IAAK,KAAa,CAAC,GAAG,YAAY,OAAO,EAAE;QACnH,OAAQ,KAAa,CAAC,GAAc;IACtC;IACA,OAAQ,KAAwB,IAAI,IAAI;AAC1C;AAEM,SAAU,oBAAoB,CAAC,GAIpC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAGA,wBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;QACzC,IAAI,EAAE,GAAmB,IAAI;AAE7B,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,CAAC,MAAM;gBAAE;YACb,EAAE,GAAG,MAAM;YACX,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC;AACpC,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;AACnB,YAAA,IAAI,EAAE;AAAE,gBAAA,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,EAAE,GAAG,IAAI;AACX,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;;IAGA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;AACzC,QAAA,IAAI,IAA8B;AAElC,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,MAAM;gBAAE,IAAI,GAAGC,uBAAe,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AACpE,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;YACnB,IAAI,IAAI;YACR,IAAI,GAAG,SAAS;AAClB,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}

package/dist/vue.d.cts

@@ -5,7 +5,7 @@
 /** Built-in animation presets */
 type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -133,7 +118,7 @@ interface StaggerOptions extends AnimateOptions {
  * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.
  *
  * A thin wrapper around the core engine, so it shares its behaviour: `once`,
- * `offset`, custom easing functions, parallax, `prefers-reduced-motion`
+ * `offset`, custom easing functions, progress, `prefers-reduced-motion`
  * support, and cleanup on unmount.
  */
 

package/dist/vue.d.ts

@@ -5,7 +5,7 @@
 /** Built-in animation presets */
 type AnimationPreset = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'bounce' | 'rotate-in' | 'blur-in' | 'skew-in' | 'scale-x' | 'scale-y' | 'shimmer' | 'pulse' | 'swing' | 'scale-up' | 'blur-in-up' | 'flip-up' | 'flip-down' | 'rotate-left' | 'rotate-right' | 'clip-up' | 'clip-down' | 'clip-left' | 'clip-right' | 'clip-circle';
 /**
- * How `onProgress` (and parallax) progress is measured.
+ * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
  * - `'scroll'`: true scroll progress, 0 when the element's top touches the bottom of the
  *   viewport and 1 when its bottom leaves the top. Works for elements taller than the screen.
@@ -33,19 +33,6 @@ interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
 }
-/** Parallax configuration */
-interface ParallaxOptions {
-    /** Movement on X axis (e.g., '100px', '20%') */
-    x?: string | number;
-    /** Movement on Y axis (e.g., '100px', '20%') */
-    y?: string | number;
-    /** Rotation in degrees */
-    rotate?: number;
-    /** Scale factor */
-    scale?: number;
-    /** Speed multiplier (default: 1) */
-    speed?: number;
-}
 /** Per-element animation options */
 interface AnimateOptions {
     /** Animation preset name, array of presets, or custom animation object */
@@ -68,8 +55,6 @@ interface AnimateOptions {
     offset?: number;
     /** Stagger delay for child elements in ms (default: 0) */
     stagger?: number;
-    /** Parallax effect configuration */
-    parallax?: ParallaxOptions;
     /** Callback fired when animation starts */
     onStart?: (element: Element) => void;
     /** Callback fired when animation completes */
@@ -80,7 +65,7 @@ interface AnimateOptions {
     onLeave?: (element: Element) => void;
     /** Callback fired with scroll progress (0 to 1) */
     onProgress?: (element: Element, progress: number) => void;
-    /** How progress for `onProgress`/parallax is measured (default: 'ratio') */
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
     progressMode?: ProgressMode;
     /**
      * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
@@ -133,7 +118,7 @@ interface StaggerOptions extends AnimateOptions {
  * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.
  *
  * A thin wrapper around the core engine, so it shares its behaviour: `once`,
- * `offset`, custom easing functions, parallax, `prefers-reduced-motion`
+ * `offset`, custom easing functions, progress, `prefers-reduced-motion`
  * support, and cleanup on unmount.
  */
 

package/dist/vue.js

@@ -1,12 +1,12 @@
-import { c as createScrollAnimate } from './chunks/core-J_KM443q.js';
-import { s as staggerChildren } from './chunks/stagger-CGF18oNs.js';
+import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
+import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
 
 /**
  * use-scroll-animate - Vue 3 Integration
  * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.
  *
  * A thin wrapper around the core engine, so it shares its behaviour: `once`,
- * `offset`, custom easing functions, parallax, `prefers-reduced-motion`
+ * `offset`, custom easing functions, progress, `prefers-reduced-motion`
  * support, and cleanup on unmount.
  */
 /** Support refs on components (`$el`) as well as plain elements. */

package/dist/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","sources":["../src/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate - Vue 3 Integration\n * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.\n *\n * A thin wrapper around the core engine, so it shares its behaviour: `once`,\n * `offset`, custom easing functions, parallax, `prefers-reduced-motion`\n * support, and cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\n/** Support refs on components (`$el`) as well as plain elements. */\nfunction unwrap(value: unknown): Element | null {\n  if (value && typeof Element !== 'undefined' && !(value instanceof Element) && (value as any).$el instanceof Element) {\n    return (value as any).$el as Element;\n  }\n  return (value as Element | null) || null;\n}\n\nexport function createVueComposables(Vue: {\n  ref: <T>(value: T | null) => { value: T | null };\n  onMounted: (fn: () => void) => void;\n  onUnmounted: (fn: () => void) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const animateRef = Vue.ref<Element>(null);\n    let el: Element | null = null;\n\n    Vue.onMounted(() => {\n      const target = unwrap(animateRef.value);\n      if (!target) return;\n      el = target;\n      getInstance().observe(el, options);\n    });\n\n    Vue.onUnmounted(() => {\n      if (el) getInstance().unobserve(el);\n      el = null;\n    });\n\n    return { animateRef };\n  }\n\n  /** Stagger the children of `staggerRef`; `observeChildren: true` also animates children added later. */\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const staggerRef = Vue.ref<Element>(null);\n    let stop: (() => void) | undefined;\n\n    Vue.onMounted(() => {\n      const target = unwrap(staggerRef.value);\n      if (target) stop = staggerChildren(target, options, getInstance());\n    });\n\n    Vue.onUnmounted(() => {\n      stop?.();\n      stop = undefined;\n    });\n\n    return { staggerRef };\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAMH;AACA,SAAS,MAAM,CAAC,KAAc,EAAA;IAC5B,IAAI,KAAK,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,EAAE,KAAK,YAAY,OAAO,CAAC,IAAK,KAAa,CAAC,GAAG,YAAY,OAAO,EAAE;QACnH,OAAQ,KAAa,CAAC,GAAc;IACtC;IACA,OAAQ,KAAwB,IAAI,IAAI;AAC1C;AAEM,SAAU,oBAAoB,CAAC,GAIpC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;QACzC,IAAI,EAAE,GAAmB,IAAI;AAE7B,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,CAAC,MAAM;gBAAE;YACb,EAAE,GAAG,MAAM;YACX,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC;AACpC,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;AACnB,YAAA,IAAI,EAAE;AAAE,gBAAA,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,EAAE,GAAG,IAAI;AACX,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;;IAGA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;AACzC,QAAA,IAAI,IAA8B;AAElC,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,MAAM;gBAAE,IAAI,GAAG,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AACpE,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;YACnB,IAAI,IAAI;YACR,IAAI,GAAG,SAAS;AAClB,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}
+{"version":3,"file":"vue.js","sources":["../src/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate - Vue 3 Integration\n * Provides useScrollAnimate and useScrollStagger composables for Vue 3 applications.\n *\n * A thin wrapper around the core engine, so it shares its behaviour: `once`,\n * `offset`, custom easing functions, progress, `prefers-reduced-motion`\n * support, and cleanup on unmount.\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\n/** Support refs on components (`$el`) as well as plain elements. */\nfunction unwrap(value: unknown): Element | null {\n  if (value && typeof Element !== 'undefined' && !(value instanceof Element) && (value as any).$el instanceof Element) {\n    return (value as any).$el as Element;\n  }\n  return (value as Element | null) || null;\n}\n\nexport function createVueComposables(Vue: {\n  ref: <T>(value: T | null) => { value: T | null };\n  onMounted: (fn: () => void) => void;\n  onUnmounted: (fn: () => void) => void;\n}) {\n  // Created lazily on the client so importing on the server is side-effect free.\n  let instance: ScrollAnimateInstance | null = null;\n  const getInstance = () => instance || (instance = createScrollAnimate());\n\n  function useScrollAnimate(options: AnimateOptions = {}) {\n    const animateRef = Vue.ref<Element>(null);\n    let el: Element | null = null;\n\n    Vue.onMounted(() => {\n      const target = unwrap(animateRef.value);\n      if (!target) return;\n      el = target;\n      getInstance().observe(el, options);\n    });\n\n    Vue.onUnmounted(() => {\n      if (el) getInstance().unobserve(el);\n      el = null;\n    });\n\n    return { animateRef };\n  }\n\n  /** Stagger the children of `staggerRef`; `observeChildren: true` also animates children added later. */\n  function useScrollStagger(options: StaggerOptions = {}) {\n    const staggerRef = Vue.ref<Element>(null);\n    let stop: (() => void) | undefined;\n\n    Vue.onMounted(() => {\n      const target = unwrap(staggerRef.value);\n      if (target) stop = staggerChildren(target, options, getInstance());\n    });\n\n    Vue.onUnmounted(() => {\n      stop?.();\n      stop = undefined;\n    });\n\n    return { staggerRef };\n  }\n\n  return { useScrollAnimate, useScrollStagger };\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAMH;AACA,SAAS,MAAM,CAAC,KAAc,EAAA;IAC5B,IAAI,KAAK,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,EAAE,KAAK,YAAY,OAAO,CAAC,IAAK,KAAa,CAAC,GAAG,YAAY,OAAO,EAAE;QACnH,OAAQ,KAAa,CAAC,GAAc;IACtC;IACA,OAAQ,KAAwB,IAAI,IAAI;AAC1C;AAEM,SAAU,oBAAoB,CAAC,GAIpC,EAAA;;IAEC,IAAI,QAAQ,GAAiC,IAAI;AACjD,IAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,KAAK,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAExE,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;QACzC,IAAI,EAAE,GAAmB,IAAI;AAE7B,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,CAAC,MAAM;gBAAE;YACb,EAAE,GAAG,MAAM;YACX,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC;AACpC,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;AACnB,YAAA,IAAI,EAAE;AAAE,gBAAA,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,EAAE,GAAG,IAAI;AACX,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;;IAGA,SAAS,gBAAgB,CAAC,OAAA,GAA0B,EAAE,EAAA;QACpD,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAU,IAAI,CAAC;AACzC,QAAA,IAAI,IAA8B;AAElC,QAAA,GAAG,CAAC,SAAS,CAAC,MAAK;YACjB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,MAAM;gBAAE,IAAI,GAAG,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AACpE,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC,WAAW,CAAC,MAAK;YACnB,IAAI,IAAI;YACR,IAAI,GAAG,SAAS;AAClB,QAAA,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,EAAE;IACvB;AAEA,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE;AAC/C;;;;"}

package/docs/API.md

@@ -74,7 +74,6 @@ const sa = createScrollAnimate({ defaultDuration: 800, defaultEngine: 'auto' });
 | `stagger` | `number` (ms) | `0` | Extra delay per sibling revealed in the same batch |
 | `engine` | `'auto' \| 'js' \| 'css'` | `'auto'` | `'auto'`: native scroll-driven timeline when supported, else JS — and JS when the element sets `duration`/`delay`/`offset`/`stagger`; `'css'`: native whenever supported; `'js'`: always time-based |
 | `viewRange` | `[string, string]` | `['entry 0%', 'entry 100%']` | Native engine: view-timeline range of the entrance |
-| `parallax` | `{ x?, y?, rotate?, scale?, speed? }` | `{}` | Legacy transform-based parallax (writes `transform`); see also `parallax()` |
 | `progressMode` | `'ratio' \| 'scroll'` | `'ratio'` | `onProgress` source: visible ratio, or true scroll progress (0 = top enters at the bottom, 1 = bottom leaves at the top) |
 | `progressVar` | `string` | – | CSS custom property that receives the progress |
 | `onEnter` / `onLeave` | `(el) => void` | – | Viewport entry / exit |
@@ -85,7 +84,7 @@ const sa = createScrollAnimate({ defaultDuration: 800, defaultEngine: 'auto' });
 
 Mark elements with `data-sa` and call `init()` / `watch()`. Every option has an attribute:
 
-`data-sa-animation` (comma-separated to combine), `data-sa-duration`, `data-sa-delay`, `data-sa-easing` (name, CSS string or JSON array), `data-sa-threshold` (comma-separated list allowed), `data-sa-root-margin`, `data-sa-offset`, `data-sa-once`, `data-sa-repeat`, `data-sa-exit` (bare = `true`, or preset name), `data-sa-stagger`, `data-sa-engine`, `data-sa-view-range` (`"entry 0%, cover 40%"`), `data-sa-progress` (`"scroll"`), `data-sa-progress-var` (bare = `--sa-progress`), `data-sa-parallax-x|y|rotate|scale|speed`.
+`data-sa-animation` (comma-separated to combine), `data-sa-duration`, `data-sa-delay`, `data-sa-easing` (name, CSS string or JSON array), `data-sa-threshold` (comma-separated list allowed), `data-sa-root-margin`, `data-sa-offset`, `data-sa-once`, `data-sa-repeat`, `data-sa-exit` (bare = `true`, or preset name), `data-sa-stagger`, `data-sa-engine`, `data-sa-view-range` (`"entry 0%, cover 40%"`), `data-sa-progress` (`"scroll"`), `data-sa-progress-var` (bare = `--sa-progress`).
 
 Boolean attributes are true when present unless their value is `"false"`.
 

package/docs/components.md

@@ -1,6 +1,6 @@
 # Animated components (`use-scroll-animate/components`)
 
-Since **v2.2** the package ships **30 animated UI components** as standard Web Components (`<usa-*>` custom elements) plus three transition helpers. They are built only on Custom Elements, CSS and the Web Animations API, so the same code runs:
+Since **v2.2** (now **v3**) the package ships **30 animated UI components** as standard Web Components (`<usa-*>` custom elements) plus three transition helpers. They are built only on Custom Elements, CSS and the Web Animations API, so the same code runs:
 
 - in any modern browser (Chrome, Edge, Firefox, Safari), and with React, Vue, Svelte, Solid, Angular or no framework;
 - in **Windows desktop software** that renders its UI with a web view — Electron, Tauri (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs. See **[Windows apps guide](./windows-apps.md)**.
@@ -40,7 +40,7 @@ defineTypewriter();
 No build step (registers every `<usa-*>` and exposes the API as `window.UsaComponents`):
 
 ```html
-<script src="https://unpkg.com/use-scroll-animate@2/dist/components.umd.js"></script>
+<script src="https://unpkg.com/use-scroll-animate@3/dist/components.umd.js"></script>
 <usa-typewriter words="Hello, Windows.|Hello, web."></usa-typewriter>
 <script>UsaComponents.toast('Ready', { type: 'success' });</script>
 ```
@@ -157,7 +157,7 @@ Presets (`SPRING_PRESETS`): `default` (170/26), `gentle` (120/14), `wobbly` (180
 
 ### 10. UI components & variants — `components/ui`
 
-**Style variants.** `variant="minimal | neon | glass | brutalist | fluent | material"` works on every `<usa-*>` element (or `data-usa-variant` on an ancestor, or `setVariant('fluent')` page-wide). Variants only set design tokens — `--usa-accent`, `--usa-accent-text`, `--usa-surface`, `--usa-text`, `--usa-radius`, `--usa-border`, `--usa-shadow`, `--usa-blur`, `--usa-font` — which you can also set yourself. (Since 2.9 `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and `<usa-acrylic>` pick their kind with `kind`; using `variant` for that is deprecated and stops working in 3.0.)
+**Style variants.** `variant="minimal | neon | glass | brutalist | fluent | material"` works on every `<usa-*>` element (or `data-usa-variant` on an ancestor, or `setVariant('fluent')` page-wide). Variants only set design tokens — `--usa-accent`, `--usa-accent-text`, `--usa-surface`, `--usa-text`, `--usa-radius`, `--usa-border`, `--usa-shadow`, `--usa-blur`, `--usa-font` — which you can also set yourself. (`<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and `<usa-acrylic>` pick their kind with `kind`; since 3.0 `variant` is only a style variant everywhere.)
 
 | Element | What it does | Key attributes | JS API / events |
 |---|---|---|---|
@@ -231,6 +231,15 @@ Every component reads these CSS custom properties (set them on `:root`, any ance
 
 See [frameworks-ssr.md](./frameworks-ssr.md) and [accessibility.md](./accessibility.md).
 
+### v3.1 Timeline & choreography (`components/timeline`)
+
+| Element / API | What it does | Key options |
+|---|---|---|
+| `timeline(opts)` | One playhead for many animations | `.to(target, frames \| preset, { at, duration, easing, stagger })`, `.label()`, `.call()`, `play()`, `reverse()`, `seek()`, `progress()`, `scrub(el, { smooth })` |
+| `<usa-timeline>` | `data-tl` children become steps | `trigger` (`view` · `click` · `manual`), `scrub`, `overlap`, `duration`, `stagger`, `repeat`; child `data-at`, `data-duration`, `data-label` |
+
+Positions: `'>'` chain (default) · `'<'` with previous · `'-=200'` overlap · `'+=100'` gap · `'<+=50'` · `'label+=100'` · ms.
+
 ## Frameworks
 
 Custom elements work in every framework. Register once (e.g. in your entry file), then use the tags.

package/docs/upgrading-3.md

@@ -8,6 +8,7 @@
 | `spinner.variant` property | `spinner.kind` |
 | `observe(el, { parallax: { y: 80 } })`, `data-sa-parallax-x/-y/-rotate/-scale/-speed` | `parallax(el, { speed: 0.3 })` (writes `--sa-parallax`, use it in CSS: `transform: translateY(calc(var(--sa-parallax) * -80px))`) or `progressVar: '--p'` |
 | `ParallaxOptions` type | `ParallaxHelperOptions` |
+| `data-variant` on spinner / check / dialog (internal styling hook) | `data-kind` |
 | Node 18 for SSR imports | Node ≥ 20 (`engines`) |
 
 Search & replace:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-scroll-animate",
-  "version": "2.9.0",
+  "version": "3.1.0",
   "description": "A lightweight, high-performance, dependency-free scroll animation library and animated UI components (Web Components) for the web and Windows web-view apps.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -188,6 +188,16 @@
         "default": "./dist/components/page.cjs"
       }
     },
+    "./components/timeline": {
+      "import": {
+        "types": "./dist/components/timeline.d.ts",
+        "default": "./dist/components/timeline.js"
+      },
+      "require": {
+        "types": "./dist/components/timeline.d.cts",
+        "default": "./dist/components/timeline.cjs"
+      }
+    },
     "./components/react": {
       "import": {
         "types": "./dist/components/react.d.ts",
@@ -240,6 +250,7 @@
     "./components/click.css": "./dist/components/click.css",
     "./components/ui.css": "./dist/components/ui.css",
     "./components/page.css": "./dist/components/page.css",
+    "./components/timeline.css": "./dist/components/timeline.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -260,7 +271,7 @@
     "typecheck": "tsc --noEmit -p .",
     "test": "vitest run",
     "check:exports": "node scripts/check-exports.mjs",
-    "lint:package": "publint && attw --pack . --profile node16 --exclude-entrypoints ./components.css ./components/reveal.css ./components/text.css ./components/interaction.css ./components/feedback.css ./components/background.css ./components/transitions.css ./components/physics.css ./components/cards.css ./components/click.css ./components/ui.css ./components/page.css",
+    "lint:package": "publint && attw --pack . --profile node16 --exclude-entrypoints ./components.css ./components/reveal.css ./components/text.css ./components/interaction.css ./components/feedback.css ./components/background.css ./components/transitions.css ./components/physics.css ./components/cards.css ./components/click.css ./components/ui.css ./components/page.css ./components/timeline.css",
     "size": "node scripts/size.mjs",
     "prepublishOnly": "npm run typecheck && npm test && npm run build && npm run check:exports",
     "size:check": "node scripts/size.mjs --check",
@@ -332,6 +343,6 @@
     }
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }