Find this app useful? Buy Jeff a coffee ☕
AnimaText
Turn plain text into animated CSS effects — ready to paste into any CMS
Text
Welcome to AnimaText!
Preview
Settings
Animation Effect
The motion style applied to each character or word. Entrances (Fade, Slide, Hide-And-Seek, Blur, Flip, Spin) reveal text from nothing. Loopers (Wave, Wiggle, Bounce, Shimmer) keep running. Glitch and Rubber Band add personality.
Fade Up
Fade Down
Fade In
Hide-And-Seek
Slide Left
Slide Right
Wave
Bounce
Spin
Wiggle
Glitch
Typewriter
Blur In
Flip
Rubber Band
Shimmer
Explode
Usage
Header wraps in a <div> for headings and section breaks — font size is included in the output. Inline wraps in a <span> for emphasis within text — font size is omitted so it inherits from surrounding content.
Header
Inline
Animation Details
▼
Animate By
Split the text into individual characters or whole words before staggering. Characters create a fine ripple effect; words produce a chunkier, punchier entrance.
Character
Word
Stagger Order
The pattern in which characters receive their delay offset. Sequential flows left to right. Random scatters timing. Center Out radiates from the middle. Edges In converges inward. Wave follows a sine curve.
Sequential
Random
Center Out
Edges In
Wave
All At Once
Easing
The acceleration curve of the motion. Ease-out starts fast and decelerates — great for entrances. Spring and Elastic add a satisfying overshoot. Steps gives choppy, frame-by-frame movement.
Ease
Ease Out
Ease In
Ease In Out
Spring
Elastic
Linear
Steps
Intensity
Scales the magnitude of physical effects — travel distance for slides and fades, rotation angle for wave, blur radius for Blur In, scale factor for pop, and displacement for glitch.
5
Repeat
How many times the full animation sequence plays. When set to anything other than Once, the timing is automatically extended so every character finishes before any character restarts.
Once
Loop
Twice
Three Times
Styling
▼
Font Size (rem)
Sets the font size in the preview and, for Block mode, in the exported output. In Inline mode this is preview-only — the text inherits its size from surrounding content.
Font Family
Optional. Enter a font name to apply to the animated text — e.g. "Georgia" or "'Playfair Display', serif". Leave blank to inherit from surrounding content.
Style
Bold
Italic
Timing
▼
Duration (ms)
How long each individual character or word takes to complete one animation cycle, in milliseconds. Shorter values feel snappy; longer values feel cinematic.
600ms
Stagger Delay (ms)
The time gap between each successive character or word starting its animation. At 0 ms all items animate simultaneously; higher values spread the wave further apart.
60ms
Fill Delay (ms)
A global delay added before any character begins animating. Use this to pause before the sequence starts — for example, to let the page settle after load or after a scroll trigger fires.
0ms
Video Export
▼
Aspect Ratio
Frame dimensions for the exported MP4. 16:9 is best for landscape video, 9:16 for vertical/social, 1:1 for square posts. Native uses the preview's own dimensions at 2x.
16:9 Landscape
9:16 Portrait
1:1 Square
Native
Background Color
Background fill of the exported MP4. Only affects video export — the live preview and CMS output are unchanged.
Foreground Color
Text color in the exported MP4. Only affects video export — the live preview and CMS output are unchanged.
Copy Code to Clipboard
Export MP4
Reset
CMS-Ready Output
All
HTML
CSS
JS
Minify output