Add the Hotspot component

Right now, we use these components inconsistently. We also haven't aligned on its name. Sometimes it's referred to as "the dot", other times it's a "hotspot". We should decide on the name, as well as come up with a consistent design, how users interact with this component and its guidelines (separate issue).

Example 1	Example 2
	Interactive and animated prototype of Example 2

Example 3	Example 4
Your work > Merge requests page (https://gitlab.com/dashboard/merge_requests)

Example 5	Example 6
Future need: Risk score updates on the backend need to be shown to the user, so they know why their risk level may have changed, even if all vulnerabilities remained the same.	Explaining a navigation change from issues to work items

View component explorations in Figma

Specs

Moved out of MR. Preserving for later:

Indicator

The indicator uses a two-layer circular design positioned near the UI element it highlights. The outer ring pulses to draw attention, while the inner dot remains solid.

Structure

• Outer ring: 16px diameter with 8px padding (32px total size), serves as the pulsing animation container
• Inner dot: 16px diameter, solid and stable

Color

• Outer ring: rgba(31, 117, 203, 0.45) or $blue-500 at 45% opacity for a subtle, translucent pulse
• Inner dot: rgba(31, 117, 203, 0.9) or $blue-500 at 90% opacity for clear visibility

Animation

Smooth pulsing scale effect applied to the outer ring:

• Scale: 1.0 → 1.15 → 1.0 (using scale3d for better performance)
• Duration: 1500ms per cycle
• Timing function: Default (ease)
• Iterations: Infinite until user interaction (hover or click)
• Animation pauses on hover to avoid distraction during interaction
• Animation restarts when popover is dismissed

Interaction states:

• Default: Opacity 0.8, continuous pulse animation
• Hover: Opacity 1.0, animation pauses, scales to 1.2x for better clickability
• Active: Animation stops, popover displays
• All transitions: 300ms ease-in-out for smooth state changes

For accessibility reasons, we should support prefers-reduced-motion.

Checklist

Make sure the following are completed before closing the issue:

1. Assignee: Create component in your own draft file in Figma using the component template, including all variations and states.
2. Assignee: Update the link to the Figma file in the issue description.
3. Assignee: Ask a FE/UX Foundations designer to review your component (ensure they have edit permissions in Figma).
4. Reviewer: Review and approve assignee’s addition. Ensure that component includes all variations/states and, if applicable, matches existing Sketch specs and is responsive.
5. Reviewer: Assign to a Figma maintainer for final review (make sure they have edit permissions in Figma).
6. Maintainer: Review and approve assignee’s addition.
7. Maintainer: Add the component to the Pajamas UI Kit file, and view the component in the Assets panel to ensure it aligns with what’s outlined in the document and asset library structure documentation.
8. Maintainer: Publish the library changes along with a clear commit message.
9. Assignee: Move the draft file to the Component archive Figma project. If you're a community contributor, we ask that you transfer ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
10. Assignee (or Maintainer, for community contributions): If it's a new pattern or a significant change, add an agenda item to the next UX weekly call to inform everyone.
11. Assignee: Create a merge request in this repository with the component-guideline template to create or update the component's documentation page. Link it here as a related merge request. Use View design in Pajamas UI Kit → for the link text. This replaces any link to Sketch Measure specs. Anyone with the link should be able to view the file.
12. Assignee: Once the merge request is created, close this issue.