use-scroll-animate 6.0.1 → 6.1.0

package/dist/svelte.d.cts

@@ -2,8 +2,14 @@
  * use-scroll-animate - Core Type Definitions
  * A lightweight, high-performance scroll animation library
  */
-/** 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';
+/** The 33 core presets (always available in `PRESETS`). */
+type CorePreset = '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';
+/**
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
+ * `registerPresets(EXTENDED_PRESETS)`).
+ */
+type AnimationPreset = CorePreset | ExtendedPreset;
 /**
  * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,16 +28,24 @@ type ProgressMode = 'ratio' | 'scroll';
  *   since those only mean something for a time-based animation.
  */
 type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
+type ExtendedPreset = 'fade-in-up-sm' | 'fade-in-down-sm' | 'fade-in-left-sm' | 'fade-in-right-sm' | 'fade-in-up-lg' | 'fade-in-down-lg' | 'fade-in-left-lg' | 'fade-in-right-lg' | 'fade-in-up-left' | 'fade-in-up-right' | 'fade-in-down-left' | 'fade-in-down-right' | 'fade-in-scale' | 'fade-in-half' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'zoom-in-big' | 'zoom-out-big' | 'zoom-bounce' | 'zoom-in-rotate' | 'scale-x-left' | 'scale-x-right' | 'scale-y-top' | 'scale-y-bottom' | 'stretch-x' | 'stretch-y' | 'flip-x-reverse' | 'flip-y-reverse' | 'flip-y-full' | 'flip-diagonal' | 'flip-diagonal-reverse' | 'flip-left' | 'flip-right' | 'unfold-down' | 'unfold-up' | 'door-open-left' | 'door-open-right' | 'fold-in' | 'flip-x-bounce' | 'flip-y-bounce' | 'swing-in-top' | 'swing-in-bottom' | 'swing-in-left' | 'swing-in-right' | 'slide-up-spring' | 'slide-down-spring' | 'slide-left-spring' | 'slide-right-spring' | 'slide-up-sm' | 'slide-down-sm' | 'back-in-up' | 'back-in-down' | 'back-in-left' | 'back-in-right' | 'light-speed-in-left' | 'light-speed-in-right' | 'rise-in' | 'sink-in' | 'float-in-up' | 'float-in-down' | 'roll-in-left' | 'roll-in-right' | 'spiral-in' | 'spiral-in-reverse' | 'spin-in' | 'rotate-in-up-left' | 'rotate-in-up-right' | 'rotate-in-down-left' | 'rotate-in-down-right' | 'skew-in-left' | 'skew-in-y' | 'shear-in' | 'shear-in-reverse' | 'twist-in' | 'tilt-in-left' | 'tilt-in-right' | 'blur-in-down' | 'blur-in-left' | 'blur-in-right' | 'blur-in-strong' | 'blur-in-zoom' | 'blur-in-scale' | 'blur-in-x' | 'mask-up' | 'mask-down' | 'mask-left' | 'mask-right' | 'blur-mask-up' | 'clip-circle-top' | 'clip-circle-bottom' | 'clip-circle-left' | 'clip-circle-right' | 'clip-circle-corner' | 'clip-ellipse' | 'clip-diamond' | 'clip-split-x' | 'clip-split-y' | 'clip-box' | 'clip-pill' | 'clip-blinds' | 'clip-blinds-x' | 'clip-diagonal' | 'clip-diagonal-reverse' | 'clip-slant-right' | 'clip-slant-left' | 'bounce-in' | 'bounce-in-up' | 'bounce-in-down' | 'bounce-in-left' | 'bounce-in-right' | 'elastic-in' | 'elastic-in-x' | 'rubber-in' | 'jello-in' | 'wobble-in' | 'tada-in' | 'heartbeat-in' | 'drop-in' | 'pop-in' | 'squash-in' | 'shake-in' | 'swing-in' | 'brightness-in' | 'darken-in' | 'color-in' | 'saturate-in' | 'hue-in' | 'sepia-in' | 'invert-in' | 'contrast-in' | 'exposure-in' | 'vintage-in' | 'blur-bright-in' | 'shadow-lift' | 'neon-glow-in' | 'glow-in' | 'perspective-in-up' | 'perspective-in-down' | 'perspective-in-left' | 'perspective-in-right' | 'depth-push' | 'depth-pull' | 'depth-in-up' | 'swoop-in-left' | 'swoop-in-right' | 'card-tilt-in' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | 'scrub-parallax-up' | 'scrub-parallax-down' | 'scrub-rotate' | 'scrub-spin' | 'scrub-scale' | 'scrub-shrink' | 'scrub-pan-left' | 'scrub-pan-right' | 'scrub-tilt' | 'scrub-fade-through' | 'scrub-blur-through' | 'scrub-reveal-x';
 /** Easing function types */
 type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
 /** Keyframe definition for custom animations */
 interface AnimationKeyframe {
     [property: string]: string | number;
 }
+/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
+interface AnimationFrame extends AnimationKeyframe {
+    offset: number;
+}
 /** Custom animation definition */
 interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
