Rotate
The element turns by a few degrees when hovered.
Use for
Icons, thumbnails
Variants
- Rotate
- Icon Rotate
- Grow Rotate
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 "Rotate" hover effect to [where].
The element should turn slightly clockwise while the pointer is over it and turn back when it leaves: smooth and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.Similar motions
A
Hover to play
The element shears sideways when hovered.
Use for
Buttons, tags
Add a "Skew" hover effect to [where].
The element should shear sideways into a slight slant while the pointer is over it, and straighten when it leaves: quick and smooth.
Keep the text readable while slanted and the surrounding layout from shifting, and show the same effect on keyboard focus.A
Hover to play
An icon inside a button spins around when the button is hovered.
Use for
Icon buttons
Add an "Icon Spin" hover effect to [where].
The icon inside the element should spin one full turn smoothly when the pointer enters, and turn back when it leaves.
Spin only the icon, not the whole button, and show the same effect on keyboard focus.A
The element rocks side to side with tilt like a wobbly object.
Use for
Attention on icons or buttons
Add a "Wobble" attention effect to [where].
The element should rock side to side with a tilt, starting with a big sway that shrinks with each swing until it settles.
Play it once when triggered, and keep neighbouring content from shifting.A
The element swings back and forth from its top edge like a pendulum with decaying amplitude.
Use for
Hanging signs, notification icons
Add a "Swing" attention effect to [where].
The element should swing back and forth like a hanging sign, starting with a wide swing that quickly dies down.
Pivot it from its top edge rather than its center, and play it once when triggered.More in Hover
A
Hover to play
The corners of the element smoothly round on hover.
Use for
Buttons, images
Add a "Round Corners" hover effect to [where].
The element's sharp corners should round off smoothly while the pointer is over it, and sharpen again when it leaves: soft and quick.
Keep the element's size unchanged, and show the same effect on keyboard focus.A
Hover to play
Shine Sweep
Also called Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
A diagonal band of light sweeps across the element from one side to the other on hover.
Use for
Buttons, cards, badges
Add a "Shine Sweep" hover effect (also called sheen, shiny button, shine on hover, glint, shimmer or shimmer button) to [where].
A soft diagonal band of light should sweep across the element from left to right, repeating with a short pause while the pointer stays over it.
Keep the band clipped inside the element, stop it when the pointer leaves, and don't run it for users who prefer reduced motion.A
Hover to play
Shrink
Also called Scale Down
The element smoothly scales down slightly when hovered.
Use for
Buttons, tiles
Add a "Shrink" hover effect (also called scale down) to [where].
The element should scale down slightly and smoothly while the pointer is over it, and grow back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.