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 "Text Scramble" hover effect (also called text decode or encrypted text) to [where].
When the pointer moves over the text, each letter should flicker rapidly through random characters and settle on its real letter, resolving one after another from left to right.
Keep the text width from jumping while it scrambles, keep screen readers on the real text, and show the same effect on keyboard focus.
Also calledTyping Animation, Typewriter Effect, Typing Text
Characters appear one at a time as if typed, usually followed by a blinking caret.
Use for
Hero headlines, taglines
Add a "Typewriter" effect (also called typing animation or typing text) to [where].
The characters should appear one at a time at a steady typing pace, with a caret right after the last typed character that blinks a few times once typing is done.
Play it once rather than looping, let screen readers read the full text right away, and show the full text for users who prefer reduced motion.
Words fade in sequentially on page load, often with a blur clearing, as if being generated.
Use for
AI-style intro copy
Add a "Text Generate" effect to [where].
The words should fade in one after another while a soft blur clears from each, as if the text is being generated: steady and calm.
Play it once on load, let screen readers read the full text right away, and show it without motion for users who prefer reduced motion.
H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Also calledText Flipping Board, Flip Board, Vestaboard display
Characters flip like an airport departure board until they land on the target letter.
Use for
Status boards, retro displays
Add a "Split-Flap Text" effect (also called a text flipping board or flip board) to [where].
Each character tile should flip quickly through the alphabet until it lands on its target letter, with the tiles settling one after another from left to right.
Run it once each time the text appears or changes, announce only the final text to screen readers, and show the final text without flipping for users who prefer reduced motion.
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.
Text rotates in 3D perspective following the mouse position.
Use for
Hero headings
Add a "Text Tilt" effect (also called perspective text tilt) to [where].
The text should tilt gently in 3D toward the pointer as it moves, following it smoothly, and ease back flat when the pointer leaves.
Keep the tilt subtle so the text stays readable, and leave the text flat on touch devices and for users who prefer reduced motion.
Also calledAnimated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
An underline grows from one side or the centre under a link on hover.
Use for
Nav links, inline links
Add an "Underline Draw" hover effect (also called animated underline or hover underline animation) to [where].
When the pointer is over the link, an underline should grow smoothly from left to right under the text, and shrink back when the pointer leaves: quick and subtle.
Keep the underline from shifting the surrounding layout, and show the same effect on keyboard focus.