Motion & texture

Pulse Animation

Q: How do people describe a Pulse Animation in plain words?

the little red dot that breathes to show something is live a soft halo that keeps expanding around a pin on a map that heartbeat glow on a recording indicator

Q: How do I implement a Pulse Animation?

Add a pulsing live indicator: a small red core that stays still, with a ::before ring scaling 1→2.5 and fading 0.6→0 over ~1.8s infinite ease-out, next to the text “Live”. Disable or freeze under prefers-reduced-motion.

A looping scale/opacity breath that means “alive,” “in progress,” or “look here.”

Also known as breathing glow · live indicator pulse · status pulse

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Pulse Animation".

Add a pulsing live indicator: a small red core that stays still, with a ::before ring scaling 1→2.5 and fading 0.6→0 over ~1.8s infinite ease-out, next to the text “Live”. Disable or freeze under prefers-reduced-motion.

Anatomy:
- core: The solid dot or icon—usually stays put.
- expanding ring: Pseudo-element that scales out and fades.
- cycle: 1.5–2s feels like rest; under 1s feels like an alarm.

Preferred API / pattern: `CSS animate-ping style utilities / custom keyframes`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Core scales with the ring
○Avoid: Sub-1s cycle
○Avoid: A dozen pulsing dots
○Avoid: Motion without a text label
○Avoid: Ignoring reduced-motion on infinite loops.

In plain wordsHow people search for it

“the little red dot that breathes to show something is live”“a soft halo that keeps expanding around a pin on a map”“that heartbeat glow on a recording indicator”

AnatomyOpen for part names

core: The solid dot or icon—usually stays put.
expanding ring: Pseudo-element that scales out and fades.
cycle: 1.5–2s feels like rest; under 1s feels like an alarm.

How to write itOpen for stack patterns

Web (HTML/CSS)@keyframes scale + opacity loop on a pseudo-element

React + Tailwind + shadcn/uiCSS animate-ping style utilities / custom keyframes

SwiftUIsymbolEffect(.pulse) / repeating scale animation

Ant DesignBadge status processing / custom CSS

Notes

Two jobs, one shape: status (live, recording, online) vs attention (new feature beacon, “you are here”). Unlike ripple (one-shot press), pulse loops. Animate a ring, not the core, or the icon shivers. Cap continuous motion—one or two pulses per screen. Pair motion with text (“Live”) for color-blind and AT users. Respect prefers-reduced-motion.

Common mistakesHumans and models trip here

Core scales with the ring: the whole icon shivers.
Sub-1s cycle: reads as alarm, not breath.
A dozen pulsing dots: a nightclub, not a UI—one or two max.
Motion without a text label: color and flash alone fail a11y.
Ignoring reduced-motion on infinite loops.

More failure symptoms on AI broke it.

Related patterns

BadgeA compact count or status mark attached to an icon, tab, or label.Ripple EffectA circular wave that expands from the press point—visual proof the tap registered.MarqueeContent scrolls endlessly in one direction in a seamless loop.Spinner / Activity IndicatorA compact motion indicator that something is busy—usually circular or system-native.

Spotted a wrong name or missing pattern?

Message on X