Smart Animate Text

May 11, 2026

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

Prop	Type	Default	Description
`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.
`animateOnMount?`	`boolean`	`false`	Whether animatable characters should play their enter animation on the first render.

Notes

Digits (0–9) and letters animate. Separator characters like :, ., or / are rendered as plain <span> elements and never trigger an animation.
Separator characters use stable occurrence-based keys from the end of the string, so trailing punctuation like . follows layout changes instead of remounting when the text length changes.
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.