motionary 0.0.0-stage → 6.2.0

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sources":["../src/react.ts"],"sourcesContent":["/**\n * motionary - 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

@@ -0,0 +1,93 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var core = require('./chunks/core-B5T0dhFH.cjs');
+var stagger = require('./chunks/stagger-CCFyhzSw.cjs');
+require('./chunks/presets-CUHys3sK.cjs');
+
+/**
+ * motionary - Solid integration
+ *
+ * ```tsx
+ * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'motionary/solid';
+ * false && scrollAnimate; // keep the directive import (TypeScript)
+ *
+ * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>
+ * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>
+ * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>
+ * ```
+ *
+ * `solid-js` is an optional peer dependency (only needed for this entry).
+ */
+let shared = null;
+const getInstance = (own) => own || shared || (shared = core.createScrollAnimate());
+function read(accessor) {
+    const v = accessor?.();
+    return (v && v !== true ? v : {});
+}
+const CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'];
+/** Callbacks always call the latest options' version. */
+function liveCallbacks(opts, latest) {
+    const out = { ...opts };
+    CALLBACKS.forEach((name) => {
+        if (typeof opts[name] === 'function')
+            out[name] = (...args) => latest()[name]?.(...args);
+    });
+    return out;
+}
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
+function scrollAnimate(el, accessor) {
+    let latest = {};
+    let mounted = false;
+    let sa = null;
+    const apply = () => {
+        const { instance, ...opts } = latest;
+        const record = sa?.getObservedElements().find((r) => r.element === el);
+        if (sa && record?.animated)
+            return; // finished: callbacks stay live
+        sa?.unobserve(el);
+        sa = getInstance(instance);
+        sa.observe(el, liveCallbacks(opts, () => latest));
+    };
+    solidJs.createRenderEffect(() => {
+        latest = read(accessor);
+        if (mounted)
+            apply();
+    });
+    // Wait until the element is in the document (directives/refs run before insertion).
+    solidJs.onMount(() => {
+        mounted = true;
+        apply();
+    });
+    solidJs.onCleanup(() => sa?.unobserve(el));
+}
+/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
+function scrollStagger(el, accessor) {
+    const { instance, ...opts } = read(accessor);
+    let stop;
+    solidJs.onMount(() => {
+        stop = stagger.staggerChildren(el, opts, getInstance(instance));
+    });
+    solidJs.onCleanup(() => stop?.());
+}
+/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */
+function useScrollAnimate(options = {}) {
+    let el;
+    const { instance, ...opts } = options;
+    const sa = getInstance(instance);
+    solidJs.onMount(() => el && sa.observe(el, opts));
+    solidJs.onCleanup(() => el && sa.unobserve(el));
+    return (node) => {
+        el = node;
+    };
+}
+
+exports.scrollAnimate = scrollAnimate;
+exports.scrollStagger = scrollStagger;
+exports.useScrollAnimate = useScrollAnimate;
+//# sourceMappingURL=solid.cjs.map

