∞ forever components

Charts & Flow

Streamgraph

Six translucent stacked bands breathe around a central baseline via layered sines; a sweeping readout line tracks across with colored tick dots per band.

canvasmedium complexitymoderate motion

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 sections, data visualization backgrounds, ambient charts illustrating trends without real data.

When not to

Contexts requiring real data binding or accurate axis labels — values are synthetic sine waves only.

Working with an AI agent

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

Change COL to warm sunset tones, increase N to 8 bands, slow the sweep by changing tt*0.13 to tt*0.07. 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

  • band colors (COL array)
  • band count (N=6)
  • column resolution (M=46)
  • breathing rates (FRQ array)
  • sweep speed (tt*0.13)
  • wiggle amplitude (gh*0.045)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • preallocated Float32Array buffers (no per-frame allocation)
  • IIFE wrapper
  • visibilitychange pause/resume
  • prefers-reduced-motion static fallback
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Data is synthetic sine waves only — no real data binding
  • Sweep line disabled under prefers-reduced-motion
  • Background color hardcoded in --ch05-bg CSS variable

streamgraphdata-vizcanvasstacked-areagenerativeflowchart

More Charts & Flow components

  • Sankey FlowThree-stage Sankey diagram on dark canvas: bezier ribbons grow stage-by-stage from origins to hubs to outcomes, pulsing softly in opacity to show flow volume.
  • Chord DiagramEight ring nodes with curved ribbons that swell and shrink as weights rebalance every ~3s. Additive blending creates glowing color overlaps.
  • Treemap7 rounded cells partition the canvas via slice-dice treemap; cells lerp to new sizes every 2.6 s as synthetic values drift, with a subtle alpha pulse.
  • CandlesticksGreen and red OHLC candles stream in from the right with smooth slide animation; newest candle grows from pivot. Dashed last-price marker traces horizontally.
  • Sparkline GridNine teal sparklines in a 3x3 grid scroll leftward every 140ms; orange/blue diamonds mark running max/min and a halo dot tracks the latest value.
  • Bubble Pack64 mint/teal/amber/coral circles settle under gravity with collision physics; size encodes value. Large bubbles pull toward center with a breathing pulse.