∞ forever components

Micro Data-Viz

Radial Gauge Needle

Semicircular gauge on dark amber background with green-yellow-red arc segments; a glowing white needle sweeps smoothly via sine wave with a live 0–100 readout.

canvasmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dashboard widgets, metric displays, loading/progress indicators with a data-viz aesthetic.

When not to

Real-time data inputs — needle auto-cycles via sine wave; wire to actual data and remove the phase loop before production use.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the accent glow color from #ffb347 to #00eaff, narrow the red zone to start at 0.9 instead of 0.8, and slow the sweep by changing phase += 0.02 to phase += 0.01. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • arc segment thresholds (segs array: 0.5, 0.8, 1.0)
  • needle glow color (shadowColor '#ffb347')
  • sweep speed (phase += 0.02)
  • gauge radius (Math.min(W,H)*0.36)
  • segment colors ('#3ee08f', '#ffd24d', '#ff5d5d')
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing (cv.width = W*DPR)
  • visibilitychange pause guard
  • prefers-reduced-motion branch (cur = tgt static)
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Needle auto-cycles via sine wave — must replace phase/tgt logic to bind real data
  • Background color hardcoded in CSS (#1a1410) — must edit to change dark amber base

gaugecanvasdata-vizneedleradialambientmonospace

More Micro Data-Viz components

  • Bar Grow + ReshuffleSeven rounded gradient bars ease to new random heights every 1.6s with glowing cap dots. Click triggers an immediate reshuffle.
  • Live Line SweepA glowing cyan area line chart scrolls a live sine-plus-noise time-series across a faint grid, with a white head dot marking the latest value.
  • Donut Ring ProgressOlive-to-terracotta gradient donut ring eases its fill to random targets with a leading dot and large centered percentage readout. Tap to jump to a new value.
  • Sparkline Moving DotA green sparkline traces itself across a faint ghost path, led by a haloed white dot; on completion it regenerates a new random 28-point series.
  • Heatmap Ripple12x6 grid of rounded cells colored via a magma ramp, with a sine-wave ripple emanating from a point that orbits and follows the cursor.
  • Odometer Count-UpSix-digit mechanical odometer with rolling digit reels easing toward a random REQUESTS/SEC target; tap/click to randomize a new target value.