Tally Counter

New

A number on split-flap tiles that flip when it changes

$ npx @hritik-sharmaa/repeat-ui add text-effect-tally-counter

Category: Text Effect
Added: Nov 1, 2026
Version: 1.0.0
Packages: motion
Flavors: TS · JS · Tailwind · CSS

Live preview

Customize

Start value2048

Min digits4

Grouping

Font Size48px

Digits

Tiles

Duration0.6s

import TextEffectTallyCounter from "@/components/repeat-ui/text-effect-tally-counter/preview";

<TextEffectTallyCounter />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add text-effect-tally-counter --variant ts-tailwind

Use it

The files are in components/repeat-ui/text-effect-tally-counter/.

import TextEffectTallyCounter from "@/components/repeat-ui/text-effect-tally-counter/preview";

export default function Page() {
  return <TextEffectTallyCounter />;
}

Props

Prop	Type	Default	Description
`value`	`number`	2048	The number to show. Changing it flips the digits that differ.
`minDigits`	`number`	4	Pad with leading zeros to at least this many digits.
`grouping`	`boolean`	true	Put a comma between thousands.
`fontSize`	`number`	48	Digit size in pixels.
`color`	`string`	"#fafafa"	Digit colour.
`tileColor`	`string`	"#171717"	Tile colour.
`duration`	`number`	0.6	Seconds per flip.
`className`	`string`	""	Extra classes for the root element.

More text effect

See all

Flipping TextText that flips between different words

Flow TextSmooth flowing text animation

Pop TextText that pops with scale animations

Installation

Run the command

Use it

Props

More text effect