@any-tdf/react-motion 0.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 any-tdf
+
+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,83 @@
+# @any-tdf/react-motion
+
+`@any-tdf/react-motion` 是一个面向 React 的动画工具包，参考 Svelte 5.56.3 的 `svelte/easing`、`svelte/transition`、`svelte/animate` 和 `svelte/motion` API。它不是 RTDF 专用包，可以在普通 React 项目中独立使用。
+
+English: `@any-tdf/react-motion` is an independent React animation package inspired by Svelte 5 animation APIs. It keeps familiar function names, parameter names, and runtime behavior while exposing React components and hooks.
+
+## Install
+
+```bash
+bun add @any-tdf/react-motion
+```
+
+## Usage
+
+### Easing
+
+```tsx
+import { cubicOut } from '@any-tdf/react-motion/easing';
+
+const easing = cubicOut;
+```
+
+### Transition
+
+```tsx
+import { Transition } from '@any-tdf/react-motion/react';
+
+export const Panel = ({ open }: { open: boolean }) => (
+	<Transition visible={open} transition="fly" params={{ y: 24, duration: 300 }}>
+		<div>Content</div>
+	</Transition>
+);
+```
+
+### Motion
+
+```tsx
+import { useTween } from '@any-tdf/react-motion/motion';
+
+export const Progress = ({ value }: { value: number }) => {
+	const { current } = useTween(value, { duration: 400 });
+
+	return <progress value={current} max={100} />;
+};
+```
+
+## API
+
+| Module | Import | Includes |
+| --- | --- | --- |
+| Easing | `@any-tdf/react-motion/easing` | 31 个 Svelte easing 函数 |
+| Transition | `@any-tdf/react-motion/transition` | `blur`、`crossfade`、`draw`、`fade`、`fly`、`scale`、`slide` |
+| Animate | `@any-tdf/react-motion/animate` | `flip`、`FlipGroup`、`useFlipList` |
+| Motion | `@any-tdf/react-motion/motion` | `Spring`、`Tween`、`spring`、`tweened`、`useSpring`、`useTween`、`prefersReducedMotion` |
+| React | `@any-tdf/react-motion/react` | `Transition`、`useTransition` |
+
+更完整的对齐说明见 [API_COMPATIBILITY.md](./API_COMPATIBILITY.md)。
+
+## Documentation Site
+
+文档站在 `site` 目录内，支持中文和英文，并包含 Svelte Playground 风格的 Easing Visualiser demo。
+
+```bash
+bun install
+bun run docs:dev
+```
+
+默认开发地址：
+
+- 中文： `http://localhost:8898/zh`
+- English: `http://localhost:8898/en`
+- Easing demo: `http://localhost:8898/zh/demo/easing`
+
+## Development
+
+```bash
+bun test
+bun run build
+bunx tsc -p site/tsconfig.json
+bun run docs:build
+```
+
+`package.json` 的 `files` 只发布 `dist`，文档站不会进入 npm 包。

package/dist/animate.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type EasingFunction } from './easing';
+import { type AnimationConfig } from './internal';
+export type { AnimationConfig };
+export interface FlipParams {
+    delay?: number;
+    duration?: number | ((len: number) => number);
+    easing?: EasingFunction;
+}
+export type AnimateFunction<P = unknown> = (node: Element, states: {
+    from: DOMRect;
+    to: DOMRect;
+}, params?: P) => AnimationConfig;
+export declare const flip: (node: Element, { from, to }: {
+    from: DOMRect;
+    to: DOMRect;
+}, params?: FlipParams) => AnimationConfig;
+export interface UseFlipListOptions<P = FlipParams> {
+    animate?: AnimateFunction<P>;
+    params?: P;
+    disabled?: boolean;
+}
+export declare const useFlipList: <K extends React.Key, P = FlipParams>(keys: readonly K[], options?: UseFlipListOptions<P>) => {
+    getRef: (key: K) => (node: HTMLElement | null) => void;
+};
+export interface FlipGroupProps<T, P = FlipParams> {
+    items: readonly T[];
+    getKey: (item: T, index: number) => React.Key;
+    children: (item: T, index: number) => React.ReactNode;
+    as?: keyof React.JSX.IntrinsicElements;
+    itemAs?: keyof React.JSX.IntrinsicElements;
+    className?: string;
+    itemClassName?: string | ((item: T, index: number) => string);
+    params?: P;
+    animate?: AnimateFunction<P>;
+    disabled?: boolean;
+}
+export declare const FlipGroup: <T, P = FlipParams>({ items, getKey, children, as, itemAs, className, itemClassName, params, animate, disabled }: FlipGroupProps<T, P>) => React.ReactElement<{
+    className: string | undefined;
+}, string | React.JSXElementConstructor<any>>;

