Sitewright

Performance gauges

Four layered dashboard instruments (tachometer, speedometer, boost gauge, EV power meter) whose needles ease to the values you pass.

What it is for

Vehicle or device status panels, diagnostics dashboards, telemetry heroes (fills its parent; pass `values`).

Use it

1 · site.json
"effects": { "components": ["performance-gauges"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components performance-gauges
2 · import it
import { PerformanceGauges } from '@/components/fx/ui';

Files

  • components/fx/ui/PerformanceGauges.tsx
  • components/fx/ui/_tu-css-gauge.tsx
  • components/fx/ui/_tu-css-gauges.ts
  • components/fx/ui/_t2.ts
  • ui-performance-gauges.css styles

Source

Original to Sitewright. MIT licensed.

Credits and licences: third-party notices.

Accessibility

  • Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
  • Reduced motion. With prefers-reduced-motion on, animation settles to its finished state at once.
  • Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.