solid-drift 0.2.0 → 0.7.1

package/dist/reduced-motion.d.ts

@@ -2,7 +2,7 @@ import { type Accessor } from "solid-js";
 /**
  * Non-reactive check: does the user currently prefer reduced motion?
  *
- * SSR-safe — always `false` on the server. `createSpring`, `createTween`
+ * SSR-safe: always `false` on the server. `createSpring`, `createTween`
  * and `animate` sample this whenever they (re)start: when reduced motion
  * is preferred they jump straight to the target value instead of animating.
  */
@@ -14,8 +14,8 @@ export declare function prefersReducedMotion(): boolean;
  * SSR-safe: `false` on the server.
  *
  * ```tsx
- * const reduced = usePrefersReducedMotion();
- * const duration = () => (reduced() ? 0 : 400);
+ * const reduced = usePrefersReducedMotion()
+ * const duration = () => (reduced() ? 0 : 400)
  * ```
  */
 export declare function usePrefersReducedMotion(): Accessor<boolean>;

package/dist/reduced-motion.js

@@ -8,7 +8,7 @@ function queryMatches() {
 /**
  * Non-reactive check: does the user currently prefer reduced motion?
  *
- * SSR-safe — always `false` on the server. `createSpring`, `createTween`
+ * SSR-safe: always `false` on the server. `createSpring`, `createTween`
  * and `animate` sample this whenever they (re)start: when reduced motion
  * is preferred they jump straight to the target value instead of animating.
  */
@@ -22,13 +22,14 @@ export function prefersReducedMotion() {
  * SSR-safe: `false` on the server.
  *
  * ```tsx
- * const reduced = usePrefersReducedMotion();
- * const duration = () => (reduced() ? 0 : 400);
+ * const reduced = usePrefersReducedMotion()
+ * const duration = () => (reduced() ? 0 : 400)
  * ```
  */
 export function usePrefersReducedMotion() {
     const [reduced, setReduced] = createSignal(queryMatches());
-    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    if (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function") {
         const mq = window.matchMedia(QUERY);
         const onChange = () => setReduced(mq.matches);
         mq.addEventListener("change", onChange);

package/dist/scroll.d.ts

@@ -7,7 +7,7 @@ export type ScrollTarget = "page" | (() => Element | null | undefined);
  * - `"page"` (default): 0 at the very top of the page, 1 when the bottom
  *   of the page reaches the bottom of the viewport.
  * - element accessor: 0 when the element's top edge touches the bottom of
- *   the viewport, 1 when its bottom edge touches the top — i.e. the
+ *   the viewport, 1 when its bottom edge touches the top (that is, the
  *   element's full traversal through the viewport.
  *
  * Updates are rAF-throttled: no matter how many scroll/resize events fire,
@@ -18,8 +18,8 @@ export type ScrollTarget = "page" | (() => Element | null | undefined);
  * `window` or `document`).
  *
  * ```tsx
- * const progress = createScrollProgress(); // page progress
- * const bar = createScrollProgress(() => sectionRef); // element progress
+ * const progress = createScrollProgress() // page progress
+ * const bar = createScrollProgress(() => sectionRef) // element progress
  * <div style={{ transform: `scaleX(${progress()})` }} />
  * ```
  */

package/dist/scroll.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 function clamp01(v) {
     return v < 0 ? 0 : v > 1 ? 1 : v;
 }
@@ -8,7 +8,7 @@ function clamp01(v) {
  * - `"page"` (default): 0 at the very top of the page, 1 when the bottom
  *   of the page reaches the bottom of the viewport.
  * - element accessor: 0 when the element's top edge touches the bottom of
- *   the viewport, 1 when its bottom edge touches the top — i.e. the
+ *   the viewport, 1 when its bottom edge touches the top (that is, the
  *   element's full traversal through the viewport.
  *
  * Updates are rAF-throttled: no matter how many scroll/resize events fire,
@@ -19,13 +19,13 @@ function clamp01(v) {
  * `window` or `document`).
  *
  * ```tsx
- * const progress = createScrollProgress(); // page progress
- * const bar = createScrollProgress(() => sectionRef); // element progress
+ * const progress = createScrollProgress() // page progress
+ * const bar = createScrollProgress(() => sectionRef) // element progress
  * <div style={{ transform: `scaleX(${progress()})` }} />
  * ```
  */
 export function createScrollProgress(target = "page") {
-    // SSR: no window, no scrolling — report the top of the page.
+    // SSR: no window, no scrolling, so it reports the top of the page.
     if (typeof window === "undefined")
         return () => 0;
     const [progress, setProgress] = createSignal(0);

package/dist/scrollfx.d.ts

@@ -0,0 +1,156 @@
+import type { Accessor } from "solid-js";
+import { type Easing, type EasingName } from "./easing.js";
+import { type ColorFormat } from "./color.js";
+/** Output format for an interpolated color string. */
+export type ScrollColorFormat = ColorFormat;
+/** One color stop: progress position and the color to reach there. */
+export interface ScrollColorStop {
+    /** Progress position, 0 to 1. */
+    at: number;
+    /**
+     * Color at this position. Accepts hex (#rgb, #rrggbb, with optional
+     * alpha), rgb()/rgba(), hsl()/hsla(), and CSS named colors.
+     */
+    color: string;
+    /**
+     * Easing for the segment that ends at this stop, following the CSS
+     * keyframe convention. Default "linear".
+     */
+    easing?: Easing | EasingName;
+}
+export interface ScrollColorOptions {
+    /**
+     * Progress signal, 0 to 1. Defaults to whole-page scroll progress.
+     * Pass `createScrollProgress(() => section)` for element-scoped color.
+     */
+    progress?: Accessor<number>;
+    /** Fallback easing for segments without their own. Default "linear". */
+    easing?: Easing | EasingName;
+    /** Output format. Default "hex". */
+    format?: ScrollColorFormat;
+}
+/**
+ * Maps a 0-to-1 progress signal through a list of color stops and returns
+ * the interpolated color as a string signal.
+ *
+ * Colors interpolate in linear light, so a midpoint between red and blue
+ * is the vivid purple your eyes expect, not the muddy #800080 you get
+ * from naive channel math. Alpha channels interpolate too.
+ *
+ * Stops sort themselves by `at`; progress outside the range clamps to
+ * the end colors. Segments default to linear so color tracks scroll 1:1
+ * unless you shape them.
+ *
+ * Pure computation, no listeners, no rAF: SSR-safe by construction.
+ * Under reduced motion it holds the final stop's color.
+ *
+ * ```tsx
+ * const progress = createScrollProgress()
+ * // The hero tint warms as you scroll through the first chapter.
+ * const tint = createScrollColor(
+ *   [
+ *     { at: 0, color: "#f4f6f9" },
+ *     { at: 0.5, color: "#f7e8d0" },
+ *     { at: 1, color: "#2b5176", easing: "easeInOutQuad" },
+ *   ],
+ *   { progress },
+ * )
+ * <section style={{ "background-color": tint() }} />
+ * ```
+ */
+export declare function createScrollColor(stops: ScrollColorStop[], options?: ScrollColorOptions): Accessor<string>;
+export interface ScrollTrackingOptions {
+    /**
+     * Progress signal, 0 to 1. Defaults to whole-page scroll progress.
+     * Pass `createScrollProgress(() => headline)` for element-scoped tracking.
+     */
+    progress?: Accessor<number>;
+    /** Letter-spacing at progress 0. Default 0.3. */
+    from?: number;
+    /** Letter-spacing at progress 1. Default 0. */
+    to?: number;
+    /** Unit for the returned value. Default "em". */
+    unit?: "em" | "px";
+    /** Easing applied to the progress before mapping. Default "linear". */
+    easing?: Easing | EasingName;
+}
+/**
+ * Drives `letter-spacing` from a 0-to-1 progress signal: display words
+ * that spread apart or tighten together as you scroll.
+ *
+ * Returns a string signal like `"0.15em"` or `"6px"`, ready to drop into
+ * a style binding. Because the value is a plain string you can also
+ * bind it to any CSS property that takes a length.
+ *
+ * SSR-safe: returns the `from` value on the server. Under reduced motion
+ * it holds the `to` value (the settled, readable end state).
+ *
+ * ```tsx
+ * const progress = createScrollProgress(() => chapter)
+ * // A chapter title that tightens as it arrives.
+ * const tracking = createScrollTracking({
+ *   progress,
+ *   from: 0.35,
+ *   to: 0,
+ *   unit: "em",
+ *   easing: "easeOutCubic",
+ * })
+ * <h2 style={{ "letter-spacing": tracking() }}>Chapter One</h2>
+ * ```
+ */
+export declare function createScrollTracking(options?: ScrollTrackingOptions): Accessor<string>;
+/** Axis the divider line grows along. */
+export type ScrollLineAxis = "x" | "y";
+/** Where the line grows from. "start" is left/top in LTR reading order. */
+export type ScrollLineOrigin = "start" | "center" | "end";
+export interface ScrollLineOptions {
+    /**
+     * Progress signal, 0 to 1. Defaults to whole-page scroll progress.
+     * Pass `createScrollProgress(() => divider)` for element-scoped reveal.
+     */
+    progress?: Accessor<number>;
+    /** Grow along the x (horizontal rule) or y (vertical rule) axis. Default "x". */
+    axis?: ScrollLineAxis;
+    /** Scale at progress 0. Default 0 (invisible). */
+    from?: number;
+    /** Scale at progress 1. Default 1 (fully drawn). */
+    to?: number;
+    /** Which edge the line grows from. Default "start". */
+    origin?: ScrollLineOrigin;
+    /** Easing applied to the progress before mapping. Default "linear". */
+    easing?: Easing | EasingName;
+}
+/** Style pair for a progress-driven divider. Spread into a style binding. */
+export interface ScrollLineStyle {
+    /** e.g. "scaleX(0.42)" or "scaleY(1)". */
+    transform: string;
+    /** e.g. "left", "right", "center", "top", or "bottom". */
+    transformOrigin: string;
+}
+/**
+ * Drives a divider/rule reveal from a 0-to-1 progress signal: a chapter
+ * line that draws itself as you scroll. Uses scale (not width/height) so
+ * the reveal stays on the compositor.
+ *
+ * Returns a signal holding `{ transform, transformOrigin }`, ready to
+ * spread into a style binding. The line element itself only needs a
+ * background (or border) and a fixed size; the primitive supplies the
+ * scale and the origin it grows from.
+ *
+ * SSR-safe: returns the `from` scale on the server. Under reduced motion
+ * it holds the `to` scale, so the line is fully revealed rather than
+ * stuck invisible.
+ *
+ * ```tsx
+ * const progress = createScrollProgress(() => chapter)
+ * const line = createScrollLine({ progress, axis: "x", origin: "start" })
+ * <div
+ *   style={{
+ *     height: "2px",
+ *     "background-color": "#d9a441",
+ *     ...line(),
+ *   }}
+ * />
+ * ```
+ */
+export declare function createScrollLine(options?: ScrollLineOptions): Accessor<ScrollLineStyle>;

package/dist/scrollfx.js

@@ -0,0 +1,148 @@
+import { resolveEasing } from "./easing.js";
+import { prefersReducedMotion } from "./reduced-motion.js";
+import { createScrollProgress } from "./scroll.js";
+import { parseColorStops, sampleColorStops, } from "./color.js";
+function clamp01(v) {
+    return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+/** Round to at most 4 decimals so values like 0.30000000000000004 never leak. */
+function fmtNum(v) {
+    return String(Math.round(v * 10000) / 10000);
+}
+/**
+ * Maps a 0-to-1 progress signal through a list of color stops and returns
+ * the interpolated color as a string signal.
+ *
+ * Colors interpolate in linear light, so a midpoint between red and blue
+ * is the vivid purple your eyes expect, not the muddy #800080 you get
+ * from naive channel math. Alpha channels interpolate too.
+ *
+ * Stops sort themselves by `at`; progress outside the range clamps to
+ * the end colors. Segments default to linear so color tracks scroll 1:1
+ * unless you shape them.
+ *
+ * Pure computation, no listeners, no rAF: SSR-safe by construction.
+ * Under reduced motion it holds the final stop's color.
+ *
+ * ```tsx
+ * const progress = createScrollProgress()
+ * // The hero tint warms as you scroll through the first chapter.
+ * const tint = createScrollColor(
+ *   [
+ *     { at: 0, color: "#f4f6f9" },
+ *     { at: 0.5, color: "#f7e8d0" },
+ *     { at: 1, color: "#2b5176", easing: "easeInOutQuad" },
+ *   ],
+ *   { progress },
+ * )
+ * <section style={{ "background-color": tint() }} />
+ * ```
+ */
+export function createScrollColor(stops, options = {}) {
+    if (stops.length === 0) {
+        throw new Error("createScrollColor needs at least one color stop.");
+    }
+    const parsed = parseColorStops(stops, options.easing);
+    const format = options.format ?? "hex";
+    if (prefersReducedMotion()) {
+        // Reduced motion: hold the final stop's color instead of tracking
+        // progress, matching the library's immediate-target behavior.
+        const endColor = sampleColorStops(parsed, 1, format);
+        return () => endColor;
+    }
+    const progress = options.progress ?? createScrollProgress();
+    return () => sampleColorStops(parsed, progress(), format);
+}
+/**
+ * Drives `letter-spacing` from a 0-to-1 progress signal: display words
+ * that spread apart or tighten together as you scroll.
+ *
+ * Returns a string signal like `"0.15em"` or `"6px"`, ready to drop into
+ * a style binding. Because the value is a plain string you can also
+ * bind it to any CSS property that takes a length.
+ *
+ * SSR-safe: returns the `from` value on the server. Under reduced motion
+ * it holds the `to` value (the settled, readable end state).
+ *
+ * ```tsx
+ * const progress = createScrollProgress(() => chapter)
+ * // A chapter title that tightens as it arrives.
+ * const tracking = createScrollTracking({
+ *   progress,
+ *   from: 0.35,
+ *   to: 0,
+ *   unit: "em",
+ *   easing: "easeOutCubic",
+ * })
+ * <h2 style={{ "letter-spacing": tracking() }}>Chapter One</h2>
+ * ```
+ */
+export function createScrollTracking(options = {}) {
+    const from = options.from ?? 0.3;
+    const to = options.to ?? 0;
+    const unit = options.unit ?? "em";
+    const easing = resolveEasing(options.easing ?? "linear");
+    if (prefersReducedMotion()) {
+        return () => `${fmtNum(to)}${unit}`;
+    }
+    const progress = options.progress ?? createScrollProgress();
+    return () => {
+        const t = easing(clamp01(progress()));
+        return `${fmtNum(from + (to - from) * t)}${unit}`;
+    };
+}
+function originWord(axis, origin) {
+    if (origin === "center")
+        return "center";
+    if (axis === "x")
+        return origin === "start" ? "left" : "right";
+    return origin === "start" ? "top" : "bottom";
+}
+/**
+ * Drives a divider/rule reveal from a 0-to-1 progress signal: a chapter
+ * line that draws itself as you scroll. Uses scale (not width/height) so
+ * the reveal stays on the compositor.
+ *
+ * Returns a signal holding `{ transform, transformOrigin }`, ready to
+ * spread into a style binding. The line element itself only needs a
+ * background (or border) and a fixed size; the primitive supplies the
+ * scale and the origin it grows from.
+ *
+ * SSR-safe: returns the `from` scale on the server. Under reduced motion
+ * it holds the `to` scale, so the line is fully revealed rather than
+ * stuck invisible.
+ *
+ * ```tsx
+ * const progress = createScrollProgress(() => chapter)
+ * const line = createScrollLine({ progress, axis: "x", origin: "start" })
+ * <div
+ *   style={{
+ *     height: "2px",
+ *     "background-color": "#d9a441",
+ *     ...line(),
+ *   }}
+ * />
+ * ```
+ */
+export function createScrollLine(options = {}) {
+    const axis = options.axis ?? "x";
+    const from = options.from ?? 0;
+    const to = options.to ?? 1;
+    const easing = resolveEasing(options.easing ?? "linear");
+    const transform = axis === "x" ? "scaleX" : "scaleY";
+    const transformOrigin = originWord(axis, options.origin ?? "start");
+    if (prefersReducedMotion()) {
+        return () => ({
+            transform: `${transform}(${fmtNum(to)})`,
+            transformOrigin,
+        });
+    }
+    const progress = options.progress ?? createScrollProgress();
+    return () => {
+        const t = easing(clamp01(progress()));
+        return {
+            transform: `${transform}(${fmtNum(from + (to - from) * t)})`,
+            transformOrigin,
+        };
+    };
+}

package/dist/scrub.d.ts

@@ -0,0 +1,51 @@
+import type { Accessor } from "solid-js";
+import { type Easing, type EasingName } from "./easing.js";
+export interface ScrubKeyframe {
+    /** Progress position, 0 to 1. */
+    at: number;
+    /** Value at this position. */
+    value: number;
+    /**
+     * Easing for the segment that ends at this keyframe, following the
+     * CSS keyframe convention. Default "linear".
+     */
+    easing?: Easing | EasingName;
+}
+export interface ScrubOptions {
+    /** Fallback easing for segments without their own. Default "linear". */
+    easing?: Easing | EasingName;
+}
+/**
+ * Maps a 0-to-1 progress signal through an array of keyframes, returning
+ * the interpolated value as a signal.
+ *
+ * This is the scroll-choreography primitive: pair it with
+ * `createScrollProgress` and any numeric style becomes a scrubbed
+ * sequence. Parallax is the two-keyframe case, longer keyframe lists
+ * build full scenes (fade, rise, scale, hold, exit) driven by one scroll.
+ *
+ * Keyframes are sorted by `at` automatically. Progress outside the first
+ * and last keyframe clamps to their values. Segments default to linear
+ * easing so motion tracks scroll 1:1 unless you ask for shaping.
+ *
+ * Pure computation, no listeners, no rAF: SSR-safe by construction.
+ * Under reduced motion it holds the final keyframe value instead of
+ * tracking progress, matching the library's immediate-target behavior.
+ *
+ * ```tsx
+ * const progress = createScrollProgress(() => sectionRef)
+ * // Parallax: background drifts slower than the scroll.
+ * const y = createScrub(progress, [
+ *   { at: 0, value: 60 },
+ *   { at: 1, value: -60 },
+ * ])
+ * // Choreography: fade in, hold, fade out.
+ * const opacity = createScrub(progress, [
+ *   { at: 0, value: 0 },
+ *   { at: 0.3, value: 1, easing: "easeOutCubic" },
+ *   { at: 0.7, value: 1 },
+ *   { at: 1, value: 0 },
+ * ])
+ * ```
+ */
+export declare function createScrub(progress: Accessor<number>, keyframes: ScrubKeyframe[], options?: ScrubOptions): Accessor<number>;

package/dist/scrub.js

@@ -0,0 +1,67 @@
+import { resolveEasing } from "./easing.js";
+import { prefersReducedMotion } from "./reduced-motion.js";
+/**
+ * Maps a 0-to-1 progress signal through an array of keyframes, returning
+ * the interpolated value as a signal.
+ *
+ * This is the scroll-choreography primitive: pair it with
+ * `createScrollProgress` and any numeric style becomes a scrubbed
+ * sequence. Parallax is the two-keyframe case, longer keyframe lists
+ * build full scenes (fade, rise, scale, hold, exit) driven by one scroll.
+ *
+ * Keyframes are sorted by `at` automatically. Progress outside the first
+ * and last keyframe clamps to their values. Segments default to linear
+ * easing so motion tracks scroll 1:1 unless you ask for shaping.
+ *
+ * Pure computation, no listeners, no rAF: SSR-safe by construction.
+ * Under reduced motion it holds the final keyframe value instead of
+ * tracking progress, matching the library's immediate-target behavior.
+ *
+ * ```tsx
+ * const progress = createScrollProgress(() => sectionRef)
+ * // Parallax: background drifts slower than the scroll.
+ * const y = createScrub(progress, [
+ *   { at: 0, value: 60 },
+ *   { at: 1, value: -60 },
+ * ])
+ * // Choreography: fade in, hold, fade out.
+ * const opacity = createScrub(progress, [
+ *   { at: 0, value: 0 },
+ *   { at: 0.3, value: 1, easing: "easeOutCubic" },
+ *   { at: 0.7, value: 1 },
+ *   { at: 1, value: 0 },
+ * ])
+ * ```
+ */
+export function createScrub(progress, keyframes, options = {}) {
+    if (keyframes.length === 0) {
+        throw new Error("createScrub needs at least one keyframe.");
+    }
+    const fallback = resolveEasing(options.easing ?? "linear");
+    const sorted = [...keyframes].sort((a, b) => a.at - b.at);
+    const segmentEasing = sorted.map((keyframe, index) => index === 0
+        ? fallback
+        : resolveEasing(keyframe.easing ?? options.easing ?? "linear"));
+    if (prefersReducedMotion()) {
+        // Reduced motion: hold the final keyframe value instead of tracking
+        // progress, matching the library's immediate-target behavior.
+        const endValue = sorted[sorted.length - 1].value;
+        return () => endValue;
+    }
+    return () => {
+        const p = Math.min(Math.max(progress(), 0), 1);
+        if (p <= sorted[0].at)
+            return sorted[0].value;
+        const last = sorted[sorted.length - 1];
+        if (p >= last.at)
+            return last.value;
+        let i = 0;
+        while (i < sorted.length - 2 && sorted[i + 1].at <= p)
+            i++;
+        const a = sorted[i];
+        const b = sorted[i + 1];
+        const span = b.at - a.at;
+        const t = span <= 0 ? 0 : (p - a.at) / span;
+        return a.value + (b.value - a.value) * segmentEasing[i + 1](t);
+    };
+}

package/dist/spring.d.ts

@@ -15,14 +15,49 @@ export interface SpringOptions {
  * A signal that smoothly follows a source signal with spring physics.
  *
  * Retargeting is seamless: if the source changes mid-flight, the spring
- * keeps its current velocity and bends toward the new target — no jumps,
+ * keeps its current velocity and bends toward the new target, no jumps,
  * no restarts.
  *
  * ```tsx
- * const [target, setTarget] = createSignal(0);
- * const x = createSpring(target, { stiffness: 170, damping: 26 });
+ * const [target, setTarget] = createSignal(0)
+ * const x = createSpring(target, { stiffness: 170, damping: 26 })
  * <div style={{ transform: `translateX(${x()}px)` }} />
- * setTarget(200); // glides there
+ * setTarget(200) // glides there
  * ```
  */
 export declare function createSpring(source: Accessor<number>, options?: SpringOptions): Accessor<number>;
+/**
+ * Named spring configurations for common feels. Spread into
+ * `createSpring`, `createMagnetic`, or `createTilt` options:
+ *
+ * ```ts
+ * const x = createSpring(target, { ...springPresets.wobbly })
+ * ```
+ */
+export declare const springPresets: {
+    /** Soft and calm. Default-like, a touch slower. */
+    gentle: {
+        stiffness: number;
+        damping: number;
+    };
+    /** The library default balance. */
+    default: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Tight and responsive, for UI that must keep up. */
+    snappy: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Loose and playful, with a visible overshoot. */
+    wobbly: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Heavy and deliberate, like moving through syrup. */
+    molasses: {
+        stiffness: number;
+        damping: number;
+    };
+};

package/dist/spring.js

@@ -5,14 +5,14 @@ import { prefersReducedMotion } from "./reduced-motion.js";
  * A signal that smoothly follows a source signal with spring physics.
  *
  * Retargeting is seamless: if the source changes mid-flight, the spring
- * keeps its current velocity and bends toward the new target — no jumps,
+ * keeps its current velocity and bends toward the new target, no jumps,
  * no restarts.
  *
  * ```tsx
- * const [target, setTarget] = createSignal(0);
- * const x = createSpring(target, { stiffness: 170, damping: 26 });
+ * const [target, setTarget] = createSignal(0)
+ * const x = createSpring(target, { stiffness: 170, damping: 26 })
  * <div style={{ transform: `translateX(${x()}px)` }} />
- * setTarget(200); // glides there
+ * setTarget(200) // glides there
  * ```
  */
 export function createSpring(source, options = {}) {
@@ -31,8 +31,7 @@ export function createSpring(source, options = {}) {
         velocity += (force / mass) * dt;
         current += velocity * dt;
         setValue(current);
-        const settled = Math.abs(current - target) < precision &&
-            Math.abs(velocity) < precision;
+        const settled = Math.abs(current - target) < precision && Math.abs(velocity) < precision;
         if (settled) {
             current = target;
             velocity = 0;
@@ -45,7 +44,7 @@ export function createSpring(source, options = {}) {
     };
     const kick = () => {
         if (cancel)
-            return; // already running; step() reads the live target
+            return; // already running, step() reads the live target
         lastTime = now();
         cancel = schedule(step);
     };
@@ -66,3 +65,23 @@ export function createSpring(source, options = {}) {
     onCleanup(() => cancel?.());
     return value;
 }
+/**
+ * Named spring configurations for common feels. Spread into
+ * `createSpring`, `createMagnetic`, or `createTilt` options:
+ *
+ * ```ts
+ * const x = createSpring(target, { ...springPresets.wobbly })
+ * ```
+ */
+export const springPresets = {
+    /** Soft and calm. Default-like, a touch slower. */
+    gentle: { stiffness: 120, damping: 20 },
+    /** The library default balance. */
+    default: { stiffness: 170, damping: 26 },
+    /** Tight and responsive, for UI that must keep up. */
+    snappy: { stiffness: 260, damping: 30 },
+    /** Loose and playful, with a visible overshoot. */
+    wobbly: { stiffness: 180, damping: 11 },
+    /** Heavy and deliberate, like moving through syrup. */
+    molasses: { stiffness: 55, damping: 16 },
+};

package/dist/stagger.d.ts

@@ -3,13 +3,13 @@
  *
  * Given an item index, returns its delay in milliseconds (`index * delayMs`).
  * Pair with `createTween`'s `delay` option (or `animate`) so items entrance
- * one after another instead of all at once. `count` is informational — the
+ * one after another instead of all at once. `count` is informational: the
  * number of items being staggered.
  *
  * ```ts
- * const at = createStagger(5, 80); // 5 items, 80ms apart
- * at(0); // 0
- * at(3); // 240
+ * const at = createStagger(5, 80) // 5 items, 80ms apart
+ * at(0) // 0
+ * at(3) // 240
  * ```
  */
 export declare function createStagger(count: number, delayMs: number): (index: number) => number;

package/dist/stagger.js

@@ -3,13 +3,13 @@
  *
  * Given an item index, returns its delay in milliseconds (`index * delayMs`).
  * Pair with `createTween`'s `delay` option (or `animate`) so items entrance
- * one after another instead of all at once. `count` is informational — the
+ * one after another instead of all at once. `count` is informational: the
  * number of items being staggered.
  *
  * ```ts
- * const at = createStagger(5, 80); // 5 items, 80ms apart
- * at(0); // 0
- * at(3); // 240
+ * const at = createStagger(5, 80) // 5 items, 80ms apart
+ * at(0) // 0
+ * at(3) // 240
  * ```
  */
 export function createStagger(count, delayMs) {