use-scroll-animate 2.8.0 → 3.0.0

package/dist/react.js

@@ -1,5 +1,5 @@
-import { c as createScrollAnimate } from './chunks/core-BP-a1iNc.js';
-import { s as staggerChildren } from './chunks/stagger-DTv_WiUQ.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-DTv_WiUQ.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-B_J4rXbC.cjs');
-var stagger = require('./chunks/stagger-DHw0ExuR.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-BP-a1iNc.js';
-import { s as staggerChildren } from './chunks/stagger-DTv_WiUQ.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-B_J4rXbC.cjs');
-var stagger = require('./chunks/stagger-DHw0ExuR.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-BP-a1iNc.js';
-import { s as staggerChildren } from './chunks/stagger-DTv_WiUQ.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-B_J4rXbC.cjs');
-var stagger = require('./chunks/stagger-DHw0ExuR.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-BP-a1iNc.js';
-import { s as staggerChildren } from './chunks/stagger-DTv_WiUQ.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/accessibility.md

@@ -0,0 +1,32 @@
+# Accessibility (`use-scroll-animate/components`)
+
+Audited in v2.9 (automated sweep in `test/components-a11y-frameworks.test.ts` + per-component tests).
+
+## Motion
+- Every `<usa-*>` element honours **`prefers-reduced-motion: reduce`**: entrances fade or appear, loops/particles/cursors stop, springs jump to their target, page transitions update instantly. Override per app with `configureComponents({ reducedMotion: 'reduce' | 'no-preference' | 'user' })`.
+- **Global motion intensity** (v2.7): `setMotionIntensity('off' | 'low' | 'normal' | 'high', persist)` or let users choose with `<usa-motion-switch>`. `off` behaves exactly like reduced motion; `low` shortens every animation to 60 %.
+- No component flashes more than 3×/s; glitch and grain effects are disabled under reduced motion.
+
+## Keyboard
+| Component | Keys |
+|---|---|
+| `<usa-toggle>`, `<usa-checkbox>`, `<usa-like>` | Space / Enter |
+| `<usa-hold>` | hold Space / Enter |
+| `<usa-slider>` | ←/→/↑/↓, PageUp/PageDown, Home/End |
+| `<usa-rating>` | ←/→, number keys, Home/End |
+| `<usa-tabs>` | ←/→/↑/↓, Home/End (roving tabindex) |
+| `<usa-draggable>` | arrows (by `step` / `snap`), Home / Esc resets |
+| `<usa-card-stack>` | ← / → swipe |
+| `<usa-carousel-3d>` | ← / → |
+| `<usa-fullpage>` | PageUp/PageDown, ↑/↓, Space, Home/End |
+| `<usa-card effect="flip" trigger="click">`, `effect="expand"` | Enter / Space; Esc collapses |
+| `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-popover>`, `<usa-fab>`, `<usa-tooltip>`, `<usa-dialog>` | Esc closes, focus returns to the trigger |
+| `<usa-double-tap>` | `L` |
+
+## Roles & states
+`switch` (toggle), `checkbox` (+ `aria-checked="mixed"`), `slider` (slider, rating; `aria-valuenow/-text`), `tablist`/`tab`/`tabpanel`, `dialog` + `aria-modal` (drawer, sheet, dialog, popover), `button` + `aria-pressed` (like, click-flip card, icon-morph toggle) / `aria-expanded` (fab, popover, expand card), `progressbar` (progress, loading bar, scroll progress), `status` live regions (toasts, submit button, pull-to-refresh, badge), `radiogroup` (motion switch), `aria-busy` while loading (submit, pull-refresh, auto-skeleton, splash).
+
+Animated text (`<usa-split-text>`, `<usa-typewriter>`, `<usa-wave-text>`, `<usa-handwriting>`, `<usa-scroll-highlight>` …) renders an `aria-hidden` animated copy plus a visually hidden plain copy. Decorative layers (`<usa-cursor>`, `<usa-ambient>`, particles, sheens, goo) are `aria-hidden` and never take pointer events.
+
+## Transparency & contrast
+Glass, acrylic and Fluent materials fall back to solid surfaces under `prefers-reduced-transparency: reduce` and `forced-colors: active`.