##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Text Animations

Text animation components are dynamic UI elements that bring motion and interactivity to text, enhancing the visual appeal and engagement of content within an interface.

### Typer

Creates a realistic typing effect using the Typed.js library. Perfect for hero sections, landing pages, or anywhere you want to draw attention to key messages. Configure typing speed with `data-type-speed`, backspace speed with `data-back-speed`, and multiple strings with `data-strings` (comma-separated). Set `data-loop="false"` to type once or `data-loop="true"` for continuous cycling.

Typer
Loading...
Typer
Loading...

### Typer with loop

A continuous version of the typing effect that cycles through multiple phrases. The text types out completely, pauses briefly, then backspaces and starts the next phrase. Ideal for showcasing multiple features, benefits, or concepts in a dynamic way. The loop creates an engaging, ever-changing message that keeps users' attention.

Typer with Loop
Loading...
Typer with Loop
Loading...

### Text fade

Smooth fade transitions between different text phrases. Each text string appears with a gentle fade-in effect, remains visible for a few seconds, then fades out before the next string appears. This creates a subtle, elegant way to cycle through multiple messages without the mechanical feel of typing effects. Perfect for testimonials, feature highlights, or rotating taglines.

Text Fade
Loading...
Text Fade
Loading...

### Slide Text

Text slides in from the left side of the container, creating a dynamic entrance effect. Uses CSS transforms and animations for smooth motion. Great for revealing important information or creating visual interest when content loads. The sliding motion draws the eye and creates a sense of movement and energy on the page.

Slide Text
Loading...
Slide Text
Loading...

### Bounce Text

Text appears with a playful bounce effect, starting small and scaling up with a slight overshoot before settling into place. This animation adds personality and energy to your content, making it feel more dynamic and engaging. Perfect for call-to-action text, announcements, or any content that should feel exciting and energetic.

Bounce Text
Loading...
Bounce Text
Loading...

### Character Reveal

Each character appears individually with a staggered animation, creating a wave-like reveal effect across the text. Characters slide up from below while fading in, with each letter delayed slightly from the previous one. This creates an elegant, sophisticated animation that's perfect for headlines, important announcements, or any text that deserves special attention.

Character Reveal
Loading...
Character Reveal
Loading...

### Glow Text

Text pulses with a glowing effect that alternates between subtle and intense illumination. Uses CSS text-shadow to create the glow effect, which continuously animates to draw attention. Perfect for highlighting special offers, important announcements, or creating a futuristic, high-tech aesthetic. The glow effect works especially well with primary or accent colors.

Glow Text
Loading...
Glow Text
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates