Radar sweep

Use it for

• Sales, CRM and monitoring products that surface what needs attention
• Reporting heroes where a scan of the data should feel live
• Showing a handful of ranked items by distance from a centre

Avoid

• More than about a dozen dots, where labels and pings collide
• Precise comparisons, a ranked list reads faster

How it works

One requestAnimationFrame loop turns the arm through a ref: a conic gradient that peaks at its leading edge plus a thin line. Each frame checks which lead angles the arm crossed since the last frame; a crossed dot gets a Web Animations ping ring and its time is stored. Every dot's brightness is a CSS custom property written per frame from the time since its last pass, so dots fade steadily until the beam returns.

Accessibility

Every lead is a real button named with its score and note, so the label card opens on focus, hover or tap. The sweep has a pause button and stops off screen. Reduced motion parks the arm and shows every lead at full brightness with no pings.