@humanspeak/svelte-motion 0.1.23 → 0.1.24

package/README.md

@@ -231,9 +231,11 @@ Single-element FLIP layout animation:
 ## Utilities
 
 - `useAnimationFrame`
+- `useMotionTemplate`
 - `useSpring`
 - `useTime`
 - `useTransform`
+- `useVelocity`
 - `styleString`
 - `stringifyStyleObject` (deprecated)
 - `createDragControls`

package/dist/index.d.ts

@@ -8,7 +8,9 @@ export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } f
 export type { DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionOnInViewEnd, MotionOnInViewStart, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, Variants } from './types';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';
+export { useMotionTemplate } from './utils/motionTemplate';
 export { useSpring } from './utils/spring';
+export { useVelocity } from './utils/velocity';
 /**
  * @deprecated Use `styleString` instead for reactive styles with automatic unit handling.
  */

package/dist/index.js

@@ -11,7 +11,9 @@ export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cub
 export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';
+export { useMotionTemplate } from './utils/motionTemplate';
 export { useSpring } from './utils/spring';
+export { useVelocity } from './utils/velocity';
 /**
  * @deprecated Use `styleString` instead for reactive styles with automatic unit handling.
  */

package/dist/utils/motionTemplate.d.ts

@@ -0,0 +1,21 @@
+import { type Readable } from 'svelte/store';
+/**
+ * Tagged template literal that creates a derived store from interpolated
+ * readable stores. When any input store changes, the resulting store
+ * recomputes the template string.
+ *
+ * SSR-safe: `derived` from svelte/store works on the server.
+ *
+ * @example
+ * ```ts
+ * const blur = useSpring(0)
+ * const filter = useMotionTemplate`blur(${blur}px)`
+ * // $filter → "blur(0px)"
+ * ```
+ *
+ * @param strings Static template string parts.
+ * @param values Readable stores to interpolate.
+ * @returns A readable store of the composed string.
+ * @see https://motion.dev/docs/react-use-motion-template
+ */
+export declare const useMotionTemplate: (strings: TemplateStringsArray, ...values: Readable<number | string>[]) => Readable<string>;

package/dist/utils/motionTemplate.js

@@ -0,0 +1,33 @@
+import { derived } from 'svelte/store';
+/**
+ * Tagged template literal that creates a derived store from interpolated
+ * readable stores. When any input store changes, the resulting store
+ * recomputes the template string.
+ *
+ * SSR-safe: `derived` from svelte/store works on the server.
+ *
+ * @example
+ * ```ts
+ * const blur = useSpring(0)
+ * const filter = useMotionTemplate`blur(${blur}px)`
+ * // $filter → "blur(0px)"
+ * ```
+ *
+ * @param strings Static template string parts.
+ * @param values Readable stores to interpolate.
+ * @returns A readable store of the composed string.
+ * @see https://motion.dev/docs/react-use-motion-template
+ */
+export const useMotionTemplate = (strings, ...values) => {
+    if (values.length === 0)
+        return derived([], () => strings[0] ?? '');
+    return derived(values, (current) => {
+        let result = '';
+        for (let i = 0; i < strings.length; i++) {
+            result += strings[i] ?? '';
+            if (i < current.length)
+                result += String(current[i]);
+        }
+        return result;
+    });
+};

package/dist/utils/velocity.d.ts

@@ -0,0 +1,15 @@
+import { type Readable } from 'svelte/store';
+/**
+ * Creates a readable store that tracks the velocity of a source store's value.
+ *
+ * Uses `motionValue` from motion-dom for built-in velocity tracking with
+ * timestamps. Polls velocity via `requestAnimationFrame` and settles to 0
+ * when movement stops.
+ *
+ * SSR-safe: returns a static `readable(0)` on the server.
+ *
+ * @param source A readable store of numeric or unit-string values.
+ * @returns A readable store of the current velocity in units/second.
+ * @see https://motion.dev/docs/react-use-velocity
+ */
+export declare const useVelocity: (source: Readable<number | string>) => Readable<number>;

package/dist/utils/velocity.js

@@ -0,0 +1,62 @@
+import { motionValue } from 'motion-dom';
+import { readable, writable } from 'svelte/store';
+/**
+ * Parses a numeric value from a number or unit string (e.g. "100px" → 100).
+ */
+const parseNumeric = (v) => {
+    if (typeof v === 'number')
+        return v;
+    const parsed = Number.parseFloat(String(v));
+    return Number.isFinite(parsed) ? parsed : 0;
+};
+/**
+ * Creates a readable store that tracks the velocity of a source store's value.
+ *
+ * Uses `motionValue` from motion-dom for built-in velocity tracking with
+ * timestamps. Polls velocity via `requestAnimationFrame` and settles to 0
+ * when movement stops.
+ *
+ * SSR-safe: returns a static `readable(0)` on the server.
+ *
+ * @param source A readable store of numeric or unit-string values.
+ * @returns A readable store of the current velocity in units/second.
+ * @see https://motion.dev/docs/react-use-velocity
+ */
+export const useVelocity = (source) => {
+    if (typeof window === 'undefined')
+        return readable(0, () => { });
+    const mv = motionValue(0);
+    const store = writable(0);
+    let raf = 0;
+    let settled = true;
+    const poll = () => {
+        const v = mv.getVelocity();
+        store.set(v);
+        if (Math.abs(v) < 0.001) {
+            settled = true;
+            store.set(0);
+            raf = 0;
+            return;
+        }
+        raf = requestAnimationFrame(poll);
+    };
+    const startPolling = () => {
+        if (!settled)
+            return;
+        settled = false;
+        raf = requestAnimationFrame(poll);
+    };
+    return readable(0, (set) => {
+        const unsubStore = store.subscribe(set);
+        const unsubSource = source.subscribe((v) => {
+            mv.set(parseNumeric(v));
+            startPolling();
+        });
+        return () => {
+            unsubStore();
+            unsubSource();
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "A lightweight animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
   "keywords": [
     "svelte",
@@ -111,7 +111,7 @@
     "svelte": "^5.0.0"
   },
   "volta": {
-    "node": "24.12.0"
+    "node": "22.16.0"
   },
   "publishConfig": {
     "access": "public"