∞ forever components

Micro Data-Viz

Contour Breathing

11 teal contour lines trace a living topographic map of 5 drifting gaussian hills; lines pulse and breathe as hills orbit and a ripple wave shifts the field.

canvasheavy 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

Dark-mode hero backgrounds, data-art installations, ambient screensavers with a scientific or terrain aesthetic.

When not to

Light-background UIs (background hardcoded dark navy #101820). Contexts needing legible text overlays — contour lines fill the entire canvas.

Working with an AI agent

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

Change contour color from teal to amber by replacing 'rgba(127,224,212,' with 'rgba(255,180,60,', increase hill count from 5 to 7, and slow the animation by changing t+=0.0125 to t+=0.007. 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

  • hill count (loop to 5)
  • animation speed (t += 0.0125)
  • contour line count (LINES=11)
  • contour color (rgba(127,224,212,...))
  • pointer boost strength (pBoost+0.5 / +1.2)
  • breathing ripple amplitude (0.12)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • Marching-squares loop runs over entire GW*GH grid each frame — heavy on large viewports or high-DPR screens
  • Background color hardcoded in CSS (#101820) — must change in both CSS and ctx.fillStyle
  • No aria semantics — purely decorative canvas

contourtopographicmarching-squarescanvasgenerativeambientdata-viz

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.