Animated Text

A versatile text animation component for character, word, or line effects.

Granular controlCustom variantsPreset animations
Basic
Features

Granular Animation

Animate by character, word, or line.

Custom Variants

Define your own Framer Motion variants.

Preset Effects

Use built-in presets for quick results.

Installation
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add animated-text

Anatomy
import { AnimatedText } from "@/components/ui/motion/animated-text";<AnimatedText text="Hello World" />
Testing Playground
Per Word
Per Line
Props

Loading types…

Edit on GitHub

Marquee

A scrolling text display box that displays information from one or more text display boxes.

Cipher Text

A text animation that simulates a decoding or decryption effect.