package/dist/animate.js

@@ -0,0 +1,105 @@
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import { cubicOut } from './easing';
+import { runAnimationConfig } from './internal';
+const getZoom = (element) => {
+    const htmlElement = element;
+    if (typeof htmlElement.currentCSSZoom === 'number') {
+        return Number(htmlElement.currentCSSZoom) || 1;
+    }
+    let current = htmlElement;
+    let zoom = 1;
+    while (current !== null) {
+        zoom *= Number(getComputedStyle(current).zoom) || 1;
+        current = current.parentElement;
+    }
+    return zoom;
+};
+export const flip = (node, { from, to }, params = {}) => {
+    const { delay = 0, duration = (distance) => Math.sqrt(distance) * 120, easing = cubicOut } = params;
+    const htmlNode = node;
+    const style = getComputedStyle(node);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const [originX = 0, originY = 0] = style.transformOrigin.split(' ').map(Number.parseFloat);
+    const clientWidth = htmlNode.clientWidth || to.width || 1;
+    const clientHeight = htmlNode.clientHeight || to.height || 1;
+    const ox = originX / clientWidth;
+    const oy = originY / clientHeight;
+    const zoom = getZoom(node);
+    const sx = clientWidth / (to.width || clientWidth) / zoom;
+    const sy = clientHeight / (to.height || clientHeight) / zoom;
+    const fx = from.left + from.width * ox;
+    const fy = from.top + from.height * oy;
+    const tx = to.left + to.width * ox;
+    const ty = to.top + to.height * oy;
+    const dx = (fx - tx) * sx;
+    const dy = (fy - ty) * sy;
+    const dsx = from.width / (to.width || from.width || 1);
+    const dsy = from.height / (to.height || from.height || 1);
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    return {
+        delay,
+        duration: typeof duration === 'function' ? duration(distance) : duration,
+        easing,
+        css: (t, u) => {
+            const x = u * dx;
+            const y = u * dy;
+            const scaleX = t + u * dsx;
+            const scaleY = t + u * dsy;
+            return `transform: ${transform} translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY});`;
+        }
+    };
+};
+export const useFlipList = (keys, options = {}) => {
+    const nodeMapRef = useRef(new Map());
+    const rectMapRef = useRef(new Map());
+    const animationMapRef = useRef(new Map());
+    const animateFn = options.animate ?? flip;
+    const getRef = useCallback((key) => (node) => {
+        if (node) {
+            nodeMapRef.current.set(key, node);
+        }
+        else {
+            nodeMapRef.current.delete(key);
+        }
+    }, []);
+    useLayoutEffect(() => {
+        const nextRects = new Map();
+        for (const key of keys) {
+            const node = nodeMapRef.current.get(key);
+            if (!node)
+                continue;
+            const nextRect = node.getBoundingClientRect();
+            const previousRect = rectMapRef.current.get(key);
+            nextRects.set(key, nextRect);
+            if (options.disabled || !previousRect)
+                continue;
+            if (previousRect.left === nextRect.left && previousRect.top === nextRect.top && previousRect.right === nextRect.right && previousRect.bottom === nextRect.bottom)
+                continue;
+            animationMapRef.current.get(key)?.cancel();
+            const config = animateFn(node, { from: previousRect, to: nextRect }, options.params);
+            animationMapRef.current.set(key, runAnimationConfig(node, config, 1, { fromT: 0, direction: 'both' }));
+        }
+        rectMapRef.current = nextRects;
+        return () => {
+            for (const controller of animationMapRef.current.values()) {
+                controller.cancel();
+            }
+            animationMapRef.current.clear();
+        };
+    }, [animateFn, keys, options.disabled, options.params]);
+    return { getRef };
+};
+export const FlipGroup = ({ items, getKey, children, as = 'div', itemAs = 'div', className, itemClassName, params, animate, disabled }) => {
+    const keys = items.map(getKey);
+    const { getRef } = useFlipList(keys, { animate, params, disabled });
+    const renderedItems = items.map((item, index) => {
+        const key = getKey(item, index);
+        const resolvedClassName = typeof itemClassName === 'function' ? itemClassName(item, index) : itemClassName;
+        return React.createElement(itemAs, {
+            key,
+            ref: getRef(key),
+            className: resolvedClassName
+        }, children(item, index));
+    });
+    return React.createElement(as, { className }, renderedItems);
+};

