Animated Text

Cascade

Flicker

Blink

Expand

Rise

Glide

Elastic

Float

Installation

import { AnimateText } from "@/components/ui/animated-text";

<AnimateText
  text="Modern UI Components"
  type="cascade"
  className="text-2xl font-bold"
  duration={0.5}
  delay={0}
  once={true}
/>

Prop	Type	Default	Description
`text`	`string`	`""`	The text content to be animated.
`type`	`string`	`"cascade"`	Animation style to apply to the text. Options: 'cascade', 'flicker', 'blink', 'expand', 'rise', 'glide', 'elastic', 'float'.
`className`	`string`	`""`	Additional CSS classes to apply to the component.
`delay`	`number`	`0`	Delay before animation starts in milliseconds.
`duration`	`number`	`0.5`	Duration of the animation in seconds.
`staggerChildren`	`number`	`0.05`	Time between each character's animation for cascade effects.
`once`	`boolean`	`true`	If true, animation plays only once when in view.
`fontSize`	`string`	`"2xl"`	Font size using Tailwind CSS size classes.
`fontWeight`	`string`	`"bold"`	Font weight using Tailwind CSS weight classes.
`color`	`string`	`""`	Text color (uses theme colors if not specified).