ns-ui

Stats Radar Sweep

Dashboard KPI grid under an observatory radar: a 1px accent arm sweeps the panel once per 12s with sonar rings, and each stat card counts up and lights its border only the instant the wedge crosses its bearing, then settles back to muted until the next revolution.

Use when a dashboard KPI grid that should feel monitored rather than static, each card counting up and lighting only as the radar arm crosses its bearing then settling back between revolutions; pick stat-row-baseline-spark instead when the reader has to trust each delta against a stated baseline, since sweep-gated activation is ambient framing and deliberately not a precise read.

Install

npx shadcn add https://design.helpmarq.com/r/stats-radar-sweep.json
  • canvas
  • radar
  • sweep
  • kpi
  • dashboard
  • stats
  • sonar
  • count-up
  • data-viz
  • ambient

ns-ui / stats-radar-sweep

Telemetry on a slow radar

The observatory logs each sensor once per revolution. A reading only lights up the moment the arm crosses it, then settles back into the noise floor until the next pass.

Network observatory

Revenue
$128.4k+4.2%
p95 latency
182ms-11ms
Uptime
99.98%
Churn
1.2%-0.1
Active nodes
3,412+86
Error rate
0.07%
SWEEP 0016 SENSORS · 12S INTERVAL

the arm sweeps once every 12s — hover or focus a card to replay its reading, click the pivot dot to pause the sweep

Props

PropTypeDefaultDescription
stats?ScanStat[]DEFAULT_STATSKPI cards, clockwise activation order falls out of their bearings
title?string"Network observatory"—
degPerSec?number30sweep speed in degrees per second (30 = one revolution per 12s)
wedgeDeg?number24soft sector width trailing the arm, in degrees
toleranceDeg?number2transit window around a card's bearing, in degrees
className?string——
Back to the catalog