package/dist/easing.d.ts

@@ -0,0 +1,66 @@
+export type EasingFunction = (t: number) => number;
+export declare const linear: EasingFunction;
+export declare const backInOut: EasingFunction;
+export declare const backIn: EasingFunction;
+export declare const backOut: EasingFunction;
+export declare const bounceOut: EasingFunction;
+export declare const bounceInOut: EasingFunction;
+export declare const bounceIn: EasingFunction;
+export declare const circInOut: EasingFunction;
+export declare const circIn: EasingFunction;
+export declare const circOut: EasingFunction;
+export declare const cubicInOut: EasingFunction;
+export declare const cubicIn: EasingFunction;
+export declare const cubicOut: EasingFunction;
+export declare const elasticInOut: EasingFunction;
+export declare const elasticIn: EasingFunction;
+export declare const elasticOut: EasingFunction;
+export declare const expoInOut: EasingFunction;
+export declare const expoIn: EasingFunction;
+export declare const expoOut: EasingFunction;
+export declare const quadInOut: EasingFunction;
+export declare const quadIn: EasingFunction;
+export declare const quadOut: EasingFunction;
+export declare const quartInOut: EasingFunction;
+export declare const quartIn: EasingFunction;
+export declare const quartOut: EasingFunction;
+export declare const quintInOut: EasingFunction;
+export declare const quintIn: EasingFunction;
+export declare const quintOut: EasingFunction;
+export declare const sineInOut: EasingFunction;
+export declare const sineIn: EasingFunction;
+export declare const sineOut: EasingFunction;
+export declare const easingFunctions: {
+    readonly backIn: EasingFunction;
+    readonly backInOut: EasingFunction;
+    readonly backOut: EasingFunction;
+    readonly bounceIn: EasingFunction;
+    readonly bounceInOut: EasingFunction;
+    readonly bounceOut: EasingFunction;
+    readonly circIn: EasingFunction;
+    readonly circInOut: EasingFunction;
+    readonly circOut: EasingFunction;
+    readonly cubicIn: EasingFunction;
+    readonly cubicInOut: EasingFunction;
+    readonly cubicOut: EasingFunction;
+    readonly elasticIn: EasingFunction;
+    readonly elasticInOut: EasingFunction;
+    readonly elasticOut: EasingFunction;
+    readonly expoIn: EasingFunction;
+    readonly expoInOut: EasingFunction;
+    readonly expoOut: EasingFunction;
+    readonly linear: EasingFunction;
+    readonly quadIn: EasingFunction;
+    readonly quadInOut: EasingFunction;
+    readonly quadOut: EasingFunction;
+    readonly quartIn: EasingFunction;
+    readonly quartInOut: EasingFunction;
+    readonly quartOut: EasingFunction;
+    readonly quintIn: EasingFunction;
+    readonly quintInOut: EasingFunction;
+    readonly quintOut: EasingFunction;
+    readonly sineIn: EasingFunction;
+    readonly sineInOut: EasingFunction;
+    readonly sineOut: EasingFunction;
+};
+export type EasingProps = keyof typeof easingFunctions;

package/dist/easing.js

