Cloth Wave Grid

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)
• demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

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
• State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

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. Initial automatic launches stop after first input; canvas clicks…
• Confetti CannonOchre festival-paper palette: broad confetti rectangles fire from bottom corners, tumble and flip. First input stops automatic launches; a manual 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; initial figure-eight attract motion stops after first input; manual chain…
• 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.