Wobble Card
The card translates and scales slightly in response to pointer movement over it.
Use for
Promo cards
Variants
- Wobble Card
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 "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.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.A
Move your pointer here
Magnetic Button
Also called Magnetic target, Magnetic hover
The element is pulled toward the pointer as it comes close, then snaps back when it leaves.
Use for
CTA buttons, nav icons
Add a "Magnetic Button" effect (also called a magnetic target or magnetic hover) to [where].
As the pointer comes close, the button should be pulled a little toward it with its label moving slightly further, and when the pointer leaves it should spring back to its place with a small bounce.
Keep the surrounding layout from shifting, and turn the pull off on touch devices and for users who prefer reduced motion.A
Move your pointer here
Glare / Holographic Card
Also called Glare hover, Glare card, Magic card, Glare
A bright highlight follows the pointer across a card surface like a reflection.
Use for
Premium or collectible cards
Add a "Glare / Holographic Card" effect (also called a glare card or glare hover) to [where].
A soft bright highlight should follow the pointer across the card surface like light reflecting off it, while the card leans slightly toward the pointer; both fade away when the pointer leaves: smooth and subtle.
Let clicks pass through the glare layer, keep the content readable under it, and show the card without glare on touch devices.More in Hover
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.A
Hover to play
Background Sweep
Also called Background Fill, Slide Fill
A colored background wipes across the element from one edge on hover.
Use for
Buttons, menu links
Add a "Background Sweep" hover effect (also called background fill or slide fill) to [where].
A new background color should wipe across from the left edge to the right, smooth and quick with no bounce, and retract the same way when the pointer leaves, while the label color switches to stay readable.
Keep the fill clipped inside the element's shape, and show the same effect on keyboard focus.