∞ forever components

Micro Data-Viz

Ridgeline Morph

14 stacked rust-toned density curves continuously morph between bimodal and unimodal distributions with glowing crests; pointer Y position amplifies nearby ridges.

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 dashboard hero backgrounds, statistical visualization demos, ambient displays with an analytical aesthetic.

When not to

Contexts needing real data — distributions are synthetic. Light backgrounds (hardcoded dark background).

Working with an AI agent

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

Change ROWS to 10, set accent color AC to '#80cbc4' (teal), and slow the morph cycle by changing t+=0.006 to t+=0.003. 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

  • row count (ROWS=14)
  • morph speed (t += 0.006)
  • accent color (AC='#AE6147')
  • ridge height multiplier (ridge=gap*3.1)
  • sample resolution (SAMP=120)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • Background color hardcoded in CSS and canvas fill — must change both to alter theme
  • No reduced-motion animation fallback beyond a single static frame
  • Pointer nudge decays but never fully resets until next pointer event

ridgelinedata-vizcanvasgaussianmorphdensityambient

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.