Smart Animate Text

Per-character blur-slide animation. Values update directly while changed digits and letters animate up, down, or dynamically.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

smart-animate-text.tsx

Usage

import { SmartAnimateText } from "@/components/unlumen-ui/smart-animate-text";

export default function Example() {
  return <SmartAnimateText value="mon." className="text-6xl font-bold" />;
}

API Reference

value
string
—

The string to display. Each digit or letter that changes between renders animates independently. Punctuation characters (e.g. `:`, `.`, `/`) are rendered statically.

gap?
number
2

Spacing in pixels between characters.

className?
string
—

Additional classes applied to the outer flex container.

digitClassName?
string
—

Additional classes applied to each animatable character wrapper.

staggerDelay?
number
0.04

Delay in seconds between each changed character animation. Unchanged characters are skipped.

enterStiffness?
number
170

Spring stiffness for entering and exiting characters.

enterDamping?
number
10

Spring damping for entering and exiting characters.

direction?
"dynamic" | "up" | "down"
"dynamic"

`dynamic` infers direction from the full numeric value (up when the value increases, down when it decreases). `up` and `down` force a fixed direction regardless of the value.

enterY?
number
32

Vertical offset in pixels from which the entering character slides in.

enterBlur?
number
52

Blur amount in pixels applied to the entering character at the start of its animation.

enterScale?
number
0.7

Scale applied to the entering character at the start of its animation.

Notes

  • Digits (0–9) and letters animate. Separator characters like :, ., or / are rendered as plain <span> elements and never trigger an animation.
  • Changed characters animate with a small left-to-right stagger. Characters that keep the same value are excluded from the delay order.
  • Direction is inferred from the full numeric value when direction="dynamic": 9 to 10 animates changed and newly mounted digits upward, while 10 to 9 animates them downward. Force a fixed direction with "up" or "down".
  • Smart Animate Text renders the latest value directly. It does not queue previous values or animate through intermediate numbers.

Credits

Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.