∞ forever components

Memphis 80s

Grid Jumble

5x5 grid of Memphis shapes — circles, triangles, squiggles, zigzags — jittering in sine-wave phases over a terrazzo-speckled dark background.

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

Memphis or retro 80s themed hero backgrounds, pattern tiles, or ambient motion displays that need visual density without user interaction.

When not to

Contexts requiring text legibility over the canvas. Low-end devices running many simultaneous canvas tiles.

Working with an AI agent

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

Change COLS and ROWS to 7 for a denser grid, swap PAL accent to '#ff00cc' for neon magenta, and slow wobble by reducing spd range from 0.6+rnd()*1.3 to 0.3+rnd()*0.7. 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 dimensions (COLS=5, ROWS=5)
  • palette colors (PAL array)
  • wobble speed range (0.6+rnd()*1.3)
  • jitter amplitude (amp: 0.06+rnd()*0.12)
  • shape scale range (sc0: 0.62+rnd()*0.18)
  • terrazzo speckle count (SP=46)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • Shape variety fixed at 7 types — adding new shapes requires extending the shape() if-else chain
  • Terrazzo speckle layout tied to seeded RNG (seed=1337) — change seed for a different arrangement
  • Background color hardcoded in both CSS and JS (BG='#141019') — must update both to change it

memphisgridgeometricshapesjitter80scanvas

More Memphis 80s components

  • Squiggle ParadeSix bold sine-wave ribbons with marching color beads drift across a confetti field of dots, zigzags, crosses, and terrazzo flecks on deep indigo.
  • Terrazzo Scatter96 colored terrazzo chips breathe apart from a tilted slab card and resettle in a 5.2s looping cycle, using a Memphis 80s palette on dark umber.
  • Zigzag Bounce7 stacked chevron bars in clashing Memphis colors spring upward with a staggered ripple phase; confetti speckles and squiggle accents frame the scene.
  • Confetti PopMemphis geometric shapes burst upward with gravity and rotation in repeating pops on deep plum. Dots, zigzags, triangles, bars, and pluses auto-cycle.
  • Polka ShuffleBrick-offset grid of dots, rings, and squares sways and breathes while colors cross-fade between three clashing Memphis 80s palettes on dark charcoal.
  • Noodle LoopFive thick snaking SVG noodles in Memphis colors travel via stroke-dashoffset on a dark violet field; corner dots pulse and confetti spins.