solid-drift 0.10.0 → 0.11.0

package/README.md

@@ -776,6 +776,25 @@ createTextWave(() => headline, {
 
 Options: `amplitude`, `wavelength` (characters per wave), `period`, `tilt` (default true), `progress`. Returns `{ stop }`. Under reduced motion the text sits still.
 
+### `createCountUp(source, options?)`
+
+A signal that counts toward a source number with an eased tween, rendering as a formatted string: dashboard stats, prices, scores. When the source changes mid-count the tween retargets from the current displayed value, with no snapping.
+
+```tsx
+import { createCountUp } from "solid-drift"
+
+const [revenue, setRevenue] = createSignal(0)
+const display = createCountUp(revenue, {
+  decimals: 2,
+  prefix: "$",
+  separator: ",",
+})
+<div>{display()}</div> // "$1,234.50" gliding up from "$0.00"
+setRevenue(1234.5)
+```
+
+Options: `decimals` (default 0), `duration` (ms, default 1000), `easing` (default `"easeOutExpo"`), `prefix` (default `""`), `suffix` (default `""`), `separator` (thousands separator, default `""`). Returns an accessor of the formatted string. SSR-safe: renders the formatted source value. Under reduced motion the text jumps straight to each new value.
+
 ### `createKineticType(ref, options?)`
 
 Kinetic typography: each character (or word) flies in with position, blur, scale, and opacity, staggered for that showreel title feel. One master clock drives every unit, so a 40-character headline costs a single rAF task.

package/dist/index.d.ts

@@ -22,7 +22,7 @@ export { createTimeline, type TimelineStep, type TimelineStatus, type TimelineCo
 export { animateFlip, type FlipOptions, createSharedLayout, type SharedLayoutOptions, type SharedLayoutResult, } from "./flip.js";
 export { createSquashStretch, type SquashStretchOptions, type SquashStretchResult, createFollowThrough, type FollowThroughOptions, createAnticipation, type AnticipationOptions, createWobble, type WobbleOptions, type WobbleResult, } from "./cartoon.js";
 export { createGravity, type GravityOptions, type GravityResult, createPendulum, type PendulumOptions, type PendulumResult, createFling, type FlingOptions, type FlingResult, } from "./physics.js";
-export { createFontSwap, type FontSwapOptions, type FontSwapResult, createTyping, type TypingOptions, type TypingResult, createTextPhysics, type TextPhysicsOptions, type TextPhysicsResult, createTextTunnel, type TextTunnelOptions, type TextTunnelResult, createTextCutout, type TextCutoutOptions, createTextGradient, type TextGradientOptions, createTextScramble, type TextScrambleOptions, type TextScrambleResult, createTextWave, type TextWaveOptions, } from "./typography.js";
+export { createFontSwap, type FontSwapOptions, type FontSwapResult, createTyping, type TypingOptions, type TypingResult, createTextPhysics, type TextPhysicsOptions, type TextPhysicsResult, createTextTunnel, type TextTunnelOptions, type TextTunnelResult, createTextCutout, type TextCutoutOptions, createTextGradient, type TextGradientOptions, createTextScramble, type TextScrambleOptions, type TextScrambleResult, createTextWave, type TextWaveOptions, createCountUp, type CountUpOptions, } from "./typography.js";
 export { easings, cubicBezier, linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeOutExpo, easeOutBack, easeInBack, easeInOutBack, easeOutElastic, easeOutBounce, resolveEasing, type Easing, type EasingName, } from "./easing.js";
 export { createKineticType, createScenePlayer, createShowreel, createCamera, createColorShift, createTransition, createBeat, createBeatCuts, } from "./motion.js";
 export type { KineticTypeFrom, KineticTypeOptions, KineticTypeStatus, KineticTypeControls, MotionScene, ScenePlayerStatus, ScenePlayerControls, ShowreelScene, ShowreelSceneKind, CameraKeyframe, CameraOptions, ColorShiftOptions, ColorShiftStatus, ColorShiftControls, TransitionType, TransitionDirection, TransitionOptions, TransitionLayerStyle, TransitionStatus, TransitionControls, BeatOptions, BeatStatus, BeatControls, BeatCutOptions, } from "./motion.js";

package/dist/index.js

@@ -22,7 +22,7 @@ export { createTimeline, } from "./timeline.js";
 export { animateFlip, createSharedLayout, } from "./flip.js";
 export { createSquashStretch, createFollowThrough, createAnticipation, createWobble, } from "./cartoon.js";
 export { createGravity, createPendulum, createFling, } from "./physics.js";
-export { createFontSwap, createTyping, createTextPhysics, createTextTunnel, createTextCutout, createTextGradient, createTextScramble, createTextWave, } from "./typography.js";
+export { createFontSwap, createTyping, createTextPhysics, createTextTunnel, createTextCutout, createTextGradient, createTextScramble, createTextWave, createCountUp, } from "./typography.js";
 export { easings, cubicBezier, linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeOutExpo, easeOutBack, easeInBack, easeInOutBack, easeOutElastic, easeOutBounce, resolveEasing, } from "./easing.js";
 export { createKineticType, createScenePlayer, createShowreel, createCamera, createColorShift, createTransition, createBeat, createBeatCuts, } from "./motion.js";
 export { createDrag, } from "./gesture.js";

package/dist/typography.d.ts

@@ -238,4 +238,43 @@ export interface TextWaveOptions {
 export declare function createTextWave(ref: MaybeElement, options?: TextWaveOptions): {
     stop: () => void;
 };
+export interface CountUpOptions {
+    /** Decimal places in the output. Default 0. */
+    decimals?: number;
+    /** Tween duration in milliseconds when the source changes. Default 1000. */
+    duration?: number;
+    /** Easing for the count. Default "easeOutExpo". */
+    easing?: Easing | EasingName;
+    /** String placed before the number, e.g. "$". Default "". */
+    prefix?: string;
+    /** String placed after the number, e.g. "%". Default "". */
+    suffix?: string;
+    /** Thousands separator, e.g. ",". Default "" (no grouping). */
+    separator?: string;
+}
+/**
+ * A signal that counts toward a source number with an eased tween,
+ * rendering as a formatted string: dashboard stats, prices, scores.
+ *
+ * When the source changes mid-count the tween retargets from the
+ * current displayed value, with no snapping. Formatting (decimals,
+ * prefix, suffix, thousands separator) applies to every frame.
+ *
+ * SSR-safe: renders the formatted source value. Under reduced motion
+ * the text jumps straight to each new value with no tween.
+ *
+ * ```tsx
+ * import { createCountUp } from "solid-drift"
+ *
+ * const [revenue, setRevenue] = createSignal(0)
+ * const display = createCountUp(revenue, {
+ *   decimals: 2,
+ *   prefix: "$",
+ *   separator: ",",
+ * })
+ * <div>{display()}</div> // "$1,234.50" gliding up from "$0.00"
+ * setRevenue(1234.5)
+ * ```
+ */
+export declare function createCountUp(source: Accessor<number>, options?: CountUpOptions): Accessor<string>;
 export {};

package/dist/typography.js

@@ -1,5 +1,6 @@
 import { createEffect, createSignal, onCleanup, untrack, } from "solid-js";
 import { animate } from "./animate.js";
+import { createTween } from "./tween.js";
 import { resolveEasing } from "./easing.js";
 import { now, schedule } from "./engine.js";
 import { prefersReducedMotion } from "./reduced-motion.js";
@@ -810,3 +811,47 @@ export function createTextWave(ref, options = {}) {
         },
     };
 }
+function groupInteger(int, separator) {
+    if (!separator)
+        return int;
+    const negative = int.startsWith("-");
+    const digits = negative ? int.slice(1) : int;
+    const grouped = digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+    return (negative ? "-" : "") + grouped;
+}
+/**
+ * A signal that counts toward a source number with an eased tween,
+ * rendering as a formatted string: dashboard stats, prices, scores.
+ *
+ * When the source changes mid-count the tween retargets from the
+ * current displayed value, with no snapping. Formatting (decimals,
+ * prefix, suffix, thousands separator) applies to every frame.
+ *
+ * SSR-safe: renders the formatted source value. Under reduced motion
+ * the text jumps straight to each new value with no tween.
+ *
+ * ```tsx
+ * import { createCountUp } from "solid-drift"
+ *
+ * const [revenue, setRevenue] = createSignal(0)
+ * const display = createCountUp(revenue, {
+ *   decimals: 2,
+ *   prefix: "$",
+ *   separator: ",",
+ * })
+ * <div>{display()}</div> // "$1,234.50" gliding up from "$0.00"
+ * setRevenue(1234.5)
+ * ```
+ */
+export function createCountUp(source, options = {}) {
+    const { decimals = 0, duration = 1000, easing = "easeOutExpo", prefix = "", suffix = "", separator = "", } = options;
+    const tweened = createTween(source, { duration, easing });
+    const format = (value) => {
+        const fixed = value.toFixed(decimals);
+        const dot = fixed.indexOf(".");
+        const head = dot === -1 ? fixed : fixed.slice(0, dot);
+        const tail = dot === -1 ? "" : fixed.slice(dot);
+        return prefix + groupInteger(head, separator) + tail + suffix;
+    };
+    return () => format(tweened());
+}

package/package.json

@@ -43,5 +43,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.10.0"
+  "version": "0.11.0"
 }