component

Count up

Running live. Go ahead and touch it.

An animated number whose final value is exposed to screen readers.

See it in the design system

How it behaves

  • Starts when reached, or by a prop
  • Formats by locale
  • Jumps to the final value under reduced motion

Find more that moves like this

entrance
Kind
component
Blueprint
motion-kit 1.0.3
Moves by
entrance

Import

import { CountUp } from "@/components/shared/animation/count-up";

Props

PropWhat it does
toFinal value
fromDefaults to 0
durationSeconds. Defaults to 1.4
locale, formatOptionsNumber format
playStarts it. In view when unset
onCompleteCalled when finished

Your agent builds it. You take the credit.

Count up ships inside the Motion Kit blueprint. These instructions tell your agent to take only this piece.

Version
1.0.3
Files
86
Dependencies
20
Assets
3

Paste this into Claude Code, Codex, Cursor, or whichever agent you trust today.

  • Building a blueprint runs its code, so use an isolated environment.
  • License: UNLICENSED.
  • Every value on this page is demo content that shows one component's behavior. The numbers are placeholders, not real figures.

Shelved next to it

component

Reveal

Seventeen entrance presets for a single element, from fade and blur to clips and flips.

component

Stagger

A group of elements that enter one after another, in either direction.

component

Text reveal

A headline or paragraph split into lines, words, or characters that animate in, with accessible labels.