@mlola-ui/motion 1.0.8 → 1.0.9

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./pointer-math.ts";
+export * from "./primitives.tsx";
+export * from "./raf.ts";
+export * from "./reduced-motion.ts";
+export * from "./spring.ts";
+export * from "./tilt-3d.tsx";

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from "./pointer-math.js";
+export * from "./primitives.js";
+export * from "./raf.js";
+export * from "./reduced-motion.js";
+export * from "./spring.js";
+export * from "./tilt-3d.js";

package/dist/pointer-math.d.ts

@@ -0,0 +1,15 @@
+export interface PointerKinetics {
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    speed: number;
+    angle: number;
+    timestamp: number;
+    pointerType: string;
+    active: boolean;
+}
+export declare const idlePointerKinetics: PointerKinetics;
+export declare function calculatePointerKinetics(previous: PointerKinetics, point: Pick<PointerKinetics, "x" | "y" | "timestamp" | "pointerType">, smoothing?: number): PointerKinetics;

package/dist/pointer-math.js

@@ -0,0 +1,35 @@
+export const idlePointerKinetics = Object.freeze({
+    x: 0,
+    y: 0,
+    deltaX: 0,
+    deltaY: 0,
+    velocityX: 0,
+    velocityY: 0,
+    speed: 0,
+    angle: 0,
+    timestamp: 0,
+    pointerType: "",
+    active: false,
+});
+export function calculatePointerKinetics(previous, point, smoothing = 0.25) {
+    const deltaX = previous.active ? point.x - previous.x : 0;
+    const deltaY = previous.active ? point.y - previous.y : 0;
+    const elapsed = previous.active
+        ? Math.max(1, Math.min(64, point.timestamp - previous.timestamp))
+        : 16;
+    const instantX = (deltaX / elapsed) * 1000;
+    const instantY = (deltaY / elapsed) * 1000;
+    const blend = Math.max(0, Math.min(1, smoothing));
+    const velocityX = previous.velocityX + (instantX - previous.velocityX) * blend;
+    const velocityY = previous.velocityY + (instantY - previous.velocityY) * blend;
+    return {
+        ...point,
+        deltaX,
+        deltaY,
+        velocityX,
+        velocityY,
+        speed: Math.hypot(velocityX, velocityY),
+        angle: Math.atan2(velocityY, velocityX),
+        active: true,
+    };
+}

package/dist/primitives.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface AnimatedCounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+    value: number | string;
+    stagger?: number;
+}
+export declare function AnimatedCounter({ value, className, stagger, "aria-label": spoken, ...props }: AnimatedCounterProps): React.JSX.Element;
+export interface TextSwapProps extends React.HTMLAttributes<HTMLSpanElement> {
+    text: string;
+}
+export declare function TextSwap({ text, className, style, ...props }: TextSwapProps): React.JSX.Element;
+export declare function ShimmerText({ children, className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+export interface MagneticProps extends React.HTMLAttributes<HTMLDivElement> {
+    pull?: number;
+}
+export declare const Magnetic: React.ForwardRefExoticComponent<MagneticProps & React.RefAttributes<HTMLDivElement>>;
+export interface OriginMorphProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+}
+export declare function OriginMorph({ isOpen, children, className, style, ...props }: OriginMorphProps): React.JSX.Element | null;

package/dist/primitives.js

@@ -0,0 +1,107 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useReducedMotion } from "./reduced-motion.js";
+import { createSpringAnimation, springPresets } from "./spring.js";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(" ");
+}
+export function AnimatedCounter({ value, className, stagger = 35, "aria-label": spoken, ...props }) {
+    const reducedMotion = useReducedMotion();
+    const text = String(value);
+    return (_jsxs("span", { ...props, className: joinClasses("ml-motion-counter", className), children: [_jsx("span", { className: "ml-visually-hidden", children: spoken ?? text }), Array.from(text).map((character, index) => (_jsx("span", { "aria-hidden": "true", className: "ml-motion-counter-digit", style: reducedMotion
+                    ? undefined
+                    : {
+                        animation: "counter-flip 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both",
+                        animationDelay: `${index * stagger}ms`,
+                    }, children: character }, `${index}-${character}`)))] }));
+}
+export function TextSwap({ text, className, style, ...props }) {
+    const reducedMotion = useReducedMotion();
+    return (_createElement("span", { ...props, key: text, className: joinClasses("ml-motion-text", className), style: {
+            animation: reducedMotion
+                ? undefined
+                : "text-swap 240ms cubic-bezier(0.16, 1, 0.3, 1) both",
+            ...style,
+        } }, text));
+}
+export function ShimmerText({ children, className, ...props }) {
+    const reducedMotion = useReducedMotion();
+    return (_jsx("span", { ...props, className: joinClasses(!reducedMotion && "ml-motion-shimmer", className), children: children }));
+}
+export const Magnetic = React.forwardRef(({ children, pull = 0.25, className, style, onPointerMove, onPointerLeave, onPointerCancel, ...props }, forwardedRef) => {
+    const reducedMotion = useReducedMotion();
+    const nodeRef = React.useRef(null);
+    const offset = React.useRef({ x: 0, y: 0 });
+    const setRef = React.useCallback((node) => {
+        nodeRef.current = node;
+        if (typeof forwardedRef === "function")
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    // The pull is a real spring, not a CSS transition: it can be interrupted
+    // mid-flight, and the loop stops the moment it comes to rest.
+    const paint = React.useCallback(() => {
+        const node = nodeRef.current;
+        if (!node)
+            return;
+        node.style.transform = `translate3d(${offset.current.x.toFixed(2)}px, ${offset.current.y.toFixed(2)}px, 0)`;
+    }, []);
+    const springX = React.useMemo(() => createSpringAnimation({
+        options: springPresets.snappy,
+        onUpdate: (value) => {
+            offset.current.x = value;
+            paint();
+        },
+    }), [paint]);
+    const springY = React.useMemo(() => createSpringAnimation({
+        options: springPresets.snappy,
+        onUpdate: (value) => {
+            offset.current.y = value;
+            paint();
+        },
+    }), [paint]);
+    React.useEffect(() => () => {
+        springX.stop();
+        springY.stop();
+    }, [springX, springY]);
+    const moveTo = (x, y) => {
+        springX.setTarget(x);
+        springY.setTarget(y);
+    };
+    const reset = () => moveTo(0, 0);
+    const handlePointerMove = (event) => {
+        onPointerMove?.(event);
+        const node = nodeRef.current;
+        if (event.defaultPrevented || reducedMotion || event.pointerType === "touch" || !node)
+            return;
+        const rect = node.getBoundingClientRect();
+        moveTo((event.clientX - (rect.left + rect.width / 2)) * pull, (event.clientY - (rect.top + rect.height / 2)) * pull);
+    };
+    React.useEffect(() => {
+        if (!reducedMotion)
+            return;
+        springX.set(0);
+        springY.set(0);
+    }, [reducedMotion, springX, springY]);
+    return (_jsx("div", { ...props, ref: setRef, onPointerMove: handlePointerMove, onPointerLeave: (event) => {
+            onPointerLeave?.(event);
+            reset();
+        }, onPointerCancel: (event) => {
+            onPointerCancel?.(event);
+            reset();
+        }, className: joinClasses("ml-motion-magnetic", className), style: {
+            transform: "translate3d(0, 0, 0)",
+            willChange: reducedMotion ? undefined : "transform",
+            ...style,
+        }, children: children }));
+});
+Magnetic.displayName = "Magnetic";
+export function OriginMorph({ isOpen, children, className, style, ...props }) {
+    const reducedMotion = useReducedMotion();
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { ...props, className: joinClasses("ml-motion-origin-morph", !reducedMotion && "ml-animate-pop", className), style: style, children: children }));
+}

package/dist/raf.d.ts

@@ -0,0 +1,6 @@
+export type FrameTask = (timestamp: number) => void;
+export declare function scheduleFrame(task: FrameTask): () => void;
+export declare function createRafBatcher<T>(apply: (value: T, timestamp: number) => void): {
+    schedule(value: T): void;
+    cancel(): void;
+};

package/dist/raf.js

@@ -0,0 +1,49 @@
+const queue = new Map();
+let frameId = null;
+function flush(timestamp) {
+    frameId = null;
+    const tasks = Array.from(queue.values());
+    queue.clear();
+    for (const task of tasks)
+        task(timestamp);
+}
+export function scheduleFrame(task) {
+    queue.set(task, task);
+    if (frameId === null) {
+        if (typeof requestAnimationFrame === "undefined") {
+            flush(typeof performance === "undefined" ? Date.now() : performance.now());
+        }
+        else {
+            frameId = requestAnimationFrame(flush);
+        }
+    }
+    return () => {
+        queue.delete(task);
+        if (queue.size === 0 && frameId !== null && typeof cancelAnimationFrame !== "undefined") {
+            cancelAnimationFrame(frameId);
+            frameId = null;
+        }
+    };
+}
+export function createRafBatcher(apply) {
+    let latest;
+    let queued = false;
+    let cancel = () => { };
+    return {
+        schedule(value) {
+            latest = value;
+            if (queued)
+                return;
+            queued = true;
+            const task = (timestamp) => {
+                queued = false;
+                apply(latest, timestamp);
+            };
+            cancel = scheduleFrame(task);
+        },
+        cancel() {
+            queued = false;
+            cancel();
+        },
+    };
+}

