Swing
The element swings back and forth from its top edge like a pendulum with decaying amplitude.
Use for
Hanging signs, notification icons
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 "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.Similar motions
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
Head Shake
Also called Headshake, No Shake
The element wobbles side to side with slight rotation like a head shaking no.
Use for
Invalid input or rejection
Add a "Head Shake" attention effect (also called headshake or no shake) to [where].
The element should turn quickly side to side with a slight twist, like a head shaking no, each turn smaller than the last before it settles.
Play it once each time it is triggered, such as on a rejected action, and keep the surrounding layout from moving.A
The element swings on a top-left hinge, dangles, and then drops off the screen.
Use for
Comic-style removal of an element
Add a "Hinge" exit animation to [where].
The element should swing down from its top-left corner as if a screw came loose, dangle back and forth, then drop off the screen while fading: slow, comic and deliberate.
Let it fall over other content without pushing the layout or adding scrollbars, remove it once it has dropped, and hide it instantly when the user prefers reduced motion (prefers-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.More in Emphasis
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.