║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Scrolling Number description: A scrolling number animation. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-texts-scrolling-number" />

Installation

<ComponentInstallation name="primitives-texts-scrolling-number" />

Usage

<ScrollingNumberContainer number={1000} step={100}>
  <ScrollingNumberHighlight />
  <ScrollingNumber>
    <ScrollingNumberItems />
  </ScrollingNumber>
</ScrollingNumberContainer>

API Reference

ScrollingNumberContainer

<TypeTable type={{ number: { description: 'The focused number.', type: 'number', required: true, }, step: { description: 'The step of the number.', type: 'number', required: true, }, itemsSize: { description: 'The size of the items.', type: 'number', required: false, default: '30', }, sideItemsCount: { description: 'The number of items to show on the side.', type: 'number', required: false, default: '2', }, direction: { description: 'The direction of the scrolling number.', type: '"btt" | "ttb" | "ltr" | "rtl"', required: false, default: 'btt', }, onNumberChange: { description: 'The callback to use when the number changes as the wheel spins.', type: '(value: number) => void', required: false, }, inView: { description: 'Whether the text is in view.', type: 'boolean', required: false, default: 'false', }, inViewOnce: { description: 'Whether the text should only animate once.', type: 'boolean', required: false, default: 'true', }, inViewMargin: { description: 'The margin to use.', type: 'string', required: false, default: '0px', }, '...props': { description: 'The props of the scrolling number container.', type: 'React.ComponentProps<"div">', required: false, }, }} />

ScrollingNumberHighlight

<TypeTable type={{ '...props': { description: 'The props of the scrolling number highlight.', type: 'React.ComponentProps<"div">', required: false, }, }} />

ScrollingNumber

<TypeTable type={{ delay: { description: 'The delay to use.', type: 'number', required: false, default: '0', }, onCompleted: { description: 'The callback to use when the animation is completed.', type: '() => void', required: false, }, transition: { description: 'The transition to use.', type: 'SpringOptions', required: false, default: '{ stiffness: 90, damping: 30 }', }, '...props': { description: 'The props of the scrolling number.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

ScrollingNumberItems

<TypeTable type={{ '...props': { description: 'The props of the scrolling number items.', type: 'React.ComponentProps<"div">', required: false, }, }} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║