package/dist/reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;

package/dist/reduced-motion.js

@@ -0,0 +1,16 @@
+"use client";
+import * as React from "react";
+const query = "(prefers-reduced-motion: reduce)";
+function subscribe(listener) {
+    if (typeof window === "undefined")
+        return () => { };
+    const media = window.matchMedia(query);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+}
+function snapshot() {
+    return typeof window !== "undefined" && window.matchMedia(query).matches;
+}
+export function useReducedMotion() {
+    return React.useSyncExternalStore(subscribe, snapshot, () => false);
+}

package/dist/spring.d.ts

@@ -0,0 +1,49 @@
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    restSpeed?: number;
+    restDelta?: number;
+    maxDelta?: number;
+}
+export interface SpringState {
+    value: number;
+    velocity: number;
+}
+export interface SpringStep extends SpringState {
+    done: boolean;
+}
+export declare const springPresets: {
+    readonly gentle: {
+        readonly stiffness: 170;
+        readonly damping: 26;
+        readonly mass: 1;
+    };
+    readonly snappy: {
+        readonly stiffness: 320;
+        readonly damping: 28;
+        readonly mass: 0.9;
+    };
+    readonly bouncy: {
+        readonly stiffness: 260;
+        readonly damping: 18;
+        readonly mass: 1;
+    };
+};
+export declare function integrateSpring(state: SpringState, target: number, deltaMs: number, { stiffness, damping, mass, restSpeed, restDelta, maxDelta, }?: SpringOptions): SpringStep;
+export interface SpringAnimation {
+    setTarget(target: number): void;
+    set(value: number): void;
+    stop(): void;
+    get(): SpringState & {
+        target: number;
+        running: boolean;
+    };
+}
+export declare function createSpringAnimation({ from, to, options, onUpdate, onComplete, }: {
+    from?: number;
+    to?: number;
+    options?: SpringOptions;
+    onUpdate: (value: number, state: SpringState) => void;
+    onComplete?: (value: number) => void;
+}): SpringAnimation;

package/dist/spring.js

@@ -0,0 +1,79 @@
+export const springPresets = {
+    gentle: { stiffness: 170, damping: 26, mass: 1 },
+    snappy: { stiffness: 320, damping: 28, mass: 0.9 },
+    bouncy: { stiffness: 260, damping: 18, mass: 1 },
+};
+export function integrateSpring(state, target, deltaMs, { stiffness = 240, damping = 26, mass = 1, restSpeed = 0.01, restDelta = 0.01, maxDelta = 32, } = {}) {
+    const safeMass = Math.max(0.001, mass);
+    let remaining = Math.max(0, Math.min(maxDelta, deltaMs)) / 1000;
+    let value = state.value;
+    let velocity = state.velocity;
+    // Fixed substeps make the semi-implicit Euler integration stable after slow frames.
+    while (remaining > 0) {
+        const step = Math.min(remaining, 1 / 120);
+        const springForce = -stiffness * (value - target);
+        const dampingForce = -damping * velocity;
+        velocity += ((springForce + dampingForce) / safeMass) * step;
+        value += velocity * step;
+        remaining -= step;
+    }
+    const done = Math.abs(velocity) <= restSpeed && Math.abs(target - value) <= restDelta;
+    return done
+        ? { value: target, velocity: 0, done: true }
+        : { value, velocity, done: false };
+}
+export function createSpringAnimation({ from = 0, to = from, options, onUpdate, onComplete, }) {
+    let state = { value: from, velocity: 0 };
+    let target = to;
+    let running = false;
+    let frame = null;
+    let previousTime = 0;
+    const stop = () => {
+        if (frame !== null && typeof cancelAnimationFrame !== "undefined") {
+            cancelAnimationFrame(frame);
+        }
+        frame = null;
+        running = false;
+        previousTime = 0;
+    };
+    const tick = (timestamp) => {
+        const delta = previousTime === 0 ? 1000 / 60 : timestamp - previousTime;
+        previousTime = timestamp;
+        const next = integrateSpring(state, target, delta, options);
+        state = { value: next.value, velocity: next.velocity };
+        onUpdate(state.value, state);
+        if (next.done) {
+            stop();
+            onComplete?.(state.value);
+        }
+        else {
+            frame = requestAnimationFrame(tick);
+        }
+    };
+    const start = () => {
+        if (running || Object.is(state.value, target))
+            return;
+        running = true;
+        if (typeof requestAnimationFrame === "undefined") {
+            state = { value: target, velocity: 0 };
+            onUpdate(target, state);
+            running = false;
+            onComplete?.(target);
+            return;
+        }
+        frame = requestAnimationFrame(tick);
+    };
+    return {
+        setTarget(nextTarget) {
+            target = nextTarget;
+            start();
+        },
+        set(value) {
+            stop();
+            state = { value, velocity: 0 };
+            onUpdate(value, state);
+        },
+        stop,
+        get: () => ({ ...state, target, running }),
+    };
+}

