PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Metric Tracker

A 100-dot percentage matrix metric tracker that sequentially lights up dots with ripple delays as values shift across rotating business benchmarks.

When to use

  • KPI dashboards, cohort retention statistics, and system uptime monitors.
  • Visualizing percentages with a tangible 100-dot matrix grid rather than simple progress bars.
  • Auto-rotating showcase widgets demonstrating key company metric progressions.

When not to use

  • Granular time-series line charts with thousands of continuous data points.
  • Dense administrative tables where screen height is constrained.

API Reference

MetricTrackerProps

PropTypeDefaultDescription
metricsMetricItem[]DEFAULT_METRICSArray of metric benchmarks to cycle through.
autoRotateIntervalMsnumber4500Interval in milliseconds between auto-advancing slides (pass 0 to disable).
selectedIndexnumber—Controlled active metric index.
onIndexChange(index: number) => void—Callback fired when the active metric changes.
classNamestring—Additional CSS class names.

MetricItem

FieldTypeDescription
idstringUnique identifier for each metric item.
labelstringPrimary title label of the benchmark metric.
percentagenumberCompletion value from 0 to 100.
previousstringHistorical comparison or delta description text.

Motion

  • Calculated directional dot delay (0.55s total window) animating dot illumination sequentially up or down.
  • Dynamic numeric rolling counter powered by NumberFlow with cubic-bezier easing.
  • Spring transition (stiffness: 420, damping: 28) sliding metric titles in/out in popLayout mode.