useAnimatedNumber

Drives a numeric value smoothly between targets — used internally by Slider, Progress, Toggle, and animated counters. Cross-platform: on web it bridges to a CSS-driven number; on native it bridges to a Reanimated SharedValue.

Usage

import { useAnimatedNumber } from '@nori-ui/core/client';
 
function CountUp({ to }: { to: number }) {
    const value = useAnimatedNumber(to, { duration: 400 });
    return <span>{Math.round(value)}</span>;
}

API

Arguments

Returns

A number — the current interpolated value as of the last animation tick. Re-renders at frame rate while the animation is in flight; stops re-rendering once it settles.

Notes

• The hook runs on the JS thread on web (requestAnimationFrame) and on the UI thread on native (Reanimated worklet) — both stay 60fps for typical UI animations.
• Pass a stable easing reference (memoized or module-scoped) — passing a fresh function each render restarts the animation.
• For multi-property animations, run multiple useAnimatedNumber calls in parallel; the hook is intentionally single-value.

Related

• Theming — animation token presets (duration.fast, duration.normal, easing.standard).