Arc Gauge

Radial speedometer-style gauge rendered as SVG tick marks around an arc. Fully configurable sweep angle (default 180°), tick count, radius, and tick length. Exposes role="meter" with proper ARIA value attributes.

Installation

Usage

import { ArcGauge } from "@/components/arc-gauge";

export default function Page() {
  return <ArcGauge value={28} showValue />;
}

Custom Sweep

// Full circle
<ArcGauge value={72} ticks={80} startAngle={-180} sweepAngle={360} showValue />

// Narrow arc (60°)
<ArcGauge value={42} ticks={30} startAngle={-30} sweepAngle={60} />

Blueprint Variant

The blueprint variant adds a count-up reveal — ticks fill from 0 → value over ~860ms (ease-out cubic), and when showValue is set the readout fades in only after the count completes. Honors prefers-reduced-motion: reduce (snaps to final state).

<ArcGauge
  variant="blueprint"
  value={42}
  ticks={60}
  sweepAngle={270}
  startAngle={-135}
  showValue
/>

Use the blueprint variant for editorial moments where the gauge is the single ritual on a section — pair with a still rank table or heatmap, not other animated primitives.

Props

Features

• Pure SVG — No canvas, no runtime deps
• Configurable sweep — Half-moon, full circle, or any slice
• Accessible — role="meter" with aria-valuemin/max/now/text
• Adaptive viewBox — Auto-computed bounds stay snug around any sweep

Lineage