vocab.design

motion

Pulse

also called breathing animation, throb, heartbeat, pulsing dot

A slow repeating change in scale or opacity that keeps an element alive without moving it, used for waiting states and gentle attention.

A pulse is the smallest available sign of life. The element swells and fades on a loop and comes back to exactly where it started, so nothing around it has to move and no space has to be reserved for it. That is what makes it usable in places a spinner would be too loud for: a recording dot, a live badge, a value that is waiting on the server, a map marker asking to be looked at once.

The confusion worth settling is pulse against shimmer. A shimmer travels: a highlight enters one side of a shape and leaves the other, which is why one sweep can cover a whole skeleton screen and read as a single event. A pulse has no direction and no beginning, so it works best on one small element and stops reading as anything at all when it is applied to a page full of them. A pulse is also not a blink: it never reaches zero, and whatever it marks stays legible through the whole cycle.

The alias list comes from bodies and machines (heartbeat, breathing, throb), but in code the word is usually Tailwind’s. Its animate-pulse utility fades opacity to 0.5 and back over two seconds and never touches scale, so a designer asking for a pulse and a developer reaching for that class can be describing slightly different motion. Whichever shape you pick, keep it slow and shallow: an animation that repeats forever beside other content is the case WCAG’s Pause, Stop, Hide criterion is written about, and a pulse must have a resting state that is a perfectly ordinary element, since that is all a visitor with reduced motion turned on will ever see.

Which word?

If you wantsay
an element must signal life while nothing else happenspulse
the highlight travelling across a placeholdershimmer
a hero illustration should not look frozenfloat animation

Related

See also: Presence indicator

Sources