Text Tilt
Also called Perspective Text Tilt
Text rotates in 3D perspective following the mouse position.
Use for
Hero headings
Variants
- mouse-follow
Prompt
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 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.Similar motions
A
Move your pointer here
3D Tilt
Also called Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
A card rotates in perspective toward the pointer, with layered content lifting off the surface.
Use for
Product and pricing cards
Add a "3D Tilt" effect (also called a perspective tilt or tilt card) to [where].
The card should lean in perspective toward the pointer as it moves, with its inner layers lifting off the surface at different depths, and ease back flat when the pointer leaves: smooth and subtle.
Keep the tilt gentle so text stays readable, and leave the card flat on touch devices and for users who prefer reduced motion.ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography
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.More in Text
ABC DEFG
Typewriter
Also called Typing 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.ABC DEF
Hover to play
Underline Draw
Also called Animated 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.ABCDEF
Hover to play
Variable Font Weight Animation
Also called Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
Letters smoothly get bolder or lighter (or change width/slant) via variable-font axes.
Use for
Interactive headings
Add a "Variable Font Weight Animation" hover effect (also called font weight shift) to [where].
While the pointer is over the text, the letters should grow bolder one after another in a smooth wave from left to right, and thin out again when the pointer leaves.
Use a variable font so the weight changes smoothly instead of jumping, keep the heading from pushing nearby content around as it widens, and show the same effect on keyboard focus.