∞ forever components

Micro Data-Viz

Bar Grow + Reshuffle

Seven rounded gradient bars ease to new random heights every 1.6s with glowing cap dots. Click triggers an immediate reshuffle.

canvaslight 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 hero widgets, loading states, or anywhere a live metric feel is needed without real data.

When not to

Contexts requiring real data binding or axis labels — bars are decorative with no data semantics or accessible labels.

Working with an AI agent

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

Change bar count to 10, update pal array with blues/purples, slow reshuffle interval from 1600 to 2500ms. 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

  • bar count (N=7)
  • color palette (pal array)
  • reshuffle interval (acc>1600)
  • easing speed (b.cur += ... * 0.08)
  • bar width ratio (slot*0.62)
  • cap area padding (W*0.1)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing
  • visibilitychange pause + last reset
  • prefers-reduced-motion guard (b.cur=b.tgt snap)
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No axis labels or values — purely decorative, not accessible as a real chart
  • Background hardcoded to #0e1726 in CSS

bar-chartdata-vizcanvasgradientloopreshuffleanimated-chart

More Micro Data-Viz components

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