∞ forever components

Micro Data-Viz

Sparkline Moving Dot

A 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.

canvasmedium complexitymoderate motionclick

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 cards, ambient data displays needing lightweight motion without real data.

When not to

Contexts requiring real data binding — series is randomly generated; also avoid when motion competes with dense UI.

Working with an AI agent

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

Change accent color from #3ee08f to #38bdf8, increase point count from N=28 to N=40, and slow the trace cycle from 4200ms to 6000ms. 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

  • accent color (COL='#3ee08f')
  • point count (N=28)
  • trace cycle duration (dt/4200)
  • vertical padding range (top H*0.22, bot H*0.78)
  • dot radius (arc r=4) and halo radius (arc r=7)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (reduce flag)
  • visibilitychange pause pattern
  • DPR-aware canvas sizing
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Data is randomly generated — no API or real data binding
  • Background color is hardcoded in CSS (#0c1512); must edit to change theme

sparklinedata-vizcanvasline-chartambientgenerativeloop

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.
  • Radial Gauge NeedleSemicircular 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…
  • 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.