package/dist/solid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid.cjs","sources":["../src/solid.ts"],"sourcesContent":["/**\n * motionary - Solid integration\n *\n * ```tsx\n * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'motionary/solid';\n * false && scrollAnimate; // keep the directive import (TypeScript)\n *\n * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>\n * ```\n *\n * `solid-js` is an optional peer dependency (only needed for this entry).\n */\n\nimport { createRenderEffect, onCleanup, onMount } from 'solid-js';\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface SolidScrollAnimateOptions extends AnimateOptions {\n  instance?: ScrollAnimateInstance;\n}\nexport interface SolidScrollStaggerOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\ndeclare module 'solid-js' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface Directives {\n      scrollAnimate: SolidScrollAnimateOptions | true;\n      scrollStagger: SolidScrollStaggerOptions | true;\n    }\n  }\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nfunction read<T>(accessor?: () => T | true | undefined): T {\n  const v = accessor?.();\n  return (v && v !== true ? v : {}) as T;\n}\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/** Callbacks always call the latest options' 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 * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.\n * 4.0.1: the accessor is tracked — when signals it reads change, callbacks\n * update right away and the other options are re-applied if the element has\n * not animated yet (no manual `refresh()` needed).\n */\nexport function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void {\n  let latest: SolidScrollAnimateOptions = {};\n  let mounted = false;\n  let sa: ScrollAnimateInstance | null = null;\n  const apply = () => {\n    const { instance, ...opts } = latest;\n    const record = sa?.getObservedElements().find((r) => r.element === el);\n    if (sa && record?.animated) return; // finished: callbacks stay live\n    sa?.unobserve(el);\n    sa = getInstance(instance);\n    sa.observe(el, liveCallbacks(opts, () => latest));\n  };\n  createRenderEffect(() => {\n    latest = read<SolidScrollAnimateOptions>(accessor);\n    if (mounted) apply();\n  });\n  // Wait until the element is in the document (directives/refs run before insertion).\n  onMount(() => {\n    mounted = true;\n    apply();\n  });\n  onCleanup(() => sa?.unobserve(el));\n}\n\n/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */\nexport function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void {\n  const { instance, ...opts } = read<SolidScrollStaggerOptions>(accessor);\n  let stop: (() => void) | undefined;\n  onMount(() => {\n    stop = staggerChildren(el, opts, getInstance(instance));\n  });\n  onCleanup(() => stop?.());\n}\n\n/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */\nexport function useScrollAnimate(options: SolidScrollAnimateOptions = {}): (el: Element) => void {\n  let el: Element | undefined;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  onMount(() => el && sa.observe(el, opts));\n  onCleanup(() => el && sa.unobserve(el));\n  return (node: Element) => {\n    el = node;\n  };\n}\n"],"names":["createScrollAnimate","createRenderEffect","onMount","onCleanup","staggerChildren"],"mappings":"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"}

package/dist/solid.d.cts

@@ -0,0 +1,249 @@
+/**
+ * motionary - Core Type Definitions
+ * A lightweight, high-performance scroll animation library
+ */
+/** 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 `motionary/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`).
+ * - `'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.
+ */
+type ProgressMode = 'ratio' | 'scroll';
+/**
+ * Which engine runs the entrance animation.
+ * - `'js'`: IntersectionObserver triggers a time-based Web Animation.
+ * - `'css'`: the preset runs on the browser's native scroll-driven timeline
+ *   (`animation-timeline: view()`), so its progress follows the scroll position
+ *   off the main thread. Falls back to `'js'` where unsupported.
+ * - `'auto'` (default since 2.0): native when supported, JS otherwise — and JS
+ *   whenever the element sets `duration`, `delay`, `offset` or `stagger` itself,
+ *   since those only mean something for a time-based animation.
+ */
+type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`motionary/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 {
+    /** Animation preset name, array of presets, or custom animation object */
+    animation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
+    /** Duration in milliseconds (default: 600) */
+    duration?: number;
+    /** Delay in milliseconds (default: 0) */
+    delay?: number;
+    /** Easing function (default: 'ease') */
+    easing?: EasingType;
+    /** Intersection threshold 0-1 (default: 0.1) */
+    threshold?: number | number[];
+    /** Root margin for IntersectionObserver (default: '0px') */
+    rootMargin?: string;
+    /** Whether to replay animation each time element enters viewport (default: false) */
+    repeat?: boolean;
+    /** Whether to trigger animation only once (default: true if repeat is false) */
+    once?: boolean;
+    /** Offset in pixels from the viewport edge to trigger animation (default: 0) */
+    offset?: number;
+    /** Stagger delay for child elements in ms (default: 0) */
+    stagger?: number;
+    /** Callback fired when animation starts */
+    onStart?: (element: Element) => void;
+    /** Callback fired when animation completes */
+    onComplete?: (element: Element) => void;
+    /** Callback fired when element enters viewport */
+    onEnter?: (element: Element) => void;
+    /** Callback fired when element leaves viewport */
+    onLeave?: (element: Element) => void;
+    /** Callback fired with scroll progress (0 to 1) */
+    onProgress?: (element: Element, progress: number) => void;
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
+    progressMode?: ProgressMode;
+    /**
+     * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
+     * element's progress (0 to 1, same value as `onProgress`) as an inline
+     * style, for scroll-driven effects written in plain CSS. Off by default.
+     */
+    progressVar?: string;
+    /**
+     * Animation engine (default: `'auto'`, see `ScrollEngine`). With the native
+     * engine the animation is linked to scroll position: `duration`, `delay`,
+     * `threshold`, `offset` and `stagger` do not apply; `viewRange` does.
+     */
+    engine?: ScrollEngine;
+    /**
+     * Native engine only: the view-timeline range the entrance animation spans,
+     * as `[rangeStart, rangeEnd]` (default: `['entry 0%', 'entry 100%']`).
+     */
+    viewRange?: [string, string];
+    /**
+     * Animate out when the element leaves the viewport, and back in when it
+     * re-enters (implies `repeat: true` unless `repeat` is set).
+     * - `true`: play the entrance animation in reverse.
+     * - a preset / presets / `{ from, to }`: play that animation in reverse
+     *   (e.g. `exit: 'fade-in-down'` leaves upwards).
+     * Skipped under reduced motion. (default: `false`)
+     */
+    exit?: boolean | AnimationPreset | AnimationPreset[] | CustomAnimation;
+}
+/** Global configuration for ScrollAnimate instance */
+interface ScrollAnimateConfig {
+    /** Default animation preset (default: 'fade-in-up') */
+    defaultAnimation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
+    /** Default duration in ms (default: 600) */
+    defaultDuration?: number;
+    /** Default delay in ms (default: 0) */
+    defaultDelay?: number;
+    /** Default easing (default: 'ease') */
+    defaultEasing?: EasingType;
+    /** Default threshold (default: 0.1) */
+    defaultThreshold?: number | number[];
+    /** Default root margin (default: '0px') */
+    defaultRootMargin?: string;
+    /** Whether animations replay by default (default: false) */
+    defaultRepeat?: boolean;
+    /** Default once setting (default: true) */
+    defaultOnce?: boolean;
+    /** Default offset in pixels (default: 0) */
+    defaultOffset?: number;
+    /** CSS class added before animation (default: 'sa-hidden') */
+    hiddenClass?: string;
+    /** CSS class added when element is visible (default: 'sa-visible') */
+    visibleClass?: string;
+    /** Whether to use CSS class-based animation instead of Web Animations API */
+    useClassNames?: boolean;
+    /** Disable all animations (useful for reduced-motion preference) */
+    disabled?: boolean;
+    /** Custom IntersectionObserver root element */
+    root?: Element | null;
+    /**
+     * Drop `once` elements from the registry as soon as their entrance animation
+     * 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)
+     */
+    autoUnregister?: boolean;
+    /** Default animation engine (default: `'auto'`; `'js'` restores the 1.x behaviour) */
+    defaultEngine?: ScrollEngine;
+}
+/** Registered element entry */
+interface AnimatedElement {
+    element: Element;
+    options: Required<AnimateOptions>;
+    observer: IntersectionObserver;
+    animated: boolean;
+    progressObserver?: IntersectionObserver;
+    /** Engine actually used for this element (`'css'` = native scroll-driven timeline) */
+    engine?: 'js' | 'css';
+}
+/** ScrollAnimate public API */
+interface ScrollAnimateInstance {
+    /** Observe a single element or CSS selector */
+    observe(target: string | Element | NodeList | Element[], options?: AnimateOptions): void;
+    /** Stop observing a single element or CSS selector */
+    unobserve(target: string | Element | NodeList | Element[]): void;
+    /** Observe all elements matching the data-sa attribute */
+    init(rootElement?: Element | Document): void;
+    /**
+     * Like `init()`, then keep watching `rootElement` (default: `document`) with a
+     * MutationObserver: `[data-sa]` elements added later (or that gain the
+     * attribute) are observed automatically, and removed ones are released.
+     * Returns a function that stops watching. `destroy()` stops every watcher.
+     * SSR-safe: a no-op without a DOM / MutationObserver.
+     */
+    watch(rootElement?: Element | Document): () => void;
+    /** Destroy the instance and clean up all observers */
+    destroy(): void;
+    /** Refresh all observers (useful after DOM changes) */
+    refresh(): void;
+    /** Manually trigger animation on an element */
+    animate(target: string | Element, options?: AnimateOptions): void;
+    /** Get all currently observed elements */
+    getObservedElements(): AnimatedElement[];
+    /** Update global configuration */
+    configure(config: Partial<ScrollAnimateConfig>): void;
+}
+
+/**
+ * motionary - Staggered children
+ * Reveal a container's children one after another when the container scrolls
+ * into view, optionally also animating children that are added later.
+ */
+
+interface StaggerOptions extends AnimateOptions {
+    /** Delay between consecutive children in ms (default: 80) */
+    stagger?: number;
+    /**
+     * Watch the container with a MutationObserver and animate children added
+     * later (e.g. infinite lists). Children added after the container was
+     * revealed animate when they scroll into view, staggered per batch.
+     * (default: false)
+     */
+    observeChildren?: boolean;
+}
+
+/**
+ * motionary - Solid integration
+ *
+ * ```tsx
+ * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'motionary/solid';
+ * false && scrollAnimate; // keep the directive import (TypeScript)
+ *
+ * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>
+ * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>
+ * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>
+ * ```
+ *
+ * `solid-js` is an optional peer dependency (only needed for this entry).
+ */
+
+interface SolidScrollAnimateOptions extends AnimateOptions {
+    instance?: ScrollAnimateInstance;
+}
+interface SolidScrollStaggerOptions extends StaggerOptions {
+    instance?: ScrollAnimateInstance;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface Directives {
+            scrollAnimate: SolidScrollAnimateOptions | true;
+            scrollStagger: SolidScrollStaggerOptions | true;
+        }
+    }
+}
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
+declare function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void;
+/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
+declare function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void;
+/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */
+declare function useScrollAnimate(options?: SolidScrollAnimateOptions): (el: Element) => void;
+
+export { scrollAnimate, scrollStagger, useScrollAnimate };
+export type { SolidScrollAnimateOptions, SolidScrollStaggerOptions };

package/dist/solid.d.ts

@@ -0,0 +1,249 @@
+/**
+ * motionary - Core Type Definitions
+ * A lightweight, high-performance scroll animation library
+ */
+/** 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 `motionary/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`).
+ * - `'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.
+ */
+type ProgressMode = 'ratio' | 'scroll';
+/**
+ * Which engine runs the entrance animation.
+ * - `'js'`: IntersectionObserver triggers a time-based Web Animation.
+ * - `'css'`: the preset runs on the browser's native scroll-driven timeline
+ *   (`animation-timeline: view()`), so its progress follows the scroll position
+ *   off the main thread. Falls back to `'js'` where unsupported.
+ * - `'auto'` (default since 2.0): native when supported, JS otherwise — and JS
+ *   whenever the element sets `duration`, `delay`, `offset` or `stagger` itself,
+ *   since those only mean something for a time-based animation.
+ */
+type ScrollEngine = 'auto' | 'js' | 'css';
+/** The 6.1 extended presets (`motionary/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 {
+    /** Animation preset name, array of presets, or custom animation object */
+    animation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
+    /** Duration in milliseconds (default: 600) */
+    duration?: number;
+    /** Delay in milliseconds (default: 0) */
+    delay?: number;
+    /** Easing function (default: 'ease') */
+    easing?: EasingType;
+    /** Intersection threshold 0-1 (default: 0.1) */
+    threshold?: number | number[];
+    /** Root margin for IntersectionObserver (default: '0px') */
+    rootMargin?: string;
+    /** Whether to replay animation each time element enters viewport (default: false) */
+    repeat?: boolean;
+    /** Whether to trigger animation only once (default: true if repeat is false) */
+    once?: boolean;
+    /** Offset in pixels from the viewport edge to trigger animation (default: 0) */
+    offset?: number;
+    /** Stagger delay for child elements in ms (default: 0) */
+    stagger?: number;
+    /** Callback fired when animation starts */
+    onStart?: (element: Element) => void;
+    /** Callback fired when animation completes */
+    onComplete?: (element: Element) => void;
+    /** Callback fired when element enters viewport */
+    onEnter?: (element: Element) => void;
+    /** Callback fired when element leaves viewport */
+    onLeave?: (element: Element) => void;
+    /** Callback fired with scroll progress (0 to 1) */
+    onProgress?: (element: Element, progress: number) => void;
+    /** How progress for `onProgress`/`progressVar` is measured (default: 'ratio') */
+    progressMode?: ProgressMode;
+    /**
+     * Name of a CSS custom property (e.g. `'--sa-progress'`) that receives the
+     * element's progress (0 to 1, same value as `onProgress`) as an inline
+     * style, for scroll-driven effects written in plain CSS. Off by default.
+     */
+    progressVar?: string;
+    /**
+     * Animation engine (default: `'auto'`, see `ScrollEngine`). With the native
+     * engine the animation is linked to scroll position: `duration`, `delay`,
+     * `threshold`, `offset` and `stagger` do not apply; `viewRange` does.
+     */
+    engine?: ScrollEngine;
+    /**
+     * Native engine only: the view-timeline range the entrance animation spans,
+     * as `[rangeStart, rangeEnd]` (default: `['entry 0%', 'entry 100%']`).
+     */
+    viewRange?: [string, string];
+    /**
+     * Animate out when the element leaves the viewport, and back in when it
+     * re-enters (implies `repeat: true` unless `repeat` is set).
+     * - `true`: play the entrance animation in reverse.
+     * - a preset / presets / `{ from, to }`: play that animation in reverse
+     *   (e.g. `exit: 'fade-in-down'` leaves upwards).
+     * Skipped under reduced motion. (default: `false`)
+     */
+    exit?: boolean | AnimationPreset | AnimationPreset[] | CustomAnimation;
+}
+/** Global configuration for ScrollAnimate instance */
+interface ScrollAnimateConfig {
+    /** Default animation preset (default: 'fade-in-up') */
+    defaultAnimation?: AnimationPreset | AnimationPreset[] | CustomAnimation;
+    /** Default duration in ms (default: 600) */
+    defaultDuration?: number;
+    /** Default delay in ms (default: 0) */
+    defaultDelay?: number;
+    /** Default easing (default: 'ease') */
+    defaultEasing?: EasingType;
+    /** Default threshold (default: 0.1) */
+    defaultThreshold?: number | number[];
+    /** Default root margin (default: '0px') */
+    defaultRootMargin?: string;
+    /** Whether animations replay by default (default: false) */
+    defaultRepeat?: boolean;
+    /** Default once setting (default: true) */
+    defaultOnce?: boolean;
+    /** Default offset in pixels (default: 0) */
+    defaultOffset?: number;
+    /** CSS class added before animation (default: 'sa-hidden') */
+    hiddenClass?: string;
+    /** CSS class added when element is visible (default: 'sa-visible') */
+    visibleClass?: string;
+    /** Whether to use CSS class-based animation instead of Web Animations API */
+    useClassNames?: boolean;
+    /** Disable all animations (useful for reduced-motion preference) */
+    disabled?: boolean;
+    /** Custom IntersectionObserver root element */
+    root?: Element | null;
+    /**
+     * Drop `once` elements from the registry as soon as their entrance animation
+     * 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)
+     */
+    autoUnregister?: boolean;
+    /** Default animation engine (default: `'auto'`; `'js'` restores the 1.x behaviour) */
+    defaultEngine?: ScrollEngine;
+}
+/** Registered element entry */
+interface AnimatedElement {
+    element: Element;
+    options: Required<AnimateOptions>;
+    observer: IntersectionObserver;
+    animated: boolean;
+    progressObserver?: IntersectionObserver;
+    /** Engine actually used for this element (`'css'` = native scroll-driven timeline) */
+    engine?: 'js' | 'css';
+}
+/** ScrollAnimate public API */
+interface ScrollAnimateInstance {
+    /** Observe a single element or CSS selector */
+    observe(target: string | Element | NodeList | Element[], options?: AnimateOptions): void;
+    /** Stop observing a single element or CSS selector */
+    unobserve(target: string | Element | NodeList | Element[]): void;
+    /** Observe all elements matching the data-sa attribute */
+    init(rootElement?: Element | Document): void;
+    /**
+     * Like `init()`, then keep watching `rootElement` (default: `document`) with a
+     * MutationObserver: `[data-sa]` elements added later (or that gain the
+     * attribute) are observed automatically, and removed ones are released.
+     * Returns a function that stops watching. `destroy()` stops every watcher.
+     * SSR-safe: a no-op without a DOM / MutationObserver.
+     */
+    watch(rootElement?: Element | Document): () => void;
+    /** Destroy the instance and clean up all observers */
+    destroy(): void;
+    /** Refresh all observers (useful after DOM changes) */
+    refresh(): void;
+    /** Manually trigger animation on an element */
+    animate(target: string | Element, options?: AnimateOptions): void;
+    /** Get all currently observed elements */
+    getObservedElements(): AnimatedElement[];
+    /** Update global configuration */
+    configure(config: Partial<ScrollAnimateConfig>): void;
+}
+
+/**
+ * motionary - Staggered children
+ * Reveal a container's children one after another when the container scrolls
+ * into view, optionally also animating children that are added later.
+ */
+
+interface StaggerOptions extends AnimateOptions {
+    /** Delay between consecutive children in ms (default: 80) */
+    stagger?: number;
+    /**
+     * Watch the container with a MutationObserver and animate children added
+     * later (e.g. infinite lists). Children added after the container was
+     * revealed animate when they scroll into view, staggered per batch.
+     * (default: false)
+     */
+    observeChildren?: boolean;
+}
+
+/**
+ * motionary - Solid integration
+ *
+ * ```tsx
+ * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'motionary/solid';
+ * false && scrollAnimate; // keep the directive import (TypeScript)
+ *
+ * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>
+ * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>
+ * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>
+ * ```
+ *
+ * `solid-js` is an optional peer dependency (only needed for this entry).
+ */
+
+interface SolidScrollAnimateOptions extends AnimateOptions {
+    instance?: ScrollAnimateInstance;
+}
+interface SolidScrollStaggerOptions extends StaggerOptions {
+    instance?: ScrollAnimateInstance;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface Directives {
+            scrollAnimate: SolidScrollAnimateOptions | true;
+            scrollStagger: SolidScrollStaggerOptions | true;
+        }
+    }
+}
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
+declare function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void;
+/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
+declare function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void;
+/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */
+declare function useScrollAnimate(options?: SolidScrollAnimateOptions): (el: Element) => void;
+
+export { scrollAnimate, scrollStagger, useScrollAnimate };
+export type { SolidScrollAnimateOptions, SolidScrollStaggerOptions };