∞ forever components

Primary Grid Compositions

Self-Painting Cells

A fixed asymmetric neoplastic grid whose cells autonomously cycle through red, blue, and yellow with smooth CSS transitions, like an unattended painter at work.

csslight complexitysubtle 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

Art-inspired hero backgrounds, creative portfolio pieces, ambient loop displays with bold primary color palettes.

When not to

Contexts requiring legible text overlays — bold color shifts compete with content. Low-stimulation environments where color change would distract.

Working with an AI agent

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

Change the beat interval from 650ms to 1200ms for a slower pace, and add green (#2e7d32) as a fourth color in the CYCLE array. 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

  • beat interval (acc>=650)
  • color palette (C object: red, blue, yellow)
  • CYCLE array order
  • CSS transition duration (.55s)
  • grid column breakpoints (V array)
  • grid row breakpoints (Hh array)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard with static fallback
  • visibilitychange pause/resume
  • drawLines() called after cells (keeps lines on top)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Grid proportions are hardcoded in V and Hh arrays — not responsive to viewport ratio
  • Random cell selection means composition balance is probabilistic, not guaranteed

gridgenerativecolor-cyclegeometricloopambient

More Primary Grid Compositions components

  • The Rebalancing Gridneoplastic grid of black lines slides to new layouts while red, blue, and yellow cells fade in, resolving into a balanced composition every few seconds.
  • Broadway Boogie WoogieColored squares pulse along yellow grid avenues like NYC traffic; intersection dots blink in red, blue, and yellow referencing neoplastic's 1943 painting.
  • Self-Assembling Compositionneoplastic grid builds itself every 4 s: cells scale in staggered, black lines draw outward, primary colors fill random regions, then recomposes anew.
  • Trading WeightRed and blue blocks trade mass across a fixed axis; a yellow counterweight keeps the neoplastic grid balanced. Slow eased transitions reseed randomly.
  • Victory Boogie MarqueeA 9x9 neoplastic grid rotated 45° as a diamond; red, blue, and yellow squares ripple diagonally in a boogie-woogie march via time-stepped index.
  • Equilibrium Engineneoplastic grid with spring-driven lines; primary color blocks recolor every 2s; a center-of-mass dot tracks the weighted area of colored cells.