Bounce
Also called Bounce (attention)
The element hops up and down with decelerating bounces.
Use for
Scroll-down hints, call-to-action buttons
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 "Bounce" attention effect to [where].
The element should hop up and drop back down in a few quick bounces that get smaller each time, with a slight squash as it lands.
Play it once when triggered rather than looping, and skip it for users who prefer reduced motion.Similar motions
A
Hover to play
Bob
Also called Hang
The element floats up then bobs or hangs up and down continuously while hovered.
Use for
Icons, buttons
Add a "Bob" hover effect (also called hang) to [where].
The element should float up a little, then keep bobbing gently up and down while the pointer stays over it, and drop back when the pointer leaves: slow and soft.
Loop the bobbing only while hovered, and keep it still for users who prefer reduced motion.A
Bounce In
Also called Bounce In Down, Bounce In Up
The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.
Use for
Notification badges, playful modals
Add a "Bounce In" entrance animation (also called bounce in down or bounce in up) to [where].
The element should grow from small, overshoot its full size and wobble a few times before settling: quick and springy.
Play it once so it doesn't keep pulling attention, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).3
Notification Badge Bounce
Also called Badge pop, Badge pulse, Ping
A count badge pops, bounces, or pulses when a new notification arrives.
Use for
Bell icon, inbox
Add a "Notification Badge Bounce" animation (also called a badge pop or ping) to [where].
When a new notification arrives, the count badge should pop in from nothing and settle with a couple of quick, springy bounces while a soft ring pulses out from it once.
Play it once per new notification rather than looping, and announce the new count to screen readers.More in Emphasis
Flash
Also called Blink
The element blinks by quickly toggling its opacity.
Use for
Alerting to new content
Add a "Flash" attention effect (also called blink) to [where].
The element should blink by quickly fading out and back in twice, then stay fully visible.
Play it once rather than as an endless blink, and skip it for users who prefer reduced motion, since fast blinking can be uncomfortable.ABC
Flicker
Also called Flickering
The element's opacity flickers irregularly like a failing light.
Use for
Neon and glitch effects
Add a "Flicker" effect (also called flickering) to [where].
The element should stay steady most of the time and dim in short, uneven stutters like a failing neon light.
Keep the timing irregular rather than evenly spaced, avoid rapid full-strength flashing, and stop it for users who prefer reduced motion.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.