Wavy Text
Also called Text Wave
Letters bob up and down in sequence, creating a wave running through the word.
Use for
Playful headings, loaders
Variants
- per-letter delay
- hover wave
Also called Text Wave
Letters bob up and down in sequence, creating a wave running through the word.
Playful headings, loaders
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Wavy Text" effect (also called text wave) to [where].
The letters should bob up and down one after another so a gentle, smooth wave keeps running through the word.
Loop it seamlessly, keep it read as one word by screen readers, and stop the wave for users who prefer reduced motion.Also called Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
A heading is split into characters, words or lines that animate in one after another with a small delay.
Use for
Headlines, section titles
Add a "Split Text Stagger" entrance (also called letter stagger or staggered text reveal) to [where].
Split the heading into letters that rise and fade in one after another with a short delay between them, quick and smooth without bounce.
Play it once when the heading comes into view, keep it read as one word by screen readers, and show it without motion for users who prefer reduced motion.Also called Dots loader, Ellipsis loader, Three-dot loader
A row of dots bounce, fade or scale in sequence.
Use for
Inline loading, chat waiting
Add "Bouncing Dots" (also called a dots loader or three-dot loader) to [where].
The dots should hop up and land one after another in a light, springy rhythm, with a short rest before the sequence repeats.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.Also called Kinetic Text
Text scales, moves, or rotates as a moving graphic element rather than static copy.
Use for
Brand hero sections
Add "Kinetic Typography" (also called kinetic text) to [where].
Rows of large repeated text should slide sideways in alternating directions at a slow, steady pace, turning the words into a moving graphic.
Make each row loop seamlessly without a visible jump, let screen readers read the text only once, and stop the motion for users who prefer reduced motion.Also called Typing dots, Chat is typing
Three dots in a bubble pulse or rise in turn to show someone or an AI is composing.
Use for
Chat, AI assistants
Add a "Typing Indicator" (also called typing dots) to [where].
Dots inside a small chat bubble should rise and brighten one after another in a soft, gentle rhythm while the other side is composing.
Keep the loop seamless, remove the bubble as soon as the message arrives, and give screen readers a short status text instead of the dots.ABDEFGHIJKLDEFMN
Also called Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
One word in a sentence is swapped for the next word in a list with a slide, flip or fade.
Use for
Hero taglines
Add a "Word Rotate" effect (also called rotating words or flip words) to [where].
One word in the line should slide up and out while the next word from a list slides in from below, pausing on each word before the next change.
Keep the rest of the line from jumping when the words have different widths, don't make screen readers announce every change, and stop rotating for users who prefer reduced motion.Also called Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
Text filled with a gradient whose colours continuously shift or flow.
Use for
Brand headings
Add an "Animated Gradient Text" effect (also called aurora text or a rainbow text sweep) to [where].
The letters should be filled with a gradient whose colors flow slowly and smoothly across the text in an endless, seamless loop.
Keep the text readable against its background at every moment, and hold the colors still for users who prefer reduced motion.Hover to play
Also called Text Glitch, RGB Split Glitch
Text jitters with sliced offsets and red/cyan colour splits like a broken signal.
Use for
Cyberpunk or gaming headings
Add a "Glitch Text" hover effect (also called text glitch or RGB split glitch) to [where].
While the pointer is over the text, it should jitter in quick, snappy bursts: thin horizontal slices jump sideways and two colored copies split apart like a broken signal, then settle back when the pointer leaves.
Keep the real text in the document only once so screen readers don't read the copies, and show the same effect on keyboard focus.