Border Ripple
Concentric border rings expand outward or contract inward from the element on hover.
Use for
Buttons
Variants
- Ripple Out
- Ripple In
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 "Border Ripple" hover effect to [where].
When the pointer enters, a couple of border rings should spread outward from the element one after another and fade away: quick and light, like a ripple.
Play it once per hover rather than looping, and don't let the rings shift the surrounding layout.Similar motions
A
Hover to play
An outline grows outward from or shrinks toward the element on hover.
Use for
Buttons
Add an "Outline Expand" hover effect to [where].
An outline should start flush with the element's edge and move outward to leave a small gap around it, staying there while hovered and closing back in when the pointer leaves: smooth and quick.
Draw the outline so it doesn't change the element's size or push nearby content, and show the same effect on keyboard focus.A
Ping
Also called Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
A copy of the element scales up and fades out repeatedly like a radar ripple.
Use for
Notification dots, live status
Add a "Ping" effect (also called a radar ping or pulse ring) to [where].
A copy of the element should grow outward and fade away, again and again at a steady pace, while the element itself stays still.
Draw the ring as a separate layer so it never changes the layout, and stop the loop for users who prefer reduced motion.A
Ripple Rings
Also called Background ripple, Concentric ripples
Concentric circles expand outward from a center point and fade.
Use for
Hero centerpieces, audio or pairing visuals
Add a "Ripple Rings" effect (also called a background ripple or concentric ripples) to [where].
Rings should keep expanding outward from a center point and fade as they grow, evenly spaced one after another: slow and steady.
Keep the center element still and in place, and stop the ripples for users who prefer reduced motion.More in Hover
A
Hover to play
Bounce Scale
Also called Bounce In / Out
The element scales with an elastic overshoot when hover starts or ends.
Use for
Buttons, badges
Add a "Bounce Scale" hover effect (also called bounce in / out) to [where].
The element should grow slightly larger with a springy, visible overshoot, briefly going past its final size before settling, and bounce back the same way when the pointer leaves.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.ABCDEF
Move your pointer here
Card Hover Effect
Also called Sliding highlight card grid
A highlight background slides between cards in a grid to follow whichever card is hovered.
Use for
Card grids, feature lists
Add a "Card Hover Effect" (also called sliding highlight card grid) to [where].
A soft highlight background should appear behind the hovered card and glide smoothly to whichever card the pointer moves to next, fading out when the pointer leaves the grid.
Make keyboard focus move the highlight the same way, and keep the cards themselves from shifting.A
Move your pointer here
Card Spotlight
Also called Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
A soft radial light follows the pointer across the card surface and reveals the background beneath.
Use for
Feature cards, bento grids
Add a "Card Spotlight" effect (also called spotlight hover, pointer glow, mouse-following glow or radial gradient hover) to [where].
A soft, faint radial glow should follow the pointer across the card surface, fading in when the pointer enters and out when it leaves.
Keep the glow behind the card content so text stays readable, and on touch devices simply leave the card unlit.