@@ -0,0 +1,106 @@
+export const linear = (t) => t;
+export const backInOut = (t) => {
+    const s = 1.70158 * 1.525;
+    if ((t *= 2) < 1)
+        return 0.5 * (t * t * ((s + 1) * t - s));
+    return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
+};
+export const backIn = (t) => {
+    const s = 1.70158;
+    return t * t * ((s + 1) * t - s);
+};
+export const backOut = (t) => {
+    const s = 1.70158;
+    return --t * t * ((s + 1) * t + s) + 1;
+};
+export const bounceOut = (t) => {
+    const a = 4.0 / 11.0;
+    const b = 8.0 / 11.0;
+    const c = 9.0 / 10.0;
+    const ca = 4356.0 / 361.0;
+    const cb = 35442.0 / 1805.0;
+    const cc = 16061.0 / 1805.0;
+    const t2 = t * t;
+    return t < a ? 7.5625 * t2 : t < b ? 9.075 * t2 - 9.9 * t + 3.4 : t < c ? ca * t2 - cb * t + cc : 10.8 * t * t - 20.52 * t + 10.72;
+};
+export const bounceInOut = (t) => (t < 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5);
+export const bounceIn = (t) => 1.0 - bounceOut(1.0 - t);
+export const circInOut = (t) => {
+    if ((t *= 2) < 1)
+        return -0.5 * (Math.sqrt(1 - t * t) - 1);
+    return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+};
+export const circIn = (t) => 1.0 - Math.sqrt(1.0 - t * t);
+export const circOut = (t) => Math.sqrt(1 - --t * t);
+export const cubicInOut = (t) => (t < 0.5 ? 4.0 * t * t * t : 0.5 * (2.0 * t - 2.0) ** 3 + 1.0);
+export const cubicIn = (t) => t * t * t;
+export const cubicOut = (t) => {
+    const f = t - 1.0;
+    return f * f * f + 1.0;
+};
+export const elasticInOut = (t) => t < 0.5
+    ? 0.5 * Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) * 2 ** (10.0 * (2.0 * t - 1.0))
+    : 0.5 * Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t)) * 2 ** (-10.0 * (2.0 * t - 1.0)) + 1.0;
+export const elasticIn = (t) => Math.sin((13.0 * t * Math.PI) / 2) * 2 ** (10.0 * (t - 1.0));
+export const elasticOut = (t) => Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * 2 ** (-10.0 * t) + 1.0;
+export const expoInOut = (t) => (t === 0.0 || t === 1.0 ? t : t < 0.5 ? +0.5 * 2 ** (20.0 * t - 10.0) : -0.5 * 2 ** (10.0 - t * 20.0) + 1.0);
+export const expoIn = (t) => (t === 0.0 ? t : 2 ** (10.0 * (t - 1.0)));
+export const expoOut = (t) => (t === 1.0 ? t : 1.0 - 2 ** (-10.0 * t));
+export const quadInOut = (t) => {
+    t /= 0.5;
+    if (t < 1)
+        return 0.5 * t * t;
+    t--;
+    return -0.5 * (t * (t - 2) - 1);
+};
+export const quadIn = (t) => t * t;
+export const quadOut = (t) => -t * (t - 2.0);
+export const quartInOut = (t) => (t < 0.5 ? +8.0 * t ** 4.0 : -8.0 * (t - 1.0) ** 4.0 + 1.0);
+export const quartIn = (t) => t ** 4.0;
+export const quartOut = (t) => (t - 1.0) ** 3.0 * (1.0 - t) + 1.0;
+export const quintInOut = (t) => {
+    if ((t *= 2) < 1)
+        return 0.5 * t * t * t * t * t;
+    return 0.5 * ((t -= 2) * t * t * t * t + 2);
+};
+export const quintIn = (t) => t * t * t * t * t;
+export const quintOut = (t) => --t * t * t * t * t + 1;
+export const sineInOut = (t) => -0.5 * (Math.cos(Math.PI * t) - 1);
+export const sineIn = (t) => {
+    const v = Math.cos(t * Math.PI * 0.5);
+    return Math.abs(v) < 1e-14 ? 1 : 1 - v;
+};
+export const sineOut = (t) => Math.sin((t * Math.PI) / 2);
+export const easingFunctions = {
+    backIn,
+    backInOut,
+    backOut,
+    bounceIn,
+    bounceInOut,
+    bounceOut,
+    circIn,
+    circInOut,
+    circOut,
+    cubicIn,
+    cubicInOut,
+    cubicOut,
+    elasticIn,
+    elasticInOut,
+    elasticOut,
+    expoIn,
+    expoInOut,
+    expoOut,
+    linear,
+    quadIn,
+    quadInOut,
+    quadOut,
+    quartIn,
+    quartInOut,
+    quartOut,
+    quintIn,
+    quintInOut,
+    quintOut,
+    sineIn,
+    sineInOut,
+    sineOut
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './easing';
+export * from './transition';
+export * from './animate';
+export * from './motion';
+export * from './react';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './easing';
+export * from './transition';
+export * from './animate';
+export * from './motion';
+export * from './react';

package/dist/internal.d.ts

@@ -0,0 +1,26 @@
+import { type EasingFunction } from './easing';
+export interface AnimationConfig {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+    css?: (t: number, u: number) => string;
+    tick?: (t: number, u: number) => void;
+}
+export type DeferredAnimationConfig = (options?: {
+    direction: 'in' | 'out' | 'both';
+}) => AnimationConfig;
+export type MaybeDeferredAnimationConfig = AnimationConfig | DeferredAnimationConfig;
+export type AnimationController = {
+    cancel: () => void;
+    deactivate: () => void;
+    reset: () => void;
+    t: () => number;
+    finished: Promise<void>;
+};
+export declare const runAnimationConfig: (element: Element, config: MaybeDeferredAnimationConfig, targetT: 0 | 1, options?: {
+    fromT?: number;
+    onStart?: () => void;
+    onEnd?: () => void;
+    direction?: "in" | "out" | "both";
+}) => AnimationController;
+export declare const splitCssUnit: (value: number | string) => [number, string];

package/dist/internal.js

@@ -0,0 +1,226 @@
+import { linear } from './easing';
+const propertyToCamelCase = (property) => {
+    if (property === 'float')
+        return 'cssFloat';
+    if (property === 'offset')
+        return 'cssOffset';
+    if (property.startsWith('--'))
+        return property;
+    const parts = property.split('-');
+    if (parts.length === 1)
+        return parts[0];
+    return `${parts[0]}${parts
+        .slice(1)
+        .map((part) => `${part[0]?.toUpperCase() || ''}${part.slice(1)}`)
+        .join('')}`;
+};
+const parseCssDeclarations = (css) => {
+    const entries = [];
+    for (const part of css.split(';')) {
+        const index = part.indexOf(':');
+        if (index < 0)
+            continue;
+        const property = part.slice(0, index).trim();
+        const value = part.slice(index + 1).trim();
+        if (!property || !value)
+            continue;
+        entries.push([property, value]);
+    }
+    return entries;
+};
+const cssToKeyframe = (css) => {
+    const keyframe = {};
+    for (const [property, value] of parseCssDeclarations(css)) {
+        keyframe[propertyToCamelCase(property)] = value;
+    }
+    return keyframe;
+};
+const applyCssText = (element, css) => {
+    const style = element.style;
+    for (const [property, value] of parseCssDeclarations(css)) {
+        style.setProperty(property, value);
+    }
+};
+const resolveConfig = (config, direction) => {
+    if (typeof config === 'function') {
+        return config({ direction });
+    }
+    return config;
+};
+const now = () => (typeof performance === 'undefined' ? Date.now() : performance.now());
+const scheduleFrame = (callback) => {
+    if (typeof requestAnimationFrame === 'undefined') {
+        const id = setTimeout(() => callback(now()), 16);
+        return id;
+    }
+    return requestAnimationFrame(callback);
+};
+const cancelScheduledFrame = (id) => {
+    if (typeof cancelAnimationFrame === 'undefined') {
+        clearTimeout(id);
+        return;
+    }
+    cancelAnimationFrame(id);
+};
+export const runAnimationConfig = (element, config, targetT, options = {}) => {
+    const isIntro = targetT === 1;
+    const direction = options.direction ?? (isIntro ? 'in' : 'out');
+    let resolved = false;
+    let deactivated = false;
+    let aborted = false;
+    let animation = null;
+    let rafId = null;
+    let currentT = options.fromT ?? 1 - targetT;
+    let finishPromiseResolve = () => { };
+    const finished = new Promise((resolve) => {
+        finishPromiseResolve = resolve;
+    });
+    const finish = () => {
+        if (deactivated) {
+            finishPromiseResolve();
+            return;
+        }
+        options.onEnd?.();
+        finishPromiseResolve();
+    };
+    queueMicrotask(() => {
+        if (aborted)
+            return;
+        const resolvedConfig = resolveConfig(config, direction);
+        const delay = resolvedConfig.delay ?? 0;
+        const duration = resolvedConfig.duration ?? 0;
+        const easing = resolvedConfig.easing ?? linear;
+        const fromT = currentT;
+        const delta = targetT - fromT;
+        const activeDuration = Math.abs(delta) * duration;
+        resolved = true;
+        if (!activeDuration && !delay) {
+            options.onStart?.();
+            currentT = targetT;
+            resolvedConfig.tick?.(targetT, 1 - targetT);
+            if (resolvedConfig.css)
+                applyCssText(element, resolvedConfig.css(targetT, 1 - targetT));
+            finish();
+            return;
+        }
+        const runMain = () => {
+            if (aborted)
+                return;
+            options.onStart?.();
+            if (!activeDuration) {
+                currentT = targetT;
+                resolvedConfig.tick?.(targetT, 1 - targetT);
+                if (resolvedConfig.css)
+                    applyCssText(element, resolvedConfig.css(targetT, 1 - targetT));
+                finish();
+                return;
+            }
+            if (resolvedConfig.tick) {
+                const start = now();
+                const step = (time) => {
+                    if (aborted)
+                        return;
+                    const ratio = Math.min((time - start) / activeDuration, 1);
+                    currentT = fromT + delta * easing(ratio);
+                    resolvedConfig.tick?.(currentT, 1 - currentT);
+                    if (resolvedConfig.css)
+                        applyCssText(element, resolvedConfig.css(currentT, 1 - currentT));
+                    if (ratio < 1) {
+                        rafId = scheduleFrame(step);
+                    }
+                    else {
+                        currentT = targetT;
+                        resolvedConfig.tick?.(targetT, 1 - targetT);
+                        if (resolvedConfig.css)
+                            applyCssText(element, resolvedConfig.css(targetT, 1 - targetT));
+                        finish();
+                    }
+                };
+                rafId = scheduleFrame(step);
+                return;
+            }
+            if (resolvedConfig.css && typeof element.animate === 'function') {
+                const frameCount = Math.max(1, Math.ceil(activeDuration / (1000 / 60)));
+                const keyframes = [];
+                for (let index = 0; index <= frameCount; index += 1) {
+                    const ratio = index / frameCount;
+                    const t = fromT + delta * easing(ratio);
+                    keyframes.push(cssToKeyframe(resolvedConfig.css(t, 1 - t)));
+                }
+                animation = element.animate(keyframes, { duration: activeDuration, fill: 'forwards' });
+                animation.onfinish = () => {
+                    currentT = targetT;
+                    finish();
+                };
+                return;
+            }
+            const start = now();
+            const step = (time) => {
+                if (aborted)
+                    return;
+                const ratio = Math.min((time - start) / activeDuration, 1);
+                currentT = fromT + delta * easing(ratio);
+                if (ratio < 1) {
+                    rafId = scheduleFrame(step);
+                }
+                else {
+                    currentT = targetT;
+                    finish();
+                }
+            };
+            rafId = scheduleFrame(step);
+        };
+        if (delay > 0 && typeof element.animate === 'function') {
+            animation = element.animate([], { duration: delay, fill: 'forwards' });
+            animation.onfinish = () => {
+                animation?.cancel();
+                animation = null;
+                runMain();
+            };
+        }
+        else if (delay > 0) {
+            const start = now();
+            const wait = (time) => {
+                if (aborted)
+                    return;
+                if (time - start >= delay) {
+                    rafId = null;
+                    runMain();
+                    return;
+                }
+                rafId = scheduleFrame(wait);
+            };
+            rafId = scheduleFrame(wait);
+        }
+        else {
+            runMain();
+        }
+    });
+    return {
+        cancel: () => {
+            aborted = true;
+            if (animation) {
+                animation.onfinish = null;
+                animation.cancel();
+                animation = null;
+            }
+            if (rafId !== null) {
+                cancelScheduledFrame(rafId);
+                rafId = null;
+            }
+            finishPromiseResolve();
+        },
+        deactivate: () => {
+            deactivated = true;
+        },
+        reset: () => {
+            currentT = targetT === 0 ? 1 : 0;
+        },
+        t: () => (resolved ? currentT : options.fromT ?? 1 - targetT),
+        finished
+    };
+};
+export const splitCssUnit = (value) => {
+    const split = typeof value === 'string' && value.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+    return split ? [Number.parseFloat(split[1]), split[2] || 'px'] : [value, 'px'];
+};