{
  "title": "useAnimatedNumber",
  "description": "Animate a numeric value over time. Web uses CSS transitions; native uses Reanimated worklets.",
  "url": "/docs/hooks/use-animated-number",
  "since": "0.0.4",
  "tags": [
    "hooks",
    "animation"
  ],
  "platform": "both",
  "source": "---\ntitle: useAnimatedNumber\ndescription: Animate a numeric value over time. Web uses CSS transitions; native uses Reanimated worklets.\nsince: 0.0.4\ntags: [hooks, animation]\nplatform: both\ncategory: hooks\n---\n\nDrives 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`.\n\n## Usage\n\n```tsx\nimport { useAnimatedNumber } from '@nori-ui/core/client';\n\nfunction CountUp({ to }: { to: number }) {\n    const value = useAnimatedNumber(to, { duration: 400 });\n    return <span>{Math.round(value)}</span>;\n}\n```\n\n## API\n\n### Arguments\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `target` | `number` | — | The target value. The hook animates from the previous render's value to this. |\n| `options.duration` | `number` | `200` | Animation duration in ms. |\n| `options.easing` | `(t: number) => number` | `(t) => t` | Easing function applied to the normalized 0..1 progress. |\n\n### Returns\n\nA `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.\n\n## Notes\n\n- 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.\n- Pass a stable `easing` reference (memoized or module-scoped) — passing a fresh function each render restarts the animation.\n- For multi-property animations, run multiple `useAnimatedNumber` calls in parallel; the hook is intentionally single-value.\n\n## Related\n\n- [Theming](/docs/theming) — animation token presets (`duration.fast`, `duration.normal`, `easing.standard`).\n"
}