Scrolling Number · Animate UI

一列数字滚轮旋转到目标值，并在高亮框下停住。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

scrolling-number.tsx

import {
  ScrollingNumber,
  ScrollingNumberContainer,
  ScrollingNumberHighlight,
  ScrollingNumberItems,
} from '@animate-ui/react/primitives/texts/scrolling-number';

export function Score() {
  return (
    <ScrollingNumberContainer number={1000} step={100} itemsSize={40}>
      <ScrollingNumber>
        <ScrollingNumberItems />
      </ScrollingNumber>
      <ScrollingNumberHighlight />
    </ScrollingNumberContainer>
  );
}

动效

delay 之后数字条以 stiffness 90 / damping 30 的弹簧滚过每一个中间值，最后无过冲地停住。
减少动效下直接显示目标值。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
number	`number`	`—`
step	`number`	`—`
itemsSize	`number`	`30`
sideItemsCount	`number`	`2`
direction	`'btt' \| 'ttb' \| 'ltr' \| 'rtl'`	`'btt'`
onNumberChange	`(value: number) => void`	`—`
inView	`boolean`	`false`
inViewMargin	`string`	`'0px'`
inViewOnce	`boolean`	`true`
…props	`React.ComponentProps<'div'>`	`—`
delay	`number`	`0`
onCompleted	`() => void`	`—`
transition	`Transition`	`{ stiffness: 90, damping: 30 }`
…props	`HTMLMotionProps<'div'>`	`—`
…props	`Omit<React.ComponentProps<'div'>, 'children'>`	`—`
…props	`React.ComponentProps<'div'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。