@lynx-js/motion-canary 0.0.0 → 0.0.2-canary-20260129-d02a6062

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @lynx-js/motion
+
+## 0.0.2-canary-20260129083254-d02a60626d6cbad44bb9cffcb470c99ed0356649
+
+### Patch Changes
+
+- Add initial support for `@lynx-js/motion` ([#1062](https://github.com/lynx-family/lynx-stack/pull/1062))
+
+- Updated dependencies [[`35f520a`](https://github.com/lynx-family/lynx-stack/commit/35f520a560c4d498ab3617f63a600239602f371c), [`1fa1ddc`](https://github.com/lynx-family/lynx-stack/commit/1fa1ddc77447704d6865509a884aa71ea72cd56e)]:
+  - @lynx-js/react@0.116.2-canary-20260129083254-d02a60626d6cbad44bb9cffcb470c99ed0356649

package/LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2025 The Lynx Authors.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/NOTICE

@@ -0,0 +1,35 @@
+Copyright 2025 The Lynx Authors. All rights reserved.
+
+@lynx-js/motion
+
+This product includes software developed by the Framer team and contributors.
+
+The following packages are adapted or used:
+- framer-motion (MIT License)
+- motion-dom (MIT License)
+- motion-utils (MIT License)
+- motion-canvas (MIT License, where applicable)
+
+--------------------------------------------------------------------------------
+
+The MIT License (MIT)
+
+Copyright (c) 2018 Framer B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# @lynx-js/motion
+
+A powerful animation library for Lynx, ported from [Motion for React (framer-motion)](https://motion.dev/). It brings declarative animations and gesture handling to the Lynx ecosystem.
+
+## Installation
+
+```bash
+npm install @lynx-js/motion
+```
+
+## Usage
+
+### Basic Animation
+
+Currently, `@lynx-js/motion` supports imperative animations using the `animate` function on the main thread.
+
+```tsx
+import { animate } from '@lynx-js/motion';
+import { useMainThreadRef, runOnMainThread, useEffect } from '@lynx-js/react';
+import type { MainThread } from '@lynx-js/types';
+
+export function MyComponent() {
+  const elementRef = useMainThreadRef<MainThread.Element>(null);
+
+  useEffect(() => {
+    runOnMainThread(() => {
+      'main thread';
+      if (elementRef.current) {
+        animate(
+          elementRef.current,
+          { opacity: 1, x: 100 },
+          { duration: 1 },
+        );
+      }
+    })();
+  }, []);
+
+  return (
+    <view
+      main-thread:ref={elementRef}
+      style={{ opacity: 0, width: 100, height: 100, backgroundColor: 'blue' }}
+    />
+  );
+}
+```
+
+For more comprehensive examples, please refer to the [examples/motion](https://github.com/lynx-family/lynx-stack/tree/main/examples/motion) directory in this repository.
+
+## Motion Mini (`@lynx-js/motion/mini`)
+
+Motion Mini is a lightweight, **main-thread-optimized** version of the library. It provides a core subset of animation capabilities designed for high performance and low bundle size.
+
+To use it, import from `@lynx-js/motion/mini`:
+
+```tsx
+import { animate, createMotionValue } from '@lynx-js/motion/mini';
+```
+
+### Key Features
+
+- **Main Thread Animation**: Runs directly on the main thread, bypassing the JS thread for smoother performance.
+- **Small Bundle Size**: Includes only essential animation logic.
+- **Optimized for Numbers**: Primarily designed for animating numeric values.
+
+### Differences from Standard Motion
+
+| Feature               | Standard Motion                                   | Motion Mini               |
+| :-------------------- | :------------------------------------------------ | :------------------------ |
+| **Animation Targets** | Numbers, Strings (colors, units), Objects, Arrays | **Numbers only** (mostly) |
+| **Keyframes**         | Full support                                      | Limited support           |
+| **Layout Animations** | Supported                                         | Not supported             |
+| **Gesture Handlers**  | Full suite (drag, pan, hover, etc.)               | Not included              |
+
+> **Note**: `MotionValue` in Mini primarily works with numbers.
+
+### CLI Reference for Mini
+
+#### `createMotionValue<T>(initial: T)`
+
+Creates a `MotionValue` that tracks state and velocity.
+
+```typescript
+const mv = createMotionValue(0);
+mv.set(100);
+```
+
+#### `animate(value, target, options)`
+
+Animates a `MotionValue` or number.
+
+```typescript
+animate(mv, 100, {
+  type: 'spring',
+  stiffness: 300,
+  damping: 30,
+});
+```
+
+## License & Attribution
+
+This package is licensed under the Apache-2.0 License.
+
+It adapts code from [Motion for React (framer-motion)](https://motion.dev/), [motion-dom](https://github.com/motiondivision/motion/tree/main/packages/motion-dom), and [motion-utils](https://github.com/motiondivision/motion/tree/main/packages/motion-utils) which are licensed under the MIT License.
+
+See [LICENSE](./LICENSE), [NOTICE](./NOTICE) for details.

package/dist/animation/index.d.ts

@@ -0,0 +1,48 @@
+import '../polyfill/shim.js';
+import { stagger as stagger_ } from 'framer-motion/dom';
+import type { AnimationSequence, ObjectTarget, SequenceOptions } from 'framer-motion/dom';
+import { spring as spring_ } from 'motion-dom';
+import type { AnimationOptions, AnimationPlaybackControlsWithThen, AnyResolvedKeyframe, DOMKeyframesDefinition, MapInputRange, Mixer, MotionValue, MotionValueOptions, SpringOptions, TransformOptions, UnresolvedValueKeyframe, ValueAnimationTransition } from 'motion-dom';
+import { useMotionValueRefEvent } from '../hooks/useMotionEvent.js';
+import type { ElementOrElements } from '../types/index.js';
+/**
+ * Animate a sequence
+ */
+declare function animate(sequence: AnimationSequence, options?: SequenceOptions): AnimationPlaybackControlsWithThen;
+/**
+ * Animate a string
+ */
+declare function animate(value: string, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
+/**
+ * Animate a string
+ */
+declare function animate(value: string | MotionValue<string>, keyframes: string | UnresolvedValueKeyframe<string>[], options?: ValueAnimationTransition<string>): AnimationPlaybackControlsWithThen;
+/**
+ * Animate a number
+ */
+declare function animate(value: number | MotionValue<number>, keyframes: number | UnresolvedValueKeyframe<number>[], options?: ValueAnimationTransition<number>): AnimationPlaybackControlsWithThen;
+/**
+ * Animate a generic motion value
+ */
+declare function animate<V extends string | number>(value: V | MotionValue<V>, keyframes: V | UnresolvedValueKeyframe<V>[], options?: ValueAnimationTransition<V>): AnimationPlaybackControlsWithThen;
+/**
+ * Animate an object
+ */
+declare function animate<O extends {}>(object: O | O[], keyframes: ObjectTarget<O>, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
+/**
+ * Animate a main thread element
+ */
+declare function animate(value: ElementOrElements, keyframes: DOMKeyframesDefinition, options?: AnimationOptions): AnimationPlaybackControlsWithThen;
+declare function stagger(...args: Parameters<typeof stagger_>): ReturnType<typeof stagger_>;
+declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
+declare function spring(...args: Parameters<typeof spring_>): ReturnType<typeof spring_>;
+declare function springValue<T extends AnyResolvedKeyframe>(source: T | MotionValue<T>, options?: SpringOptions): MotionValue<T>;
+declare function mix<T>(from: T, to: T): Mixer<T>;
+declare function mix(from: number, to: number, p: number): number;
+declare function progress(from: number, to: number, value: number): number;
+declare function clamp(min: number, max: number, v: number): number;
+declare function mapValue<O>(inputValue: MotionValue<number>, inputRange: MapInputRange, outputRange: O[], options?: TransformOptions<O>): MotionValue<O>;
+declare function transformValue<O>(transform: () => O): MotionValue<O>;
+declare function styleEffect(subject: string | ElementOrElements, values: Record<string, MotionValue>): () => void;
+export { animate, stagger, motionValue, spring, springValue, mix, progress, mapValue, clamp, transformValue, styleEffect, };
+export { useMotionValueRefEvent };

package/dist/animation/index.js

@@ -0,0 +1,65 @@
+import "../polyfill/shim.js";
+import { animate, clamp, progress, stagger } from "framer-motion/dom" with {
+    runtime: "shared"
+};
+import { mapValue, mix, spring, springValue, styleEffect, transformValue } from "motion-dom" with {
+    runtime: "shared"
+};
+import { useMotionValueRefEvent } from "../hooks/useMotionEvent.js";
+import { motionValue } from "../polyfill/MotionValue.js" with {
+    runtime: "shared"
+};
+import { elementOrSelector2Dom } from "../utils/elementHelper.js";
+import { noopMT } from "../utils/noop.js";
+function animation_animate(subjectOrSequence, optionsOrKeyframes, options) {
+    'main thread';
+    const isStringSubject = 'string' == typeof subjectOrSequence;
+    const isKeyframesObject = 'object' == typeof optionsOrKeyframes && null !== optionsOrKeyframes && !Array.isArray(optionsOrKeyframes);
+    const isKeyframesArray = Array.isArray(optionsOrKeyframes) && optionsOrKeyframes.every((k)=>'object' == typeof k && null !== k && !Array.isArray(k));
+    let realSubjectOrSequence = subjectOrSequence;
+    if (!isStringSubject || isKeyframesObject || isKeyframesArray) realSubjectOrSequence = elementOrSelector2Dom(subjectOrSequence) ?? subjectOrSequence;
+    return animate(realSubjectOrSequence, optionsOrKeyframes, options);
+}
+function animation_stagger(...args) {
+    'main thread';
+    return stagger(...args);
+}
+function animation_motionValue(init, options) {
+    'main thread';
+    return motionValue(init, options);
+}
+function animation_spring(...args) {
+    'main thread';
+    return spring(...args);
+}
+function animation_springValue(source, options) {
+    'main thread';
+    return springValue(source, options);
+}
+function animation_mix(from, to, p) {
+    'main thread';
+    return mix(from, to, p);
+}
+function animation_progress(from, to, value) {
+    'main thread';
+    return progress(from, to, value);
+}
+function animation_clamp(min, max, v) {
+    'main thread';
+    return clamp(min, max, v);
+}
+function animation_mapValue(inputValue, inputRange, outputRange, options) {
+    'main thread';
+    return mapValue(inputValue, inputRange, outputRange, options);
+}
+function animation_transformValue(transform) {
+    'main thread';
+    return transformValue(transform);
+}
+function animation_styleEffect(subject, values) {
+    'main thread';
+    const elements = elementOrSelector2Dom(subject);
+    if (!elements) return noopMT;
+    return styleEffect(elements, values);
+}
+export { animation_animate as animate, animation_clamp as clamp, animation_mapValue as mapValue, animation_mix as mix, animation_motionValue as motionValue, animation_progress as progress, animation_spring as spring, animation_springValue as springValue, animation_stagger as stagger, animation_styleEffect as styleEffect, animation_transformValue as transformValue, useMotionValueRefEvent };

package/dist/hooks/useMotionEvent.d.ts

@@ -0,0 +1,10 @@
+import type { MotionValueEventCallbacks } from 'motion-dom';
+import type { MainThreadRef } from '@lynx-js/react';
+interface Listenable<V> {
+    on(event: 'change', callback: (v: V) => void): () => void;
+}
+/**
+ * @experimental useMotionValueEvent, but only accepts motionValueRef format, highly experimental, subject to change
+ */
+export declare function useMotionValueRefEvent<V, EventName extends keyof MotionValueEventCallbacks<V>>(valueRef: MainThreadRef<Listenable<V>>, event: 'change', callback: MotionValueEventCallbacks<V>[EventName]): void;
+export {};

package/dist/hooks/useMotionEvent.js

@@ -0,0 +1,21 @@
+import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+function useMotionValueRefEvent(valueRef, event, callback) {
+    const unListenRef = useMainThreadRef();
+    useEffect(()=>{
+        runOnMainThread(()=>{
+            'main thread';
+            unListenRef.current = valueRef.current.on(event, callback);
+        })();
+        return ()=>{
+            runOnMainThread(()=>{
+                'main thread';
+                unListenRef.current?.();
+            })();
+        };
+    }, [
+        valueRef,
+        event,
+        callback
+    ]);
+}
+export { useMotionValueRefEvent };

package/dist/hooks/useMotionValueRef.d.ts

@@ -0,0 +1,7 @@
+import type { MotionValue } from 'motion-dom';
+import type { MainThreadRef } from '@lynx-js/react';
+export declare function useMotionValueRefCore<T, MV>(value: T, make: (v: T) => MV): MainThreadRef<MV>;
+/**
+ * @experimental useMotionValue, but in MainThreadRef format, highly experimental, subject to change
+ */
+export declare function useMotionValueRef<T>(value: T): MainThreadRef<MotionValue<T>>;

package/dist/hooks/useMotionValueRef.js

@@ -0,0 +1,21 @@
+import { runOnMainThread, useMainThreadRef, useMemo } from "@lynx-js/react";
+import { runWorkletCtx } from "@lynx-js/react/worklet-runtime/bindings";
+import { motionValue } from "../animation/index.js";
+function useMotionValueRefCore(value, make) {
+    const motionValueRef = useMainThreadRef();
+    useMemo(()=>{
+        function setMotionValue(value) {
+            'main thread';
+            if (!motionValueRef.current) motionValueRef.current = make(value);
+        }
+        if (__BACKGROUND__) runOnMainThread(setMotionValue)(value);
+        else runWorkletCtx(setMotionValue, [
+            value
+        ]);
+    }, []);
+    return motionValueRef;
+}
+function useMotionValueRef(value) {
+    return useMotionValueRefCore(value, motionValue);
+}
+export { useMotionValueRef, useMotionValueRefCore };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { animate, stagger, motionValue, spring, springValue, mix, progress, mapValue, clamp, transformValue, styleEffect, useMotionValueRefEvent, } from './animation/index.js';
+export { useMotionValueRef } from './hooks/useMotionValueRef.js';
+export type { MotionValue } from 'motion-dom';

package/dist/index.js

@@ -0,0 +1,3 @@
+import { animate, clamp, mapValue, mix, motionValue, progress, spring, springValue, stagger, styleEffect, transformValue, useMotionValueRefEvent } from "./animation/index.js";
+import { useMotionValueRef } from "./hooks/useMotionValueRef.js";
+export { animate, clamp, mapValue, mix, motionValue, progress, spring, springValue, stagger, styleEffect, transformValue, useMotionValueRef, useMotionValueRefEvent };

package/dist/mini/core/MotionValue.d.ts

@@ -0,0 +1,29 @@
+export interface MotionValue<T> {
+    get(): T;
+    set(v: T): void;
+    getVelocity(): number;
+    jump(v: T): void;
+    onChange(callback: (v: T) => void): () => void;
+    on(event: 'change', callback: (v: T) => void): () => void;
+    /**
+     * Internal method to update velocity, usually called by the animation loop.
+     */
+    updateVelocity(v: number): void;
+    stop(): void;
+    /**
+     * Check if this MotionValue is currently animating.
+     */
+    isAnimating(): boolean;
+    /**
+     * Clear all change listeners.
+     */
+    clearListeners(): void;
+    /**
+     * Destroy this MotionValue, stopping all animations and clearing all listeners.
+     */
+    destroy(): void;
+}
+export declare function createMotionValue<T>(initial: T): MotionValue<T>;
+export interface MotionValueEventCallbacks<V> {
+    change: (v: V) => void;
+}

package/dist/mini/core/MotionValue.js

@@ -0,0 +1,73 @@
+function createMotionValue(initial) {
+    'main thread';
+    class MotionValueImpl {
+        v;
+        velocity = 0;
+        listeners = new Set();
+        activeAnimations = new Set();
+        lastUpdated = 0;
+        constructor(initial){
+            this.v = initial;
+        }
+        get() {
+            return this.v;
+        }
+        set(v) {
+            const now = Date.now();
+            if ('number' == typeof v && 'number' == typeof this.v) {
+                const delta = v - this.v;
+                const timeDelta = (now - this.lastUpdated) / 1000;
+                if (timeDelta > 0) this.velocity = delta / timeDelta;
+            }
+            this.lastUpdated = now;
+            this.v = v;
+            this.notify();
+        }
+        updateVelocity(v) {
+            this.velocity = v;
+        }
+        getVelocity() {
+            return this.velocity;
+        }
+        jump(v) {
+            this.v = v;
+            this.velocity = 0;
+            this.lastUpdated = Date.now();
+            this.notify();
+        }
+        onChange(callback) {
+            this.listeners.add(callback);
+            return ()=>this.listeners.delete(callback);
+        }
+        on(event, callback) {
+            if ('change' === event) return this.onChange(callback);
+            throw new Error("mini animate() does not support event type other than 'change'");
+        }
+        notify() {
+            for (const cb of this.listeners)cb(this.v);
+        }
+        attach(cancel) {
+            this.activeAnimations.add(cancel);
+            return ()=>this.activeAnimations.delete(cancel);
+        }
+        stop() {
+            for (const cancel of this.activeAnimations)cancel();
+            this.activeAnimations.clear();
+        }
+        isAnimating() {
+            return this.activeAnimations.size > 0;
+        }
+        clearListeners() {
+            this.listeners.clear();
+        }
+        destroy() {
+            this.stop();
+            this.clearListeners();
+        }
+        toJSON() {
+            return String(this.v);
+        }
+    }
+    return new MotionValueImpl(initial);
+}
+export { createMotionValue };

package/dist/mini/core/animate.d.ts

@@ -0,0 +1,22 @@
+import { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear } from './easings.js';
+import type { MotionValue } from './MotionValue.js';
+export type Easing = (t: number) => number;
+export interface AnimationOptions {
+    type?: 'spring' | 'keyframes' | 'decay';
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    duration?: number;
+    ease?: Easing;
+    from?: number;
+    to?: number;
+    velocity?: number;
+    onUpdate?: (v: number) => void;
+    onComplete?: () => void;
+}
+export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear, };
+export declare function animate(value: MotionValue<number> | number | ((v: number) => void), target: number, options?: AnimationOptions): {
+    stop: () => void;
+    then: (cb: () => void) => Promise<void>;
+    onFinish: () => void;
+};

package/dist/mini/core/animate.js

@@ -0,0 +1,93 @@
+import { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear } from "./easings.js";
+import { spring } from "./spring.js";
+function animate(value, target, options = {}) {
+    'main thread';
+    let currentV = 0;
+    let startVelocity = options.velocity ?? 0;
+    if ('number' == typeof value) currentV = value;
+    else if ('function' == typeof value) currentV = options.from ?? 0;
+    else {
+        currentV = value.get();
+        if (null == options.velocity) startVelocity = value.getVelocity();
+        if (value.stop) value.stop();
+    }
+    if ('decay' === options.type || 'keyframes' === options.type) throw new Error('mini animate() does not support type=decay/keyframes yet');
+    const isSpring = 'spring' === options.type || !options.ease && !options.duration && null == options.type;
+    const { from: _from, to: _to, ...springOptions } = options;
+    const solver = isSpring ? spring({
+        ...springOptions,
+        keyframes: [
+            currentV,
+            target
+        ],
+        velocity: startVelocity
+    }) : null;
+    const startTime = Date.now();
+    let canceled = false;
+    let resolvePromise;
+    let settled = false;
+    const completionPromise = new Promise((resolve)=>{
+        resolvePromise = resolve;
+    });
+    const settle = ()=>{
+        if (settled) return;
+        settled = true;
+        controls.onFinish();
+        resolvePromise?.();
+    };
+    let detach;
+    const controls = {
+        stop: ()=>{
+            canceled = true;
+            detach?.();
+            settle();
+        },
+        then: (cb)=>{
+            controls.onFinish = cb;
+            if (settled) cb();
+            return completionPromise;
+        },
+        onFinish: ()=>{}
+    };
+    const duration = options.duration ?? 0.3;
+    const ease = options.ease ?? easeOut;
+    if ('object' == typeof value && value && 'attach' in value && 'function' == typeof value.attach) detach = value.attach(controls.stop);
+    const tick = ()=>{
+        if (canceled) return;
+        const now = Date.now();
+        const elapsed = (now - startTime) / 1000;
+        const elapsedMs = now - startTime;
+        let finished = false;
+        let current = 0;
+        if (isSpring && solver) {
+            const state = solver.next(elapsedMs);
+            current = state.value;
+            finished = state.done;
+        } else if (elapsed >= duration) {
+            finished = true;
+            current = target;
+        } else {
+            const p = elapsed / duration;
+            const eased = ease(p);
+            current = currentV + (target - currentV) * eased;
+        }
+        if ('function' == typeof value) value(current);
+        else if ('object' == typeof value && value.set) value.set(current);
+        if (options.onUpdate) options.onUpdate(current);
+        if (finished) {
+            if (!isSpring) {
+                if ('function' == typeof value) value(target);
+                else if ('object' == typeof value && value.set) {
+                    value.set(target);
+                    value.updateVelocity(0);
+                }
+            }
+            if (options.onComplete) options.onComplete();
+            settle();
+            detach?.();
+        } else requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+    return controls;
+}
+export { animate, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear };

package/dist/mini/core/easings.d.ts

@@ -0,0 +1,11 @@
+export declare function anticipate(t: number): number;
+export declare function backIn(t: number): number;
+export declare function backInOut(t: number): number;
+export declare function backOut(t: number): number;
+export declare function circIn(t: number): number;
+export declare function circInOut(t: number): number;
+export declare function circOut(t: number): number;
+export declare function easeIn(t: number): number;
+export declare function easeInOut(t: number): number;
+export declare function easeOut(t: number): number;
+export declare function linear(t: number): number;

package/dist/mini/core/easings.js

@@ -0,0 +1,71 @@
+import { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, noop } from "motion-utils";
+import { registerCallable } from "../../utils/registeredFunction.js";
+let anticipateHandle = 'anticipateHandle';
+let backInHandle = 'backInHandle';
+let backInOutHandle = 'backInOutHandle';
+let backOutHandle = 'backOutHandle';
+let circInHandle = 'circInHandle';
+let circInOutHandle = 'circInOutHandle';
+let circOutHandle = 'circOutHandle';
+let easeInHandle = 'easeInHandle';
+let easeInOutHandle = 'easeInOutHandle';
+let easeOutHandle = 'easeOutHandle';
+let linearHandle = 'linearHandle';
+if (__MAIN_THREAD__) {
+    anticipateHandle = registerCallable(anticipate, 'anticipateHandle');
+    backInHandle = registerCallable(backIn, 'backInHandle');
+    backInOutHandle = registerCallable(backInOut, 'backInOutHandle');
+    backOutHandle = registerCallable(backOut, 'backOutHandle');
+    circInHandle = registerCallable(circIn, 'circInHandle');
+    circInOutHandle = registerCallable(circInOut, 'circInOutHandle');
+    circOutHandle = registerCallable(circOut, 'circOutHandle');
+    easeInHandle = registerCallable(easeIn, 'easeInHandle');
+    easeInOutHandle = registerCallable(easeInOut, 'easeInOutHandle');
+    easeOutHandle = registerCallable(easeOut, 'easeOutHandle');
+    linearHandle = registerCallable(noop, 'linearHandle');
+}
+function easings_anticipate(t) {
+    'main thread';
+    return globalThis.runOnRegistered(anticipateHandle)(t);
+}
+function easings_backIn(t) {
+    'main thread';
+    return globalThis.runOnRegistered(backInHandle)(t);
+}
+function easings_backInOut(t) {
+    'main thread';
+    return globalThis.runOnRegistered(backInOutHandle)(t);
+}
+function easings_backOut(t) {
+    'main thread';
+    return globalThis.runOnRegistered(backOutHandle)(t);
+}
+function easings_circIn(t) {
+    'main thread';
+    return globalThis.runOnRegistered(circInHandle)(t);
+}
+function easings_circInOut(t) {
+    'main thread';
+    return globalThis.runOnRegistered(circInOutHandle)(t);
+}
+function easings_circOut(t) {
+    'main thread';
+    return globalThis.runOnRegistered(circOutHandle)(t);
+}
+function easings_easeIn(t) {
+    'main thread';
+    return globalThis.runOnRegistered(easeInHandle)(t);
+}
+function easings_easeInOut(t) {
+    'main thread';
+    return globalThis.runOnRegistered(easeInOutHandle)(t);
+}
+function easings_easeOut(t) {
+    'main thread';
+    return globalThis.runOnRegistered(easeOutHandle)(t);
+}
+function linear(t) {
+    'main thread';
+    return globalThis.runOnRegistered(linearHandle)(t);
+}
+export { easings_anticipate as anticipate, easings_backIn as backIn, easings_backInOut as backInOut, easings_backOut as backOut, easings_circIn as circIn, easings_circInOut as circInOut, easings_circOut as circOut, easings_easeIn as easeIn, easings_easeInOut as easeInOut, easings_easeOut as easeOut, linear };

package/dist/mini/core/spring.d.ts

@@ -0,0 +1,2 @@
+import { spring as spring_ } from 'motion-dom';
+export declare function spring(...args: Parameters<typeof spring_>): ReturnType<typeof spring_>;

package/dist/mini/core/spring.js

@@ -0,0 +1,9 @@
+import { spring } from "motion-dom";
+import { registerCallable } from "../../utils/registeredFunction.js";
+let springHandle = 'springHandle';
+if (__MAIN_THREAD__) springHandle = registerCallable(spring, 'springHandle');
+function spring_spring(...args) {
+    'main thread';
+    return globalThis.runOnRegistered(springHandle)(...args);
+}
+export { spring_spring as spring };

package/dist/mini/index.d.ts

@@ -0,0 +1,16 @@
+import type { MainThreadRef } from '@lynx-js/react';
+import '../polyfill/shim.js';
+import type { MotionValue, MotionValueEventCallbacks } from './core/MotionValue.js';
+export { animate, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear, } from './core/animate.js';
+export type { AnimationOptions, Easing } from './core/animate.js';
+export { createMotionValue } from './core/MotionValue.js';
+export type { MotionValue, MotionValueEventCallbacks, } from './core/MotionValue.js';
+export { spring } from './core/spring.js';
+/**
+ * @experimental useMotionValue, but in MainThreadRef format, highly experimental, subject to change
+ */
+export declare function useMotionValueRef<T>(value: T): MainThreadRef<MotionValue<T>>;
+/**
+ * @experimental useMotionValueEvent, but only accepts motionValueRef format, highly experimental, subject to change
+ */
+export declare function useMotionValueRefEvent<V, EventName extends keyof MotionValueEventCallbacks<V>>(valueRef: MainThreadRef<MotionValue<V>>, event: 'change', callback: MotionValueEventCallbacks<V>[EventName]): void;

package/dist/mini/index.js

@@ -0,0 +1,13 @@
+import "../polyfill/shim.js";
+import { useMotionValueRefEvent } from "../hooks/useMotionEvent.js";
+import { useMotionValueRefCore } from "../hooks/useMotionValueRef.js";
+import { createMotionValue } from "./core/MotionValue.js";
+import { animate, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear } from "./core/animate.js";
+import { spring } from "./core/spring.js";
+function useMotionValueRef(value) {
+    return useMotionValueRefCore(value, createMotionValue);
+}
+function mini_useMotionValueRefEvent(valueRef, event, callback) {
+    return useMotionValueRefEvent(valueRef, event, callback);
+}
+export { animate, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, createMotionValue, easeIn, easeInOut, easeOut, linear, spring, useMotionValueRef, mini_useMotionValueRefEvent as useMotionValueRefEvent };

package/dist/polyfill/MotionValue.d.ts

@@ -0,0 +1 @@
+export { motionValue } from 'motion-dom';

package/dist/polyfill/MotionValue.js

@@ -0,0 +1,5 @@
+import { MotionValue, motionValue } from "motion-dom";
+MotionValue.prototype.toJSON = function() {
+    return {};
+};
+export { motionValue };

package/dist/polyfill/element.d.ts

@@ -0,0 +1,50 @@
+import type { MainThread } from '@lynx-js/types';
+interface StyleObject {
+    [key: string]: string | ((property: string, value: string) => void);
+    setProperty(property: string, value: string): void;
+}
+export declare class ElementCompt {
+    private element;
+    constructor(element: MainThread.Element);
+    getComputedStyle(): Record<string, string>;
+    get style(): StyleObject;
+    set style(styles: Record<string, string>);
+    private getStyleProperty;
+    get backgroundColor(): string;
+    set backgroundColor(value: string);
+    get color(): string;
+    set color(value: string);
+    get fontSize(): string;
+    set fontSize(value: string);
+    get width(): string;
+    set width(value: string);
+    get height(): string;
+    set height(value: string);
+    get margin(): string;
+    set margin(value: string);
+    get padding(): string;
+    set padding(value: string);
+    get display(): string;
+    set display(value: string);
+    get position(): string;
+    set position(value: string);
+    get top(): string;
+    set top(value: string);
+    get left(): string;
+    set left(value: string);
+    get right(): string;
+    set right(value: string);
+    get bottom(): string;
+    set bottom(value: string);
+    getBoundingClientRect(): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+}
+export {};

package/dist/polyfill/element.js

@@ -0,0 +1,138 @@
+class ElementCompt {
+    element;
+    constructor(element){
+        this.element = element;
+    }
+    getComputedStyle() {
+        const styleObject = {};
+        return new Proxy(styleObject, {
+            get: (_target, prop)=>__GetComputedStyleByKey(this.element.element, prop)
+        });
+    }
+    get style() {
+        const styleObject = {};
+        styleObject.setProperty = (property, value)=>{
+            if ('transform' === property && 'none' === value) return this.element.setStyleProperty('transform', 'scale(1, 1)');
+            this.element.setStyleProperty(property, value);
+        };
+        return new Proxy(styleObject, {
+            set: (target, prop, value)=>{
+                if ('string' == typeof prop && 'setProperty' !== prop) {
+                    if ('transform' === prop && 'none' === value) {
+                        this.element.setStyleProperty('transform', 'scale(1, 1)');
+                        return true;
+                    }
+                    this.element.setStyleProperty(prop, String(value));
+                    target[prop] = value;
+                }
+                return true;
+            },
+            get: (_target, prop)=>{
+                if ('string' == typeof prop && 'setProperty' !== prop) return this.getStyleProperty(prop);
+            }
+        });
+    }
+    set style(styles) {
+        this.element.setStyleProperties(styles);
+    }
+    getStyleProperty(name) {
+        return __GetComputedStyleByKey(this.element.element, name);
+    }
+    get backgroundColor() {
+        return this.getStyleProperty('backgroundColor');
+    }
+    set backgroundColor(value) {
+        this.element.setStyleProperty('backgroundColor', value);
+    }
+    get color() {
+        return this.getStyleProperty('color');
+    }
+    set color(value) {
+        this.element.setStyleProperty('color', value);
+    }
+    get fontSize() {
+        return this.getStyleProperty('fontSize');
+    }
+    set fontSize(value) {
+        this.element.setStyleProperty('fontSize', value);
+    }
+    get width() {
+        return this.getStyleProperty('width');
+    }
+    set width(value) {
+        this.element.setStyleProperty('width', value);
+    }
+    get height() {
+        return this.getStyleProperty('height');
+    }
+    set height(value) {
+        this.element.setStyleProperty('height', value);
+    }
+    get margin() {
+        return this.getStyleProperty('margin');
+    }
+    set margin(value) {
+        this.element.setStyleProperty('margin', value);
+    }
+    get padding() {
+        return this.getStyleProperty('padding');
+    }
+    set padding(value) {
+        this.element.setStyleProperty('padding', value);
+    }
+    get display() {
+        return this.getStyleProperty('display');
+    }
+    set display(value) {
+        this.element.setStyleProperty('display', value);
+    }
+    get position() {
+        return this.getStyleProperty('position');
+    }
+    set position(value) {
+        this.element.setStyleProperty('position', value);
+    }
+    get top() {
+        return this.getStyleProperty('top');
+    }
+    set top(value) {
+        this.element.setStyleProperty('top', value);
+    }
+    get left() {
+        return this.getStyleProperty('left');
+    }
+    set left(value) {
+        this.element.setStyleProperty('left', value);
+    }
+    get right() {
+        return this.getStyleProperty('right');
+    }
+    set right(value) {
+        this.element.setStyleProperty('right', value);
+    }
+    get bottom() {
+        return this.getStyleProperty('bottom');
+    }
+    set bottom(value) {
+        this.element.setStyleProperty('bottom', value);
+    }
+    getBoundingClientRect() {
+        const width = Number.parseFloat(this.getStyleProperty('width')) || 0;
+        const height = Number.parseFloat(this.getStyleProperty('height')) || 0;
+        const left = Number.parseFloat(this.getStyleProperty('left')) || 0;
+        const top = Number.parseFloat(this.getStyleProperty('top')) || 0;
+        const right = left + width;
+        const bottom = top + height;
+        return {
+            left,
+            top,
+            right,
+            bottom,
+            width,
+            height,
+            x: left,
+            y: top
+        };
+    }
+}
+export { ElementCompt };

package/dist/polyfill/shim.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/polyfill/shim.js

@@ -0,0 +1,38 @@
+import { ElementCompt } from "./element.js";
+const timeOrigin = "u" > typeof performance && performance.timeOrigin ? performance.timeOrigin : Date.now();
+function shimQueueMicroTask() {
+    if (!globalThis.queueMicrotask) if ("u" > typeof lynx && lynx.queueMicrotask) globalThis.queueMicrotask = lynx.queueMicrotask;
+    else {
+        const resolved = globalThis.Promise.resolve();
+        globalThis.queueMicrotask = (fn)=>{
+            resolved.then(fn).catch((err)=>{
+                setTimeout(()=>{
+                    throw err;
+                }, 0);
+            });
+        };
+    }
+}
+function shimGlobals() {
+    if (!globalThis.document) globalThis.document = {};
+    if (!globalThis.performance) globalThis.performance = {
+        now: ()=>Date.now() - timeOrigin
+    };
+    document.querySelector ??= lynx.querySelector;
+    document.querySelectorAll ??= lynx.querySelectorAll;
+    if (!globalThis.NodeList) globalThis.NodeList = class {
+    };
+    if (!globalThis.SVGElement) globalThis.SVGElement = class {
+    };
+    if (!globalThis.HTMLElement) globalThis.HTMLElement = class {
+    };
+    if (!globalThis.window) globalThis.window = {
+        getComputedStyle: (ele)=>ele.getComputedStyle()
+    };
+    globalThis.Element ??= ElementCompt;
+    globalThis.EventTarget ??= ElementCompt;
+    if (!globalThis.getComputedStyle && globalThis.window?.getComputedStyle) globalThis.getComputedStyle = globalThis.window.getComputedStyle;
+    shimQueueMicroTask();
+}
+if (__MAIN_THREAD__) shimGlobals();
+else if (__DEV__) shimQueueMicroTask();

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import type { MainThread } from '@lynx-js/types';
+export type ElementOrElements = MainThread.Element | MainThread.Element[];

package/dist/utils/elementHelper.d.ts

@@ -0,0 +1,3 @@
+import type { ElementOrSelector } from 'motion-dom';
+import type { MainThread } from '@lynx-js/types';
+export declare function elementOrSelector2Dom(nodesOrSelector: string | MainThread.Element | MainThread.Element[]): ElementOrSelector | undefined;

package/dist/utils/elementHelper.js

@@ -0,0 +1,18 @@
+import { isMainThreadElement, isMainThreadElementArray } from "./isMainThreadElement.js";
+import { ElementCompt } from "../polyfill/element.js" with {
+    runtime: "shared"
+};
+function elementOrSelector2Dom(nodesOrSelector) {
+    'main thread';
+    let domElements;
+    if ('string' == typeof nodesOrSelector || isMainThreadElement(nodesOrSelector) || isMainThreadElementArray(nodesOrSelector)) {
+        let elementNodes;
+        if ('string' == typeof nodesOrSelector) {
+            elementNodes = lynx.querySelectorAll(nodesOrSelector);
+            if (!elementNodes || Array.isArray(elementNodes) && 0 === elementNodes.length) return;
+        } else elementNodes = nodesOrSelector;
+        domElements = Array.isArray(elementNodes) ? elementNodes.map((el)=>new ElementCompt(el)) : new ElementCompt(elementNodes);
+    }
+    return domElements;
+}
+export { elementOrSelector2Dom };

package/dist/utils/isMainThreadElement.d.ts

@@ -0,0 +1,3 @@
+import type { MainThread } from '@lynx-js/types';
+export declare function isMainThreadElement(ele: unknown): ele is MainThread.Element;
+export declare function isMainThreadElementArray(eleArr: unknown): eleArr is MainThread.Element[];

package/dist/utils/isMainThreadElement.js

@@ -0,0 +1,10 @@
+function isMainThreadElement(ele) {
+    'main thread';
+    if (ele && 'element' in ele) return true;
+    return false;
+}
+function isMainThreadElementArray(eleArr) {
+    'main thread';
+    return Array.isArray(eleArr) && eleArr.every((ele)=>isMainThreadElement(ele));
+}
+export { isMainThreadElement, isMainThreadElementArray };

package/dist/utils/noop.d.ts

@@ -0,0 +1,2 @@
+export declare const noop: () => void;
+export declare function noopMT(): void;

package/dist/utils/noop.js

@@ -0,0 +1,5 @@
+const noop = ()=>{};
+function noopMT() {
+    'main thread';
+}
+export { noop, noopMT };

package/dist/utils/registeredFunction.d.ts

@@ -0,0 +1,5 @@
+export declare function registerCallable(func: CallableFunction, id: string): string;
+export declare function runOnRegistered<T extends CallableFunction = CallableFunction>(id: string): T;
+declare global {
+    var runOnRegistered: <T extends CallableFunction = CallableFunction>(id: string) => T;
+}

package/dist/utils/registeredFunction.js

@@ -0,0 +1,12 @@
+import { noop } from "./noop.js";
+const registeredCallableMap = new Map();
+function registerCallable(func, id) {
+    registeredCallableMap.set(id, func);
+    return id;
+}
+function runOnRegistered(id) {
+    const func = registeredCallableMap.get(id) ?? noop;
+    return func;
+}
+globalThis.runOnRegistered = runOnRegistered;
+export { registerCallable, runOnRegistered };

package/package.json

@@ -1,9 +1,67 @@
 {
   "name": "@lynx-js/motion-canary",
-  "version": "0.0.0",
+  "version": "0.0.2-canary-20260129-d02a6062",
+  "private": false,
   "description": "This is a motion adapter for Lynx.js",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "lynx",
+    "motion",
+    "framer-motion"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lynx-family/lynx-stack.git",
+    "directory": "packages/motion"
+  },
   "license": "Apache-2.0",
+  "sideEffects": [
+    "./dist/polyfill/shim.js"
+  ],
   "type": "module",
-  "main": "index.js"
-}
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./mini": {
+      "types": "./dist/mini/index.d.ts",
+      "import": "./dist/mini/index.js",
+      "default": "./dist/mini/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "NOTICE",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "framer-motion": "12.23.12",
+    "motion-dom": "12.23.12",
+    "motion-utils": "12.23.6"
+  },
+  "devDependencies": {
+    "@lynx-js/types": "3.6.0",
+    "rsbuild-plugin-publint": "0.3.3",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.116.2-canary-20260129-d02a6062"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": "*",
+    "@lynx-js/types": "*"
+  },
+  "peerDependenciesMeta": {
+    "@lynx-js/types": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "test": "vitest run"
+  }
+}

package/index.js

@@ -1 +0,0 @@
-export {}