原语 / Animate UI
Counting Number · Animate UI
从起始值计数到目标值的数字，直接写入 DOM，不逐帧触发 React 渲染。
安装
自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。
bun add @animate-ui/react motion用法
直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。
import { CountingNumber } from '@animate-ui/react/primitives/texts/counting-number';
export function Stat() {
return <CountingNumber number={2025} inView />;
}动效
- 从 fromNumber 计数到 number，弹簧 stiffness 90 / damping 50：第一秒走完大部分，最后几个数字慢慢落定。
- 减少动效下直接显示最终数字；数字变化时不会重排布局。
所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。
API
动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。
| 属性 | 类型 | 默认值 |
|---|---|---|
| number | number | — |
| fromNumber | number | 0 |
| padStart | boolean | false |
| decimalSeparator | string | '.' |
| thousandSeparator | string | — |
| decimalPlaces | number | 0 |
| transition | SpringOptions | Transition | { stiffness: 90, damping: 50 } |
| delay | number | 0 |
| initiallyStable | boolean | false |
| inView | boolean | false |
| inViewMargin | string | '0px' |
| inViewOnce | boolean | true |
| …props | Omit<React.ComponentProps<'span'>, 'children'> | — |
未列出的属性与上游 API 完全一致，可在 官方文档 查阅。
内容对应官方文档 2026-10-18 版本。