Numbers and statuses

When a stock number changes, it just changes, and nobody notices. ValueCut rolls only the digits that changed, in the direction of the change, and gives the value a small punch. Text, like an order status, crossfades instead.

InstallCopy Anchor Link

npx shadcn add @keyframery/value-cut

If your project doesn't know @keyframery yet, do the Quick start first.

UseCopy Anchor Link

Put ValueCut where the value is rendered:

import { ValueCut } from "@/components/keyframery/value-cut"

<ValueCut value={visitors} format={{ notation: "compact" }} />
<ValueCut value={price} format={{ style: "currency", currency: "USD" }} locale="en-US" />
<ValueCut value={order.status} announce />

You should seeCopy Anchor Link

When the value changes, only the digits that changed roll up or down, and the whole value briefly grows and settles. A status crossfades with a small slide.

OptionsCopy Anchor Link

Good to knowCopy Anchor Link

• Numbers use tabular figures, so the digits don't shift sideways.
• The punch scales the value to 1.06 and back over 300 ms. Text crossfades with a 6px slide.
• The first render never animates, and with reduced motion the value swaps instantly.

In film, a quick push toward the subject is a punch-in.