∞ forever components

Micro Data-Viz

Chord Rebalance

Six warm-ochre nodes on a ring with ribbon flows that continuously lerp toward random targets, making arc spans and chord widths breathe in organic cycles.

canvasmedium complexitymoderate motionpointer

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

Data dashboards, network flow visualizations, ambient background for analytics UIs, portfolio showcases needing organic motion.

When not to

Contexts requiring legible data labels or precise values — flow weights are randomized and not tied to real data by default.

Working with an AI agent

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

Change node count to 8 by setting N=8 and extending HUE array with two more hue values, or swap palette to cool blues by changing HUE to [200,210,220,195,215,205]. 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

  • node count (N=6)
  • hue palette (HUE array)
  • retarget interval (retarget>150)
  • lerp speed (k=0.045)
  • ring radius scale (R=Math.min*0.34)
  • ribbon thickness (rib=Math.min*0.052)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing
  • visibilitychange pause/start guards
  • prefers-reduced-motion static fallback
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Node labels are hardcoded A-F via charCode; adding nodes requires extending HUE array
  • Flow weights are purely random — not wired to real data without replacing rnd() targets
  • Click triggers new targets but has no separate visual confirmation beyond chord motion

chord-diagramdata-vizcanvasanimationgenerativeambientnetwork

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