package/dist/tilt-3d.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface Tilt3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxTilt?: number;
+    perspective?: number;
+    glare?: boolean;
+    scale?: number;
+}
+export declare const Tilt3D: React.ForwardRefExoticComponent<Tilt3DProps & React.RefAttributes<HTMLDivElement>>;

package/dist/tilt-3d.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createRafBatcher } from "./raf.js";
+import { useReducedMotion } from "./reduced-motion.js";
+export const Tilt3D = React.forwardRef(({ maxTilt = 12, perspective = 900, glare = true, scale = 1.02, className, style, children, onPointerMove, onPointerLeave, onPointerCancel, ...props }, forwardedRef) => {
+    const cardRef = React.useRef(null);
+    const reducedMotion = useReducedMotion();
+    const setRef = React.useCallback((node) => {
+        cardRef.current = node;
+        if (typeof forwardedRef === "function")
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    const batcher = React.useMemo(() => createRafBatcher((frame) => {
+        const node = cardRef.current;
+        if (!node)
+            return;
+        node.style.transform = frame.active
+            ? `perspective(${perspective}px) rotateX(${frame.x.toFixed(2)}deg) rotateY(${frame.y.toFixed(2)}deg) scale3d(${scale}, ${scale}, ${scale})`
+            : `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
+        node.style.transition = frame.active
+            ? "transform 80ms linear"
+            : "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+        node.style.setProperty("--mlola-glare-x", `${frame.glareX}%`);
+        node.style.setProperty("--mlola-glare-y", `${frame.glareY}%`);
+        node.style.setProperty("--mlola-glare-opacity", frame.active && glare ? "1" : "0");
+    }), [glare, perspective, scale]);
+    React.useEffect(() => () => batcher.cancel(), [batcher]);
+    const reset = () => {
+        batcher.schedule({ x: 0, y: 0, glareX: 50, glareY: 50, active: false });
+    };
+    const handlePointerMove = (event) => {
+        onPointerMove?.(event);
+        const node = cardRef.current;
+        if (event.defaultPrevented ||
+            reducedMotion ||
+            event.pointerType === "touch" ||
+            !node)
+            return;
+        const rect = node.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+        batcher.schedule({
+            x: (y - 0.5) * -maxTilt,
+            y: (x - 0.5) * maxTilt,
+            glareX: x * 100,
+            glareY: y * 100,
+            active: true,
+        });
+    };
+    const handlePointerLeave = (event) => {
+        onPointerLeave?.(event);
+        reset();
+    };
+    const handlePointerCancel = (event) => {
+        onPointerCancel?.(event);
+        reset();
+    };
+    React.useEffect(() => {
+        if (reducedMotion)
+            reset();
+    }, [reducedMotion]);
+    return (_jsxs("div", { ...props, ref: setRef, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, className: className, style: {
+            transform: `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,
+            transformStyle: "preserve-3d",
+            transition: "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+            willChange: reducedMotion ? undefined : "transform",
+            position: "relative",
+            ...style,
+        }, children: [children, glare && (_jsx("span", { "aria-hidden": "true", className: "ml-motion-tilt-glare", style: reducedMotion ? { transition: "none" } : undefined }))] }));
+});
+Tilt3D.displayName = "Tilt3D";

package/package.json

@@ -1,23 +1,36 @@
 {
   "name": "@mlola-ui/motion",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Reduced-motion-aware kinetic primitives for Mlola UI",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "./motion.css"
   ],
   "files": [
-    "src",
+    "dist",
     "motion.css"
   ],
   "exports": {
-    ".": "./src/index.ts",
-    "./physics": "./src/spring.ts",
-    "./raf": "./src/raf.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./physics": {
+      "types": "./dist/spring.d.ts",
+      "default": "./dist/spring.js"
+    },
+    "./raf": {
+      "types": "./dist/raf.d.ts",
+      "default": "./dist/raf.js"
+    },
     "./motion.css": "./motion.css"
   },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepack": "npm run build"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from "./pointer-math";
-export * from "./primitives";
-export * from "./raf";
-export * from "./reduced-motion";
-export * from "./spring";
-export * from "./tilt-3d";

package/src/pointer-math.ts

@@ -1,54 +0,0 @@
-export interface PointerKinetics {
-  x: number;
-  y: number;
-  deltaX: number;
-  deltaY: number;
-  velocityX: number;
-  velocityY: number;
-  speed: number;
-  angle: number;
-  timestamp: number;
-  pointerType: string;
-  active: boolean;
-}
-
-export const idlePointerKinetics: PointerKinetics = Object.freeze({
-  x: 0,
-  y: 0,
-  deltaX: 0,
-  deltaY: 0,
-  velocityX: 0,
-  velocityY: 0,
-  speed: 0,
-  angle: 0,
-  timestamp: 0,
-  pointerType: "",
-  active: false,
-});
-
-export function calculatePointerKinetics(
-  previous: PointerKinetics,
-  point: Pick<PointerKinetics, "x" | "y" | "timestamp" | "pointerType">,
-  smoothing = 0.25
-): PointerKinetics {
-  const deltaX = previous.active ? point.x - previous.x : 0;
-  const deltaY = previous.active ? point.y - previous.y : 0;
-  const elapsed = previous.active
-    ? Math.max(1, Math.min(64, point.timestamp - previous.timestamp))
-    : 16;
-  const instantX = (deltaX / elapsed) * 1000;
-  const instantY = (deltaY / elapsed) * 1000;
-  const blend = Math.max(0, Math.min(1, smoothing));
-  const velocityX = previous.velocityX + (instantX - previous.velocityX) * blend;
-  const velocityY = previous.velocityY + (instantY - previous.velocityY) * blend;
-  return {
-    ...point,
-    deltaX,
-    deltaY,
-    velocityX,
-    velocityY,
-    speed: Math.hypot(velocityX, velocityY),
-    angle: Math.atan2(velocityY, velocityX),
-    active: true,
-  };
-}

package/src/primitives.tsx

@@ -1,229 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useReducedMotion } from "./reduced-motion";
-import { createSpringAnimation, springPresets } from "./spring";
-
-function joinClasses(...values: Array<string | false | null | undefined>) {
-  return values.filter(Boolean).join(" ");
-}
-
-export interface AnimatedCounterProps extends React.HTMLAttributes<HTMLSpanElement> {
-  value: number | string;
-  stagger?: number;
-}
-
-export function AnimatedCounter({
-  value,
-  className,
-  stagger = 35,
-  "aria-label": spoken,
-  ...props
-}: AnimatedCounterProps) {
-  const reducedMotion = useReducedMotion();
-  const text = String(value);
-  return (
-    <span {...props} className={joinClasses("ml-motion-counter", className)}>
-      {/* A span cannot carry a label, so the value is read as text and the flipping digits are hidden. */}
-      <span className="ml-visually-hidden">{spoken ?? text}</span>
-      {Array.from(text).map((character, index) => (
-        <span
-          aria-hidden="true"
-          key={`${index}-${character}`}
-          className="ml-motion-counter-digit"
-          style={
-            reducedMotion
-              ? undefined
-              : {
-                  animation: "counter-flip 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both",
-                  animationDelay: `${index * stagger}ms`,
-                }
-          }
-        >
-          {character}
-        </span>
-      ))}
-    </span>
-  );
-}
-
-export interface TextSwapProps extends React.HTMLAttributes<HTMLSpanElement> {
-  text: string;
-}
-
-export function TextSwap({ text, className, style, ...props }: TextSwapProps) {
-  const reducedMotion = useReducedMotion();
-  return (
-    <span
-      {...props}
-      key={text}
-      className={joinClasses("ml-motion-text", className)}
-      style={{
-        animation: reducedMotion
-          ? undefined
-          : "text-swap 240ms cubic-bezier(0.16, 1, 0.3, 1) both",
-        ...style,
-      }}
-    >
-      {text}
-    </span>
-  );
-}
-
-export function ShimmerText({
-  children,
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
-  const reducedMotion = useReducedMotion();
-  return (
-    <span
-      {...props}
-      className={joinClasses(!reducedMotion && "ml-motion-shimmer", className)}
-    >
-      {children}
-    </span>
-  );
-}
-
-export interface MagneticProps extends React.HTMLAttributes<HTMLDivElement> {
-  pull?: number;
-}
-
-export const Magnetic = React.forwardRef<HTMLDivElement, MagneticProps>(
-  (
-    {
-      children,
-      pull = 0.25,
-      className,
-      style,
-      onPointerMove,
-      onPointerLeave,
-      onPointerCancel,
-      ...props
-    },
-    forwardedRef
-  ) => {
-    const reducedMotion = useReducedMotion();
-    const nodeRef = React.useRef<HTMLDivElement>(null);
-    const offset = React.useRef({ x: 0, y: 0 });
-    const setRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        nodeRef.current = node;
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [forwardedRef]
-    );
-
-    // The pull is a real spring, not a CSS transition: it can be interrupted
-    // mid-flight, and the loop stops the moment it comes to rest.
-    const paint = React.useCallback(() => {
-      const node = nodeRef.current;
-      if (!node) return;
-      node.style.transform = `translate3d(${offset.current.x.toFixed(2)}px, ${offset.current.y.toFixed(2)}px, 0)`;
-    }, []);
-    const springX = React.useMemo(
-      () =>
-        createSpringAnimation({
-          options: springPresets.snappy,
-          onUpdate: (value) => {
-            offset.current.x = value;
-            paint();
-          },
-        }),
-      [paint]
-    );
-    const springY = React.useMemo(
-      () =>
-        createSpringAnimation({
-          options: springPresets.snappy,
-          onUpdate: (value) => {
-            offset.current.y = value;
-            paint();
-          },
-        }),
-      [paint]
-    );
-
-    React.useEffect(
-      () => () => {
-        springX.stop();
-        springY.stop();
-      },
-      [springX, springY]
-    );
-
-    const moveTo = (x: number, y: number) => {
-      springX.setTarget(x);
-      springY.setTarget(y);
-    };
-    const reset = () => moveTo(0, 0);
-
-    const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
-      onPointerMove?.(event);
-      const node = nodeRef.current;
-      if (event.defaultPrevented || reducedMotion || event.pointerType === "touch" || !node) return;
-      const rect = node.getBoundingClientRect();
-      moveTo(
-        (event.clientX - (rect.left + rect.width / 2)) * pull,
-        (event.clientY - (rect.top + rect.height / 2)) * pull
-      );
-    };
-
-    React.useEffect(() => {
-      if (!reducedMotion) return;
-      springX.set(0);
-      springY.set(0);
-    }, [reducedMotion, springX, springY]);
-
-    return (
-      <div
-        {...props}
-        ref={setRef}
-        onPointerMove={handlePointerMove}
-        onPointerLeave={(event) => {
-          onPointerLeave?.(event);
-          reset();
-        }}
-        onPointerCancel={(event) => {
-          onPointerCancel?.(event);
-          reset();
-        }}
-        className={joinClasses("ml-motion-magnetic", className)}
-        style={{
-          transform: "translate3d(0, 0, 0)",
-          willChange: reducedMotion ? undefined : "transform",
-          ...style,
-        }}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-Magnetic.displayName = "Magnetic";
-
-export interface OriginMorphProps extends React.HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean;
-}
-
-export function OriginMorph({
-  isOpen,
-  children,
-  className,
-  style,
-  ...props
-}: OriginMorphProps) {
-  const reducedMotion = useReducedMotion();
-  if (!isOpen) return null;
-  return (
-    <div
-      {...props}
-      className={joinClasses("ml-motion-origin-morph", !reducedMotion && "ml-animate-pop", className)}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}

package/src/raf.ts

@@ -1,52 +0,0 @@
-export type FrameTask = (timestamp: number) => void;
-
-const queue = new Map<FrameTask, FrameTask>();
-let frameId: number | null = null;
-
-function flush(timestamp: number): void {
-  frameId = null;
-  const tasks = Array.from(queue.values());
-  queue.clear();
-  for (const task of tasks) task(timestamp);
-}
-
-export function scheduleFrame(task: FrameTask): () => void {
-  queue.set(task, task);
-  if (frameId === null) {
-    if (typeof requestAnimationFrame === "undefined") {
-      flush(typeof performance === "undefined" ? Date.now() : performance.now());
-    } else {
-      frameId = requestAnimationFrame(flush);
-    }
-  }
-  return () => {
-    queue.delete(task);
-    if (queue.size === 0 && frameId !== null && typeof cancelAnimationFrame !== "undefined") {
-      cancelAnimationFrame(frameId);
-      frameId = null;
-    }
-  };
-}
-
-export function createRafBatcher<T>(apply: (value: T, timestamp: number) => void) {
-  let latest: T;
-  let queued = false;
-  let cancel = () => {};
-
-  return {
-    schedule(value: T) {
-      latest = value;
-      if (queued) return;
-      queued = true;
-      const task = (timestamp: number) => {
-        queued = false;
-        apply(latest, timestamp);
-      };
-      cancel = scheduleFrame(task);
-    },
-    cancel() {
-      queued = false;
-      cancel();
-    },
-  };
-}

package/src/reduced-motion.ts

@@ -1,20 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-const query = "(prefers-reduced-motion: reduce)";
-
-function subscribe(listener: () => void): () => void {
-  if (typeof window === "undefined") return () => {};
-  const media = window.matchMedia(query);
-  media.addEventListener("change", listener);
-  return () => media.removeEventListener("change", listener);
-}
-
-function snapshot(): boolean {
-  return typeof window !== "undefined" && window.matchMedia(query).matches;
-}
-
-export function useReducedMotion(): boolean {
-  return React.useSyncExternalStore(subscribe, snapshot, () => false);
-}

package/src/spring.ts

@@ -1,134 +0,0 @@
-export interface SpringOptions {
-  stiffness?: number;
-  damping?: number;
-  mass?: number;
-  restSpeed?: number;
-  restDelta?: number;
-  maxDelta?: number;
-}
-
-export interface SpringState {
-  value: number;
-  velocity: number;
-}
-
-export interface SpringStep extends SpringState {
-  done: boolean;
-}
-
-export const springPresets = {
-  gentle: { stiffness: 170, damping: 26, mass: 1 },
-  snappy: { stiffness: 320, damping: 28, mass: 0.9 },
-  bouncy: { stiffness: 260, damping: 18, mass: 1 },
-} as const satisfies Record<string, SpringOptions>;
-
-export function integrateSpring(
-  state: SpringState,
-  target: number,
-  deltaMs: number,
-  {
-    stiffness = 240,
-    damping = 26,
-    mass = 1,
-    restSpeed = 0.01,
-    restDelta = 0.01,
-    maxDelta = 32,
-  }: SpringOptions = {}
-): SpringStep {
-  const safeMass = Math.max(0.001, mass);
-  let remaining = Math.max(0, Math.min(maxDelta, deltaMs)) / 1000;
-  let value = state.value;
-  let velocity = state.velocity;
-
-  // Fixed substeps make the semi-implicit Euler integration stable after slow frames.
-  while (remaining > 0) {
-    const step = Math.min(remaining, 1 / 120);
-    const springForce = -stiffness * (value - target);
-    const dampingForce = -damping * velocity;
-    velocity += ((springForce + dampingForce) / safeMass) * step;
-    value += velocity * step;
-    remaining -= step;
-  }
-
-  const done = Math.abs(velocity) <= restSpeed && Math.abs(target - value) <= restDelta;
-  return done
-    ? { value: target, velocity: 0, done: true }
-    : { value, velocity, done: false };
-}
-
-export interface SpringAnimation {
-  setTarget(target: number): void;
-  set(value: number): void;
-  stop(): void;
-  get(): SpringState & { target: number; running: boolean };
-}
-
-export function createSpringAnimation({
-  from = 0,
-  to = from,
-  options,
-  onUpdate,
-  onComplete,
-}: {
-  from?: number;
-  to?: number;
-  options?: SpringOptions;
-  onUpdate: (value: number, state: SpringState) => void;
-  onComplete?: (value: number) => void;
-}): SpringAnimation {
-  let state: SpringState = { value: from, velocity: 0 };
-  let target = to;
-  let running = false;
-  let frame: number | null = null;
-  let previousTime = 0;
-
-  const stop = () => {
-    if (frame !== null && typeof cancelAnimationFrame !== "undefined") {
-      cancelAnimationFrame(frame);
-    }
-    frame = null;
-    running = false;
-    previousTime = 0;
-  };
-
-  const tick = (timestamp: number) => {
-    const delta = previousTime === 0 ? 1000 / 60 : timestamp - previousTime;
-    previousTime = timestamp;
-    const next = integrateSpring(state, target, delta, options);
-    state = { value: next.value, velocity: next.velocity };
-    onUpdate(state.value, state);
-    if (next.done) {
-      stop();
-      onComplete?.(state.value);
-    } else {
-      frame = requestAnimationFrame(tick);
-    }
-  };
-
-  const start = () => {
-    if (running || Object.is(state.value, target)) return;
-    running = true;
-    if (typeof requestAnimationFrame === "undefined") {
-      state = { value: target, velocity: 0 };
-      onUpdate(target, state);
-      running = false;
-      onComplete?.(target);
-      return;
-    }
-    frame = requestAnimationFrame(tick);
-  };
-
-  return {
-    setTarget(nextTarget) {
-      target = nextTarget;
-      start();
-    },
-    set(value) {
-      stop();
-      state = { value, velocity: 0 };
-      onUpdate(value, state);
-    },
-    stop,
-    get: () => ({ ...state, target, running }),
-  };
-}

package/src/tilt-3d.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { createRafBatcher } from "./raf";
-import { useReducedMotion } from "./reduced-motion";
-
-export interface Tilt3DProps extends React.HTMLAttributes<HTMLDivElement> {
-  maxTilt?: number;
-  perspective?: number;
-  glare?: boolean;
-  scale?: number;
-}
-
-interface TiltFrame {
-  x: number;
-  y: number;
-  glareX: number;
-  glareY: number;
-  active: boolean;
-}
-
-export const Tilt3D = React.forwardRef<HTMLDivElement, Tilt3DProps>(
-  (
-    {
-      maxTilt = 12,
-      perspective = 900,
-      glare = true,
-      scale = 1.02,
-      className,
-      style,
-      children,
-      onPointerMove,
-      onPointerLeave,
-      onPointerCancel,
-      ...props
-    },
-    forwardedRef
-  ) => {
-    const cardRef = React.useRef<HTMLDivElement>(null);
-    const reducedMotion = useReducedMotion();
-    const setRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        cardRef.current = node;
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [forwardedRef]
-    );
-
-    const batcher = React.useMemo(
-      () =>
-        createRafBatcher<TiltFrame>((frame) => {
-          const node = cardRef.current;
-          if (!node) return;
-          node.style.transform = frame.active
-            ? `perspective(${perspective}px) rotateX(${frame.x.toFixed(2)}deg) rotateY(${frame.y.toFixed(2)}deg) scale3d(${scale}, ${scale}, ${scale})`
-            : `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
-          node.style.transition = frame.active
-            ? "transform 80ms linear"
-            : "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)";
-          node.style.setProperty("--mlola-glare-x", `${frame.glareX}%`);
-          node.style.setProperty("--mlola-glare-y", `${frame.glareY}%`);
-          node.style.setProperty("--mlola-glare-opacity", frame.active && glare ? "1" : "0");
-        }),
-      [glare, perspective, scale]
-    );
-
-    React.useEffect(() => () => batcher.cancel(), [batcher]);
-
-    const reset = () => {
-      batcher.schedule({ x: 0, y: 0, glareX: 50, glareY: 50, active: false });
-    };
-
-    const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
-      onPointerMove?.(event);
-      const node = cardRef.current;
-      if (
-        event.defaultPrevented ||
-        reducedMotion ||
-        event.pointerType === "touch" ||
-        !node
-      ) return;
-      const rect = node.getBoundingClientRect();
-      if (rect.width <= 0 || rect.height <= 0) return;
-      const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
-      const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
-      batcher.schedule({
-        x: (y - 0.5) * -maxTilt,
-        y: (x - 0.5) * maxTilt,
-        glareX: x * 100,
-        glareY: y * 100,
-        active: true,
-      });
-    };
-
-    const handlePointerLeave = (event: React.PointerEvent<HTMLDivElement>) => {
-      onPointerLeave?.(event);
-      reset();
-    };
-
-    const handlePointerCancel = (event: React.PointerEvent<HTMLDivElement>) => {
-      onPointerCancel?.(event);
-      reset();
-    };
-
-    React.useEffect(() => {
-      if (reducedMotion) reset();
-    }, [reducedMotion]);
-
-    return (
-      <div
-        {...props}
-        ref={setRef}
-        onPointerMove={handlePointerMove}
-        onPointerLeave={handlePointerLeave}
-        onPointerCancel={handlePointerCancel}
-        className={className}
-        style={{
-          transform: `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,
-          transformStyle: "preserve-3d",
-          transition: "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-          willChange: reducedMotion ? undefined : "transform",
-          position: "relative",
-          ...style,
-        }}
-      >
-        {children}
-        {glare && (
-          <span
-            aria-hidden="true"
-            className="ml-motion-tilt-glare"
-            style={reducedMotion ? { transition: "none" } : undefined}
-          />
-        )}
-      </div>
-    );
-  }
-);
-Tilt3D.displayName = "Tilt3D";