Underline Reveal
Also called Overline Reveal, Reveal
A line slides in from the bottom or top edge into place to underline or overline the element.
Use for
Nav links, buttons
Variants
- Reveal
- Underline Reveal
- Overline Reveal
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 an "Underline Reveal" hover effect (also called overline reveal or reveal) to [where].
A full-width line should slide up into place from just below the bottom edge while the pointer is over the element, and slide back down out of view when it leaves: quick and smooth.
Clip the line at the edge so it appears by sliding rather than fading or growing, and show the same effect on keyboard focus.Similar motions
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.ABC
Hover to play
A line grows above the text from the left, center, or right on hover.
Use for
Nav links, tabs
Add an "Overline Grow" hover effect to [where].
A line above the text should grow outward from the center to both sides while the pointer is over it, and shrink back to the center when it leaves: quick and smooth.
Reserve space for the line so the text doesn't shift, and show the same effect on keyboard focus.ABC DEFG HIJ KL
Text Highlighter
Also called Highlight Marker, Marker Underline, Hero Highlight
A marker-style colour band draws across a phrase to emphasise it.
Use for
Emphasising key phrases
Add a "Text Highlighter" effect (also called highlight marker or marker underline) to [where].
A marker-style color band should sweep smoothly behind the key phrase from left to right, like someone highlighting it with a pen.
Play it once when the phrase scrolls into view, keep the text readable on top of the band, and let the band follow the phrase correctly when it wraps onto two lines.ABC
Click to play
Tab Indicator Slide
Also called Sliding underline, Active tab indicator, Segmented control pill
An underline or pill glides from the old tab to the newly selected tab.
Use for
Tab bars, segmented controls
Add a "Tab Indicator Slide" (also called a sliding underline or active tab indicator) to [where].
When a new tab is selected, the underline should glide from the old tab to the new one, quick and smoothly decelerating, stretching to the new tab's width if it differs.
Keep proper tab semantics with arrow-key navigation, and move the indicator without sliding for users who prefer reduced motion.More in Hover
A
Move your pointer here
The card translates and scales slightly in response to pointer movement over it.
Use for
Promo cards
Add a "Wobble Card" effect to [where].
As the pointer moves over the card, the card should shift slightly toward it while its content shifts slightly the other way with a small scale-up, following smoothly, and everything settles back when the pointer leaves.
Keep the movement small, and turn it off on touch devices and for users who prefer reduced motion.A
Hover to play
A colored background sweeps in from an edge with an elastic overshoot.
Use for
Buttons
Add a "Background Bounce Sweep" hover effect to [where].
A new background color should sweep in from one edge, overshoot the far edge a little with an elastic bounce and then settle, while the label color switches to stay readable; on leave it slides back out smoothly.
Keep the label above the fill, and show the same effect on keyboard focus.A
Hover to play
Background Fade
Also called Color Fade
The background and text color cross-fade to a new color on hover.
Use for
Buttons, nav items
Add a "Background Fade" hover effect (also called color fade) to [where].
The background and text colors should cross-fade smoothly to new colors while the pointer is over the element, and fade back when it leaves: calm, with no movement.
Keep enough contrast between text and background in both states, and show the same effect on keyboard focus.