Spin
Also called Rotate Loop, Spinner
The element rotates continuously at constant speed.
Use for
Loading spinners
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 "Spin" effect (also called a spinner or rotate loop) to [where].
The element should rotate continuously at a constant, even speed, with no easing between turns.
Make the loop seamless, give the spinner an accessible loading label, and slow or stop it for users who prefer reduced motion.Similar motions
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.Circular Spinner
Also called Spinner, Throbber, Circular indeterminate
A ring or arc rotates continuously to show that something is loading.
Use for
Buttons, page loads
Add a "Circular Spinner" (also called a spinner or throbber) to [where].
An arc should rotate steadily around a faint ring while it stretches longer and shorter, smooth and continuous.
Keep the rotation seamless, give it a loading label for screen readers, and slow or stop it for users who prefer reduced motion.A
Hover to play
The element turns by a few degrees when hovered.
Use for
Icons, thumbnails
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.ABCDEFGHIJKLMNOP
Spinning Text
Also called Circular Text, Text on Circle
Text is set around a circle that rotates continuously.
Use for
Rotating badges, stamps
Add "Spinning Text" (also called circular text or text on circle) to [where].
Letters should be spaced evenly around a circle that turns slowly and steadily, with no jump when the loop restarts.
Give screen readers the text once as plain text, and stop the rotation for users who prefer reduced motion.More in Emphasis
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.A
The element scales up, wiggles with rotation, and returns to size in a celebratory flourish.
Use for
Success states, celebrations
Add a "Tada" attention effect to [where].
The element should dip slightly smaller, then grow and wiggle side to side with a quick tilt before returning to its normal size, like a small celebration.
Play it once, for example right after a success, and skip it for users who prefer reduced motion.Vibrate
Also called Vibration, Buzz
The element trembles rapidly in tiny multi-directional jolts, like a phone vibrating.
Use for
Alerts, incoming-call style cues
Add a "Vibrate" attention effect (also called buzz or vibration) to [where].
The element should tremble in tiny, rapid jolts in different directions for a brief moment, like a phone buzzing, then settle.
Keep the movement very small so the content stays readable, and play it once per alert instead of looping.