Pulsing Hotspot

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.

Live Demo

Normal

MSG

Static

Pulsing

What It Is

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.

✓When to Use

To highlight a newly released feature without obtrusive modals
Over a notification bell icon representing unread alerts
As a spatial marker in an interactive map or image guide
Guiding users to the next necessary step in onboarding

✕When NOT to Use

On more than 2 elements at once on the same screen (causes panic/clutter)
For critical errors or destructive actions (use bolder red styles instead)
If the user has already acknowledged the feature

Configuration Tips

01Use the brand primary color or an accent color like amber/blue
02Position absolutely relative to the icon/text it is highlighting (e.g., top-right corner)
03Keep the dot small (e.g., 8-12px) so it doesn't break layout

You've Seen It In

SlackFigmaLinearDiscord

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a pulsing blue dot hotspot to the top right of my notification bell icon to indicate unread status.

Code Example (Tailwind CSS)

export function PulsingHotspot({ colorClass = 'bg-blue-500' }: { colorClass?: string }) {
  return (
    <span className="relative flex h-3 w-3">
      {"text-stone-400 italic">/* The pulsing ring */}
      <span 
        className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${colorClass}`} 
      />
      {"text-stone-400 italic">/* The solid core dot */}
      <span 
        className={`relative inline-flex h-3 w-3 rounded-full ${colorClass}`} 
      />
    </span>
  );
}

"text-stone-400 italic">// Usage relative to an icon:
"text-stone-400 italic">// <div className="relative">
"text-stone-400 italic">//   <BellIcon className="h-6 w-6" />
"text-stone-400 italic">//   <div className="absolute -top-1 -right-1">
"text-stone-400 italic">//     <PulsingHotspot colorClass="bg-red-500" />
"text-stone-400 italic">//   </div>
"text-stone-400 italic">// </div>

Related Effects

Pulse Placeholder

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.