+    /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
+    frames?: AnimationFrame[];
 }
 /** Per-element animation options */
 interface AnimateOptions {

package/dist/svelte.d.ts

@@ -2,8 +2,14 @@
  * use-scroll-animate - Core Type Definitions
  * A lightweight, high-performance scroll animation library
  */
-/** 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';
+/** The 33 core presets (always available in `PRESETS`). */
+type CorePreset = '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';
+/**
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
+ * `registerPresets(EXTENDED_PRESETS)`).
+ */
+type AnimationPreset = CorePreset | ExtendedPreset;
 /**
  * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,16 +28,24 @@ type ProgressMode = 'ratio' | 'scroll';
  *   since those only mean something for a time-based animation.
  */
 type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
+type ExtendedPreset = 'fade-in-up-sm' | 'fade-in-down-sm' | 'fade-in-left-sm' | 'fade-in-right-sm' | 'fade-in-up-lg' | 'fade-in-down-lg' | 'fade-in-left-lg' | 'fade-in-right-lg' | 'fade-in-up-left' | 'fade-in-up-right' | 'fade-in-down-left' | 'fade-in-down-right' | 'fade-in-scale' | 'fade-in-half' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'zoom-in-big' | 'zoom-out-big' | 'zoom-bounce' | 'zoom-in-rotate' | 'scale-x-left' | 'scale-x-right' | 'scale-y-top' | 'scale-y-bottom' | 'stretch-x' | 'stretch-y' | 'flip-x-reverse' | 'flip-y-reverse' | 'flip-y-full' | 'flip-diagonal' | 'flip-diagonal-reverse' | 'flip-left' | 'flip-right' | 'unfold-down' | 'unfold-up' | 'door-open-left' | 'door-open-right' | 'fold-in' | 'flip-x-bounce' | 'flip-y-bounce' | 'swing-in-top' | 'swing-in-bottom' | 'swing-in-left' | 'swing-in-right' | 'slide-up-spring' | 'slide-down-spring' | 'slide-left-spring' | 'slide-right-spring' | 'slide-up-sm' | 'slide-down-sm' | 'back-in-up' | 'back-in-down' | 'back-in-left' | 'back-in-right' | 'light-speed-in-left' | 'light-speed-in-right' | 'rise-in' | 'sink-in' | 'float-in-up' | 'float-in-down' | 'roll-in-left' | 'roll-in-right' | 'spiral-in' | 'spiral-in-reverse' | 'spin-in' | 'rotate-in-up-left' | 'rotate-in-up-right' | 'rotate-in-down-left' | 'rotate-in-down-right' | 'skew-in-left' | 'skew-in-y' | 'shear-in' | 'shear-in-reverse' | 'twist-in' | 'tilt-in-left' | 'tilt-in-right' | 'blur-in-down' | 'blur-in-left' | 'blur-in-right' | 'blur-in-strong' | 'blur-in-zoom' | 'blur-in-scale' | 'blur-in-x' | 'mask-up' | 'mask-down' | 'mask-left' | 'mask-right' | 'blur-mask-up' | 'clip-circle-top' | 'clip-circle-bottom' | 'clip-circle-left' | 'clip-circle-right' | 'clip-circle-corner' | 'clip-ellipse' | 'clip-diamond' | 'clip-split-x' | 'clip-split-y' | 'clip-box' | 'clip-pill' | 'clip-blinds' | 'clip-blinds-x' | 'clip-diagonal' | 'clip-diagonal-reverse' | 'clip-slant-right' | 'clip-slant-left' | 'bounce-in' | 'bounce-in-up' | 'bounce-in-down' | 'bounce-in-left' | 'bounce-in-right' | 'elastic-in' | 'elastic-in-x' | 'rubber-in' | 'jello-in' | 'wobble-in' | 'tada-in' | 'heartbeat-in' | 'drop-in' | 'pop-in' | 'squash-in' | 'shake-in' | 'swing-in' | 'brightness-in' | 'darken-in' | 'color-in' | 'saturate-in' | 'hue-in' | 'sepia-in' | 'invert-in' | 'contrast-in' | 'exposure-in' | 'vintage-in' | 'blur-bright-in' | 'shadow-lift' | 'neon-glow-in' | 'glow-in' | 'perspective-in-up' | 'perspective-in-down' | 'perspective-in-left' | 'perspective-in-right' | 'depth-push' | 'depth-pull' | 'depth-in-up' | 'swoop-in-left' | 'swoop-in-right' | 'card-tilt-in' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | 'scrub-parallax-up' | 'scrub-parallax-down' | 'scrub-rotate' | 'scrub-spin' | 'scrub-scale' | 'scrub-shrink' | 'scrub-pan-left' | 'scrub-pan-right' | 'scrub-tilt' | 'scrub-fade-through' | 'scrub-blur-through' | 'scrub-reveal-x';
 /** Easing function types */
 type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
 /** Keyframe definition for custom animations */
 interface AnimationKeyframe {
     [property: string]: string | number;
 }
+/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
+interface AnimationFrame extends AnimationKeyframe {
+    offset: number;
+}
 /** Custom animation definition */
 interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
+    /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
+    frames?: AnimationFrame[];
 }
 /** Per-element animation options */
 interface AnimateOptions {

package/dist/svelte.js

@@ -1,5 +1,6 @@
-import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
-import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
+import { c as createScrollAnimate } from './chunks/core-BVQW34aX.js';
+import { s as staggerChildren } from './chunks/stagger-Dh4V-OL0.js';
+import './chunks/presets-BJ09NeTo.js';
 
 /**
  * use-scroll-animate - Svelte integration

package/dist/svelte.js.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.js","sources":["../src/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate - Svelte integration\n *\n * Svelte actions (no import from `svelte` needed, works with Svelte 3, 4 and 5):\n *\n * ```svelte\n * <script>\n *   import { scrollAnimate, scrollStagger } from 'use-scroll-animate/svelte';\n * </script>\n * <div use:scrollAnimate={{ animation: 'fade-in-up', duration: 800 }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * ```\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface ScrollAnimateActionOptions extends AnimateOptions {\n  /** Instance to register with (default: a shared instance created on first use) */\n  instance?: ScrollAnimateInstance;\n}\n\nexport interface ScrollStaggerActionOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\n/** Shape of a Svelte action's return value. */\nexport interface ActionReturn<P> {\n  update?: (parameter: P) => void;\n  destroy?: () => void;\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/** Callbacks always call the latest parameter's version. */\nfunction liveCallbacks(opts: AnimateOptions, latest: () => AnimateOptions): AnimateOptions {\n  const out: AnimateOptions = { ...opts };\n  CALLBACKS.forEach((name) => {\n    if (typeof opts[name] === 'function') (out as any)[name] = (...args: unknown[]) => (latest()[name] as any)?.(...args);\n  });\n  return out;\n}\n\n/**\n * Animate `node` when it scrolls into view. Changing the parameter updates the\n * callbacks right away; other options are applied if the element has not\n * animated yet.\n */\nexport function scrollAnimate(\n  node: Element,\n  options: ScrollAnimateActionOptions = {}\n): ActionReturn<ScrollAnimateActionOptions | undefined> {\n  let current = options;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  sa.observe(node, liveCallbacks(opts, () => current));\n\n  return {\n    update(next = {}) {\n      current = next;\n      const record = sa.getObservedElements().find((r) => r.element === node);\n      if (record && !record.animated) {\n        const { instance: _ignored, ...nextOpts } = next;\n        sa.unobserve(node);\n        sa.observe(node, liveCallbacks(nextOpts, () => current));\n      }\n    },\n    destroy() {\n      sa.unobserve(node);\n    },\n  };\n}\n\n/** Stagger the children of `node` when it scrolls into view (`observeChildren: true` also animates children added later). */\nexport function scrollStagger(\n  node: Element,\n  options: ScrollStaggerActionOptions = {}\n): ActionReturn<ScrollStaggerActionOptions | undefined> {\n  const { instance, ...opts } = options;\n  const stop = staggerChildren(node, opts, getInstance(instance));\n  return { destroy: stop };\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;AAYG;AAqBH,IAAI,MAAM,GAAiC,IAAI;AAC/C,MAAM,WAAW,GAAG,CAAC,GAA2B,KAAK,GAAG,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAEtG,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAU;AAExF;AACA,SAAS,aAAa,CAAC,IAAoB,EAAE,MAA4B,EAAA;AACvE,IAAA,MAAM,GAAG,GAAmB,EAAE,GAAG,IAAI,EAAE;AACvC,IAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACzB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,UAAU;YAAG,GAAW,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAe,KAAM,MAAM,EAAE,CAAC,IAAI,CAAS,GAAG,GAAG,IAAI,CAAC;AACvH,IAAA,CAAC,CAAC;AACF,IAAA,OAAO,GAAG;AACZ;AAEA;;;;AAIG;SACa,aAAa,CAC3B,IAAa,EACb,UAAsC,EAAE,EAAA;IAExC,IAAI,OAAO,GAAG,OAAO;IACrB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAA,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,EAAE,MAAM,OAAO,CAAC,CAAC;IAEpD,OAAO;QACL,MAAM,CAAC,IAAI,GAAG,EAAE,EAAA;YACd,OAAO,GAAG,IAAI;YACd,MAAM,MAAM,GAAG,EAAE,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC;AACvE,YAAA,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;gBAC9B,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI;AAChD,gBAAA,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,CAAC;YAC1D;QACF,CAAC;QACD,OAAO,GAAA;AACL,YAAA,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;QACpB,CAAC;KACF;AACH;AAEA;SACgB,aAAa,CAC3B,IAAa,EACb,UAAsC,EAAE,EAAA;IAExC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;AAC/D,IAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAC1B;;;;"}
+{"version":3,"file":"svelte.js","sources":["../src/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate - Svelte integration\n *\n * Svelte actions (no import from `svelte` needed, works with Svelte 3, 4 and 5):\n *\n * ```svelte\n * <script>\n *   import { scrollAnimate, scrollStagger } from 'use-scroll-animate/svelte';\n * </script>\n * <div use:scrollAnimate={{ animation: 'fade-in-up', duration: 800 }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * ```\n */\n\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface ScrollAnimateActionOptions extends AnimateOptions {\n  /** Instance to register with (default: a shared instance created on first use) */\n  instance?: ScrollAnimateInstance;\n}\n\nexport interface ScrollStaggerActionOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\n/** Shape of a Svelte action's return value. */\nexport interface ActionReturn<P> {\n  update?: (parameter: P) => void;\n  destroy?: () => void;\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/** Callbacks always call the latest parameter's version. */\nfunction liveCallbacks(opts: AnimateOptions, latest: () => AnimateOptions): AnimateOptions {\n  const out: AnimateOptions = { ...opts };\n  CALLBACKS.forEach((name) => {\n    if (typeof opts[name] === 'function') (out as any)[name] = (...args: unknown[]) => (latest()[name] as any)?.(...args);\n  });\n  return out;\n}\n\n/**\n * Animate `node` when it scrolls into view. Changing the parameter updates the\n * callbacks right away; other options are applied if the element has not\n * animated yet.\n */\nexport function scrollAnimate(\n  node: Element,\n  options: ScrollAnimateActionOptions = {}\n): ActionReturn<ScrollAnimateActionOptions | undefined> {\n  let current = options;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  sa.observe(node, liveCallbacks(opts, () => current));\n\n  return {\n    update(next = {}) {\n      current = next;\n      const record = sa.getObservedElements().find((r) => r.element === node);\n      if (record && !record.animated) {\n        const { instance: _ignored, ...nextOpts } = next;\n        sa.unobserve(node);\n        sa.observe(node, liveCallbacks(nextOpts, () => current));\n      }\n    },\n    destroy() {\n      sa.unobserve(node);\n    },\n  };\n}\n\n/** Stagger the children of `node` when it scrolls into view (`observeChildren: true` also animates children added later). */\nexport function scrollStagger(\n  node: Element,\n  options: ScrollStaggerActionOptions = {}\n): ActionReturn<ScrollStaggerActionOptions | undefined> {\n  const { instance, ...opts } = options;\n  const stop = staggerChildren(node, opts, getInstance(instance));\n  return { destroy: stop };\n}\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;AAYG;AAqBH,IAAI,MAAM,GAAiC,IAAI;AAC/C,MAAM,WAAW,GAAG,CAAC,GAA2B,KAAK,GAAG,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAEtG,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAU;AAExF;AACA,SAAS,aAAa,CAAC,IAAoB,EAAE,MAA4B,EAAA;AACvE,IAAA,MAAM,GAAG,GAAmB,EAAE,GAAG,IAAI,EAAE;AACvC,IAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACzB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,UAAU;YAAG,GAAW,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAe,KAAM,MAAM,EAAE,CAAC,IAAI,CAAS,GAAG,GAAG,IAAI,CAAC;AACvH,IAAA,CAAC,CAAC;AACF,IAAA,OAAO,GAAG;AACZ;AAEA;;;;AAIG;SACa,aAAa,CAC3B,IAAa,EACb,UAAsC,EAAE,EAAA;IAExC,IAAI,OAAO,GAAG,OAAO;IACrB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAA,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,EAAE,MAAM,OAAO,CAAC,CAAC;IAEpD,OAAO;QACL,MAAM,CAAC,IAAI,GAAG,EAAE,EAAA;YACd,OAAO,GAAG,IAAI;YACd,MAAM,MAAM,GAAG,EAAE,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC;AACvE,YAAA,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;gBAC9B,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI;AAChD,gBAAA,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,CAAC;YAC1D;QACF,CAAC;QACD,OAAO,GAAA;AACL,YAAA,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;QACpB,CAAC;KACF;AACH;AAEA;SACgB,aAAa,CAC3B,IAAa,EACb,UAAsC,EAAE,EAAA;IAExC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;AAC/D,IAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAC1B;;;;"}

package/dist/vue.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var core = require('./chunks/core-qpECfEkb.cjs');
-var stagger = require('./chunks/stagger-CLc3j58T.cjs');
+var core = require('./chunks/core-BYLtO0Po.cjs');
+var stagger = require('./chunks/stagger-CvhYlKrF.cjs');
+require('./chunks/presets-D2ksQNzJ.cjs');
 
 /**
  * use-scroll-animate - Vue 3 Integration

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, 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;;;;"}
+{"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

@@ -2,8 +2,14 @@
  * use-scroll-animate - Core Type Definitions
  * A lightweight, high-performance scroll animation library
  */
-/** 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';
+/** The 33 core presets (always available in `PRESETS`). */
+type CorePreset = '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';
+/**
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
+ * `registerPresets(EXTENDED_PRESETS)`).
+ */
+type AnimationPreset = CorePreset | ExtendedPreset;
 /**
  * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,16 +28,24 @@ type ProgressMode = 'ratio' | 'scroll';
  *   since those only mean something for a time-based animation.
  */
 type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
+type ExtendedPreset = 'fade-in-up-sm' | 'fade-in-down-sm' | 'fade-in-left-sm' | 'fade-in-right-sm' | 'fade-in-up-lg' | 'fade-in-down-lg' | 'fade-in-left-lg' | 'fade-in-right-lg' | 'fade-in-up-left' | 'fade-in-up-right' | 'fade-in-down-left' | 'fade-in-down-right' | 'fade-in-scale' | 'fade-in-half' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'zoom-in-big' | 'zoom-out-big' | 'zoom-bounce' | 'zoom-in-rotate' | 'scale-x-left' | 'scale-x-right' | 'scale-y-top' | 'scale-y-bottom' | 'stretch-x' | 'stretch-y' | 'flip-x-reverse' | 'flip-y-reverse' | 'flip-y-full' | 'flip-diagonal' | 'flip-diagonal-reverse' | 'flip-left' | 'flip-right' | 'unfold-down' | 'unfold-up' | 'door-open-left' | 'door-open-right' | 'fold-in' | 'flip-x-bounce' | 'flip-y-bounce' | 'swing-in-top' | 'swing-in-bottom' | 'swing-in-left' | 'swing-in-right' | 'slide-up-spring' | 'slide-down-spring' | 'slide-left-spring' | 'slide-right-spring' | 'slide-up-sm' | 'slide-down-sm' | 'back-in-up' | 'back-in-down' | 'back-in-left' | 'back-in-right' | 'light-speed-in-left' | 'light-speed-in-right' | 'rise-in' | 'sink-in' | 'float-in-up' | 'float-in-down' | 'roll-in-left' | 'roll-in-right' | 'spiral-in' | 'spiral-in-reverse' | 'spin-in' | 'rotate-in-up-left' | 'rotate-in-up-right' | 'rotate-in-down-left' | 'rotate-in-down-right' | 'skew-in-left' | 'skew-in-y' | 'shear-in' | 'shear-in-reverse' | 'twist-in' | 'tilt-in-left' | 'tilt-in-right' | 'blur-in-down' | 'blur-in-left' | 'blur-in-right' | 'blur-in-strong' | 'blur-in-zoom' | 'blur-in-scale' | 'blur-in-x' | 'mask-up' | 'mask-down' | 'mask-left' | 'mask-right' | 'blur-mask-up' | 'clip-circle-top' | 'clip-circle-bottom' | 'clip-circle-left' | 'clip-circle-right' | 'clip-circle-corner' | 'clip-ellipse' | 'clip-diamond' | 'clip-split-x' | 'clip-split-y' | 'clip-box' | 'clip-pill' | 'clip-blinds' | 'clip-blinds-x' | 'clip-diagonal' | 'clip-diagonal-reverse' | 'clip-slant-right' | 'clip-slant-left' | 'bounce-in' | 'bounce-in-up' | 'bounce-in-down' | 'bounce-in-left' | 'bounce-in-right' | 'elastic-in' | 'elastic-in-x' | 'rubber-in' | 'jello-in' | 'wobble-in' | 'tada-in' | 'heartbeat-in' | 'drop-in' | 'pop-in' | 'squash-in' | 'shake-in' | 'swing-in' | 'brightness-in' | 'darken-in' | 'color-in' | 'saturate-in' | 'hue-in' | 'sepia-in' | 'invert-in' | 'contrast-in' | 'exposure-in' | 'vintage-in' | 'blur-bright-in' | 'shadow-lift' | 'neon-glow-in' | 'glow-in' | 'perspective-in-up' | 'perspective-in-down' | 'perspective-in-left' | 'perspective-in-right' | 'depth-push' | 'depth-pull' | 'depth-in-up' | 'swoop-in-left' | 'swoop-in-right' | 'card-tilt-in' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | 'scrub-parallax-up' | 'scrub-parallax-down' | 'scrub-rotate' | 'scrub-spin' | 'scrub-scale' | 'scrub-shrink' | 'scrub-pan-left' | 'scrub-pan-right' | 'scrub-tilt' | 'scrub-fade-through' | 'scrub-blur-through' | 'scrub-reveal-x';
 /** Easing function types */
 type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
 /** Keyframe definition for custom animations */
 interface AnimationKeyframe {
     [property: string]: string | number;
 }
+/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
+interface AnimationFrame extends AnimationKeyframe {
+    offset: number;
+}
 /** Custom animation definition */
 interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
+    /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
+    frames?: AnimationFrame[];
 }
 /** Per-element animation options */
 interface AnimateOptions {

package/dist/vue.d.ts

@@ -2,8 +2,14 @@
  * use-scroll-animate - Core Type Definitions
  * A lightweight, high-performance scroll animation library
  */
-/** 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';
+/** The 33 core presets (always available in `PRESETS`). */
+type CorePreset = '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';
+/**
+ * Every built-in preset name: the core set plus the 6.1 extended set, which is
+ * available once `use-scroll-animate/presets/extended` is loaded (or after
+ * `registerPresets(EXTENDED_PRESETS)`).
+ */
+type AnimationPreset = CorePreset | ExtendedPreset;
 /**
  * How `onProgress` / `progressVar` progress is measured.
  * - `'ratio'` (default): the element's visible ratio (IntersectionObserver `intersectionRatio`).
@@ -22,16 +28,24 @@ type ProgressMode = 'ratio' | 'scroll';
  *   since those only mean something for a time-based animation.
  */
 type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`use-scroll-animate/presets/extended`). */
+type ExtendedPreset = 'fade-in-up-sm' | 'fade-in-down-sm' | 'fade-in-left-sm' | 'fade-in-right-sm' | 'fade-in-up-lg' | 'fade-in-down-lg' | 'fade-in-left-lg' | 'fade-in-right-lg' | 'fade-in-up-left' | 'fade-in-up-right' | 'fade-in-down-left' | 'fade-in-down-right' | 'fade-in-scale' | 'fade-in-half' | 'zoom-in-up' | 'zoom-in-down' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-out-up' | 'zoom-out-down' | 'zoom-out-left' | 'zoom-out-right' | 'zoom-in-big' | 'zoom-out-big' | 'zoom-bounce' | 'zoom-in-rotate' | 'scale-x-left' | 'scale-x-right' | 'scale-y-top' | 'scale-y-bottom' | 'stretch-x' | 'stretch-y' | 'flip-x-reverse' | 'flip-y-reverse' | 'flip-y-full' | 'flip-diagonal' | 'flip-diagonal-reverse' | 'flip-left' | 'flip-right' | 'unfold-down' | 'unfold-up' | 'door-open-left' | 'door-open-right' | 'fold-in' | 'flip-x-bounce' | 'flip-y-bounce' | 'swing-in-top' | 'swing-in-bottom' | 'swing-in-left' | 'swing-in-right' | 'slide-up-spring' | 'slide-down-spring' | 'slide-left-spring' | 'slide-right-spring' | 'slide-up-sm' | 'slide-down-sm' | 'back-in-up' | 'back-in-down' | 'back-in-left' | 'back-in-right' | 'light-speed-in-left' | 'light-speed-in-right' | 'rise-in' | 'sink-in' | 'float-in-up' | 'float-in-down' | 'roll-in-left' | 'roll-in-right' | 'spiral-in' | 'spiral-in-reverse' | 'spin-in' | 'rotate-in-up-left' | 'rotate-in-up-right' | 'rotate-in-down-left' | 'rotate-in-down-right' | 'skew-in-left' | 'skew-in-y' | 'shear-in' | 'shear-in-reverse' | 'twist-in' | 'tilt-in-left' | 'tilt-in-right' | 'blur-in-down' | 'blur-in-left' | 'blur-in-right' | 'blur-in-strong' | 'blur-in-zoom' | 'blur-in-scale' | 'blur-in-x' | 'mask-up' | 'mask-down' | 'mask-left' | 'mask-right' | 'blur-mask-up' | 'clip-circle-top' | 'clip-circle-bottom' | 'clip-circle-left' | 'clip-circle-right' | 'clip-circle-corner' | 'clip-ellipse' | 'clip-diamond' | 'clip-split-x' | 'clip-split-y' | 'clip-box' | 'clip-pill' | 'clip-blinds' | 'clip-blinds-x' | 'clip-diagonal' | 'clip-diagonal-reverse' | 'clip-slant-right' | 'clip-slant-left' | 'bounce-in' | 'bounce-in-up' | 'bounce-in-down' | 'bounce-in-left' | 'bounce-in-right' | 'elastic-in' | 'elastic-in-x' | 'rubber-in' | 'jello-in' | 'wobble-in' | 'tada-in' | 'heartbeat-in' | 'drop-in' | 'pop-in' | 'squash-in' | 'shake-in' | 'swing-in' | 'brightness-in' | 'darken-in' | 'color-in' | 'saturate-in' | 'hue-in' | 'sepia-in' | 'invert-in' | 'contrast-in' | 'exposure-in' | 'vintage-in' | 'blur-bright-in' | 'shadow-lift' | 'neon-glow-in' | 'glow-in' | 'perspective-in-up' | 'perspective-in-down' | 'perspective-in-left' | 'perspective-in-right' | 'depth-push' | 'depth-pull' | 'depth-in-up' | 'swoop-in-left' | 'swoop-in-right' | 'card-tilt-in' | 'glitch-in' | 'glitch-in-color' | 'typewriter' | 'typewriter-lines' | 'hinge-in' | 'flicker-in' | 'scan-in' | 'materialize' | 'teleport-in' | 'stagger-fade-up' | 'stagger-pop' | 'stagger-rise' | 'stagger-slide' | 'stagger-flip' | 'stagger-blur' | 'stagger-zoom' | 'stagger-drop' | 'scrub-parallax-up' | 'scrub-parallax-down' | 'scrub-rotate' | 'scrub-spin' | 'scrub-scale' | 'scrub-shrink' | 'scrub-pan-left' | 'scrub-pan-right' | 'scrub-tilt' | 'scrub-fade-through' | 'scrub-blur-through' | 'scrub-reveal-x';
 /** Easing function types */
 type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'soft-spring' | 'heavy-bounce' | [number, number, number, number] | ((t: number) => number) | string;
 /** Keyframe definition for custom animations */
 interface AnimationKeyframe {
     [property: string]: string | number;
 }
+/** One intermediate keyframe of a preset: `offset` is 0 < offset < 1. */
+interface AnimationFrame extends AnimationKeyframe {
+    offset: number;
+}
 /** Custom animation definition */
 interface CustomAnimation {
     from: AnimationKeyframe;
     to: AnimationKeyframe;
+    /** Optional intermediate keyframes (overshoot, bounce, …), played between `from` and `to`. */
+    frames?: AnimationFrame[];
 }
 /** Per-element animation options */
 interface AnimateOptions {

package/dist/vue.js

@@ -1,5 +1,6 @@
-import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
-import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
+import { c as createScrollAnimate } from './chunks/core-BVQW34aX.js';
+import { s as staggerChildren } from './chunks/stagger-Dh4V-OL0.js';
+import './chunks/presets-BJ09NeTo.js';
 
 /**
  * use-scroll-animate - Vue 3 Integration

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, 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;;;;"}
+{"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

@@ -17,7 +17,8 @@
 
 | Import | Contents |
 |---|---|
-| `use-scroll-animate` | Default instance, `createScrollAnimate`, `staggerChildren`, `timeline`, `parallax`, `getScrollProgress`, `supportsScrollTimeline`, `PRESETS`, `resolvePreset`, `resolveEasing`, `EASING_MAP`, all types |
+| `use-scroll-animate` | Default instance, `createScrollAnimate`, `staggerChildren`, `timeline`, `parallax`, `getScrollProgress`, `supportsScrollTimeline`, `PRESETS`, `registerPresets`, `reversePreset`, `resolvePreset`, `resolveEasing`, `EASING_MAP`, all types |
+| `use-scroll-animate/presets/extended` | Registers the 181 extended presets on import (6.1). Exports `EXTENDED_PRESETS`, `EXTENDED_PRESET_CATEGORIES`, `registerExtendedPresets()`. `<script>`: `dist/presets-extended.umd.js` (global `ScrollAnimatePresets`) |
 | `use-scroll-animate/react` | `createReactHooks(React)` |
 | `use-scroll-animate/vue` | `createVueComposables({ ref, onMounted, onUnmounted })` |
 | `use-scroll-animate/svelte` | `scrollAnimate`, `scrollStagger` actions |
@@ -102,7 +103,11 @@ Boolean attributes are true when present unless their value is `"false"`.
 
 ## Presets & easings
 
-`PRESETS` (`Record<AnimationPreset, { from, to }>`): `fade-in`, `fade-in-up`, `fade-in-down`, `fade-in-left`, `fade-in-right`, `zoom-in`, `zoom-out`, `scale-up`, `flip-x`, `flip-y`, `flip-up`, `flip-down`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `bounce`, `rotate-in`, `rotate-left`, `rotate-right`, `blur-in`, `blur-in-up`, `skew-in`, `scale-x`, `scale-y`, `clip-up`, `clip-down`, `clip-left`, `clip-right`, `clip-circle`, `shimmer`, `pulse`, `swing`.
+`PRESETS` (`{ from, to, frames? }` by name) — the 33 core presets: `fade-in`, `fade-in-up`, `fade-in-down`, `fade-in-left`, `fade-in-right`, `zoom-in`, `zoom-out`, `scale-up`, `flip-x`, `flip-y`, `flip-up`, `flip-down`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `bounce`, `rotate-in`, `rotate-left`, `rotate-right`, `blur-in`, `blur-in-up`, `skew-in`, `scale-x`, `scale-y`, `clip-up`, `clip-down`, `clip-left`, `clip-right`, `clip-circle`, `shimmer`, `pulse`, `swing`.
+
+**Extended presets (6.1)** — 181 more after `import 'use-scroll-animate/presets/extended'` (or the `dist/presets-extended.umd.js` script); full list by category with keyframes in [presets.md](./presets.md). `PRESETS` is one table per page shared through `Symbol.for('use-scroll-animate.presets')`, so the ESM entries, the UMD bundle and `<usa-reveal effect>` / `<usa-stagger effect>` all see every registered preset.
+
+`registerPresets({ name: { from, to, frames? } })` adds or replaces presets (usable by name everywhere). `frames` are intermediate keyframes with `offset` 0–1 (exclusive) played between `from` and `to`; a keyframe may carry its own `easing` (e.g. `steps(16, end)`). Presets combined in an array use only `from` / `to`. `reversePreset(p)` returns the same keyframes backwards (used by `exit`). Scroll-linked `scrub-*` presets are meant for `{ engine: 'css', viewRange: ['cover 0%', 'cover 100%'] }`.
 
 `EASING_MAP`: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `spring`, `soft-spring`, `heavy-bounce`. `resolvePreset(animation)` and `resolveEasing(easing)` expose the resolution used internally.
 

package/docs/ROADMAP.md

@@ -1,14 +1,15 @@
 # 路线图（6.0 之后）
 
-> 6.0.0：移除 5.9 弃用的 API（`burst()` / `confetti()` / `shake()`、`<usa-cursor mode="trail">`），所有效果统一通过注册表（`registerEffect()` / `playEffect()` / `<usa-fx>`）提供。以下为 6.x → 7.0 的规划，每个版本一个 PR；新效果继续集中在 `use-scroll-animate/components/effects`（`components/lite` 维持 70 KB 预算），全部兼容“减少动态效果”。
+> 6.0.0：移除 5.9 弃用的 API（`burst()` / `confetti()` / `shake()`、`<usa-cursor mode="trail">`），所有效果统一通过注册表（`registerEffect()` / `playEffect()` / `<usa-fx>`）提供。以下为 6.x → 7.0 的规划，每个版本一个 PR（6.1 插入“滚动预设 2.0”后，原 6.1–6.9 依次顺延为 6.2–6.10）；新效果继续集中在 `use-scroll-animate/components/effects`（`components/lite` 维持 70 KB 预算），全部兼容“减少动态效果”。
 
-- **v6.1** — 粒子与流体 2.0：GPU 流体模拟背景、烟雾与火焰、墨滴扩散、萤火虫群、樱花与落叶飘散、点击溅起水花 —— WebGL2 实现，自动降级到 Canvas 2D。
-- **v6.2** — 文字特效 3.0：液态文字、霓虹描边书写、文字粒子化聚散、故障（glitch）字、打字机光标拖影、可变字体呼吸、逐字 3D 翻转。
-- **v6.3** — 光影与材质：动态光源投影、玻璃折射、金属拉丝反光、珠光 / 镭射材质、体积光（god rays）、跟随指针的实时阴影。
-- **v6.4** — 3D 场景卡片：视差层叠景深卡、可旋转 3D 商品展示、立方体翻转画廊、折纸展开、轨道相机滚动叙事 —— CSS 3D 为主，可选 WebGL。
-- **v6.5** — 形变与 SVG 2.0：路径自动补间形变、液态 blob 按钮、描边绘制动画、SVG 滤镜（湍流、置换）扭曲转场、图标一键变形。
-- **v6.6** — 转场大全：涟漪溶解、碎片爆裂、马赛克翻牌、液体擦除、卷页、镜头推拉 —— View Transitions 优先，多页（MPA）同样可用。
-- **v6.7** — 天气与氛围：雨滴打在玻璃上、雪花堆积、雷电闪光（限频的安全闪烁）、雾气、极光、随时间变化的昼夜光照。
-- **v6.8** — 交互物理 2.0：可拖拽的软体与布料、绳索与链条、磁力吸附排列、碰撞弹球、重力翻转页面 —— 轻量 Verlet 求解器。
-- **v6.9** — 7.0 预备：动画编辑器 2.0（曲线编辑、`<usa-player>` 关键帧录制）、效果市场清单格式；标记 7.0 将移除的 API 并输出一次性警告，发布 `upgrading-7.md` 与 `usa-codemod-7`。
-- **v7.0** — 破坏性清理：移除 6.9 弃用的 API，效果包按需拆分入口，WebGPU 渲染后端（WebGL2 回退），迁移指南与自动迁移脚本，npm `latest`。
+- **v6.1** ✅ — 滚动预设 2.0（Scroll presets 2.0，已发布）：新增 181 个滚动入场预设（总计 214 个），独立入口 `use-scroll-animate/presets/extended`（导入即注册，UMD `dist/presets-extended.umd.js`），核心包体积不变；预设支持中间关键帧 `frames`，新增 `registerPresets()` / `reversePreset()`；动画商店扩展到 227 个条目、14 个预设分类（含随滚动 `scrub-*` 与错峰 `stagger-*`）。
+- **v6.2** — 粒子与流体 2.0：GPU 流体模拟背景、烟雾与火焰、墨滴扩散、萤火虫群、樱花与落叶飘散、点击溅起水花 —— WebGL2 实现，自动降级到 Canvas 2D。
+- **v6.3** — 文字特效 3.0：液态文字、霓虹描边书写、文字粒子化聚散、故障（glitch）字、打字机光标拖影、可变字体呼吸、逐字 3D 翻转。
+- **v6.4** — 光影与材质：动态光源投影、玻璃折射、金属拉丝反光、珠光 / 镭射材质、体积光（god rays）、跟随指针的实时阴影。
+- **v6.5** — 3D 场景卡片：视差层叠景深卡、可旋转 3D 商品展示、立方体翻转画廊、折纸展开、轨道相机滚动叙事 —— CSS 3D 为主，可选 WebGL。
+- **v6.6** — 形变与 SVG 2.0：路径自动补间形变、液态 blob 按钮、描边绘制动画、SVG 滤镜（湍流、置换）扭曲转场、图标一键变形。
+- **v6.7** — 转场大全：涟漪溶解、碎片爆裂、马赛克翻牌、液体擦除、卷页、镜头推拉 —— View Transitions 优先，多页（MPA）同样可用。
+- **v6.8** — 天气与氛围：雨滴打在玻璃上、雪花堆积、雷电闪光（限频的安全闪烁）、雾气、极光、随时间变化的昼夜光照。
+- **v6.9** — 交互物理 2.0：可拖拽的软体与布料、绳索与链条、磁力吸附排列、碰撞弹球、重力翻转页面 —— 轻量 Verlet 求解器。
+- **v6.10** — 7.0 预备：动画编辑器 2.0（曲线编辑、`<usa-player>` 关键帧录制）、效果市场清单格式；标记 7.0 将移除的 API 并输出一次性警告，发布 `upgrading-7.md` 与 `usa-codemod-7`。
+- **v7.0** — 破坏性清理：移除 6.10 弃用的 API，效果包按需拆分入口，WebGPU 渲染后端（WebGL2 回退），迁移指南与自动迁移脚本，npm `latest`。

package/docs/components.md

@@ -60,7 +60,7 @@ All attributes are optional unless noted. Events are `CustomEvent`s that bubble,
 
 | Element | What it does | Key attributes | JS API / events |
 |---|---|---|---|
-| `<usa-reveal>` | Reveals content when it enters the viewport | `effect` (`fade`, `fade-up`*, `fade-down`, `fade-left`, `fade-right`, `zoom-in`, `zoom-out`, `blur`, `blur-up`, `flip-up`, `flip-left`, `rise`), `duration` (700), `delay`, `distance` (32), `easing`, `threshold` (0.15), `root-margin`, `repeat` | `reveal()`, `reset()`, `revealed`; `usa:enter`, `usa:leave`, `usa:complete` |
+| `<usa-reveal>` | Reveals content when it enters the viewport | `effect` (`fade`, `fade-up`*, `fade-down`, `fade-left`, `fade-right`, `zoom-in`, `zoom-out`, `blur`, `blur-up`, `flip-up`, `flip-left`, `rise`, or since 6.1 any registered scroll preset name such as `bounce-in-up` / `clip-diamond` once `use-scroll-animate` or `use-scroll-animate/presets/extended` is loaded — see [presets.md](./presets.md)), `duration` (700), `delay`, `distance` (32), `easing`, `threshold` (0.15), `root-margin`, `repeat` | `reveal()`, `reset()`, `revealed`; `usa:enter`, `usa:leave`, `usa:complete` |
 | `<usa-stagger>` | Reveals its children one after another | `effect`, `interval` (70 ms), `duration`, `delay`, `distance`, `threshold`, `repeat` | `reveal()`, `reset()`; `usa:enter`, `usa:complete` |
 | `<usa-scroll-progress>` | Reading-progress bar for the page or one article | `target` (selector), `position` (`top`*, `bottom`, `inline`), `label`; CSS `--usa-progress-color/-height/-track` | `progress`, `update()`; `usa:progress` (`detail.progress`); `--usa-progress` on the element |
 | `<usa-scrolly>` | Sticky scrollytelling: `[data-sticky]` stays pinned while `[data-step]` children scroll by | `offset` (trigger line, 0.5) | `active`, `steps`; `usa:step` (`detail.index/step/name`); `data-step-name` + `--usa-step` on the host, `data-active` on the step |