∞ forever components

Particles & Physics

Cloth Wave Grid

An 11x11 wireframe grid ripples like cloth via sine/cosine waves in cyan-to-violet hues; mesh nodes bulge away from the cursor on hover.

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

Dark-mode hero backgrounds, generative-art sections, tech/data-viz aesthetic headers needing ambient motion with subtle interactivity.

When not to

Light backgrounds (hardcoded dark body), layouts needing legible text overlays, or contexts sensitive to continuous canvas redraws on low-end devices.

Working with an AI agent

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

Change grid density to 16x16 by setting COLS=16 and ROWS=16, increase the pointer repulsion radius from 60 to 90, and shift the hue base from 190 to 260 for a purple-to-magenta palette. 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

  • grid density (COLS=10, ROWS=10)
  • wave amplitude (6 in sine/cosine terms)
  • pointer repulsion radius (60) and force (16)
  • hue base and spread (190+c*7+r*3)
  • animation speed (t += 0.03)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing
  • visibilitychange pause/play guards
  • pointerleave reset (pointer.x=-999)
  • IIFE-equivalent scoped const/let block
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No prefers-reduced-motion fallback — reduced flag is read but step() still runs full animation on first frame only; loop does not stop
  • Background color hardcoded in CSS (#071018) — must edit HTML to change
  • No aria semantics on canvas

canvasmeshclothwireframegridphysicspointer

More Particles & Physics components

  • Gravity Dot RainMulticolored dots fall under gravity with motion trails, bounce off the floor, and scatter away from the cursor on a dark navy canvas.
  • Firework BurstColorful glowing sparks burst radially, fall under gravity, and fade against a dark sky. Auto-launches bursts; click anywhere to add more.
  • Confetti CannonColored rectangles fire from bottom corners in auto-cycling bursts, tumbling with gravity and flip animation. Click anywhere to trigger a cursor burst.
  • Bouncing Balls7–14 glossy pastel balls bounce off walls and collide with elastic physics; cursor repels balls within a 70px radius.
  • Spring ChainA 16-node spring chain whips and follows the cursor in a lime-to-gold gradient; drifts in a figure-eight pattern when idle.
  • Metaball Fluid7 hot-pink blobs drift and merge via a high-contrast canvas threshold; cursor adds an attracting blob that pulls them toward the pointer.