∞ forever components

Micro Data-Viz

Slope Chart Crossing

Nine labeled lines connect BEFORE and AFTER rank axes, animating crossings each loop as series shuffle to new positions in warm amber tones.

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

Visualizing ranked list changes over time — A/B test results, survey rank shifts, league table movements.

When not to

More than 9 series (labels will collide). Light backgrounds — color palette is hardcoded dark brown.

Working with an AI agent

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

Change N to 6, update NAMES to "ABCDEF", and set loopDur to 120 to make a faster 6-series chart. 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

  • series count (N=9)
  • loop duration (loopDur=170)
  • hold pause frames (hold=46)
  • color palette (col() hue/sat/light offsets)
  • label names (NAMES string)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • Background color hardcoded (#1a1410) — must edit CSS to change dark theme
  • Pointer nudge only speeds up animation, no interactive selection of lines
  • Label collision possible if N exceeds 9 at small canvas heights

slope-chartrankingdata-vizcanvasanimationamberbefore-after

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.