Text / COMPONENT

Animated Text

Rotating text with composable blur, fade, shimmer, slide, and character-wave effects, plus adjustable scale.

Live preview

I am

How it works

Animated Text rotates through the supplied strings on an interval. Each transition can combine blur, fade, shimmer, slide, and wave effects; effect values and timing are configurable.

Accessibility

The text remains real DOM text. The component respects prefers-reduced-motion by stopping its automatic rotation and rendering the current text without transition effects.

Limitations

The rotating values are plain strings. Use the component for short labels or phrases rather than rich text or arbitrary React children.

Features

Rotates through a list of words or short phrases.
Combine effects with effects, or use one effect such as effect="fade".
Wave animates individual characters in a staggered sequence.
Available effects: blur, fade, shimmer, slide, and wave.
Optionally set the starting scale for each text transition.
Tune blur, fade, slide, shimmer, and wave values through effectOptions.
Set the direction, timing, prefix, and text classes.
Respects reduced-motion preferences.

Installation

Choose the CLI command or install the component manually.

Package manager

$ npx @istmx/ui add animated-text

Copies the install command for your selected package manager.

Dependencies

ReactMotionTailwind CSSclsxtailwind-merge

Usage

Import the component from the file you copied it to, then use it like any other React component.

Usage

import { AnimatedText } from "@/components/ui/animated-text"
 
<AnimatedText
  prefix="I’m"
  items={["an AI Engineer", "a Builder"]}
  effects={["blur", "fade", "shimmer", "wave"]}
  effectOptions={{
    blur: { amount: 6 },
    fade: { from: 0 },
    slide: { distance: 8 },
    shimmer: {
      duration: 2.2,
      width: 36,
      color: "#71717a",
      highlight: "#f4f4f5",
    },
    wave: { amplitude: 5, stagger: 0.02 },
  }}
  scale={0.96}
  direction="up"
/>

Composition

AnimatedText
├── Entering text
└── Exiting text

API reference

items?string[]

Text values to rotate through.

prefix?string

Text to keep before the rotating item.

effect?AnimatedTextEffect

Choose one effect, such as effect="fade". Defaults to blur; use effects to combine multiple effects.

effects?AnimatedTextEffect[]

Combine blur, fade, shimmer, slide, and wave. Defaults to blur.

effectOptions?AnimatedTextEffectOptions

Tune blur, fade, slide, shimmer, and wave values. Shimmer color and highlight can be set directly.

scale?number

Optional starting scale for transitions, such as 0.96. Omit to disable scaling.

direction?"up" | "down" | "left" | "right" | "none"

Direction for blur and slide transitions. Defaults to up.

interval?number

Delay between text changes in milliseconds.

speed?number

Transition duration in seconds.

className?string

Classes for the component wrapper.

textClassName?string

Classes for the changing text.

The listed props match the current component implementation.

Data attributes

Animated Text does not expose custom data attributes.

Examples

Use for a portfolio role, status, or short list of rotating labels.

Credits & inspiration

Created by Aryan (istmX) for ISTMX. The source-first, copy-and-own philosophy is inspired by shadcn/ui. About the creator