∞ forever components

Memphis 80s

Pattern Clash

Three Memphis pattern bands — dots, zigzags, squiggles, triangles, rings — scroll in opposing directions at different speeds, split by crisp accent seams.

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 80s retro themed hero backgrounds, pattern showcases, decorative section dividers with high visual energy.

When not to

Content-heavy layouts where text must be legible over the background. Low-end mobile where continuous canvas redraws may stutter.

Working with an AI agent

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

Change the top band accent color from '#D345A4' to '#00ff99', slow the top scroll speed from 78 to 48, and increase cell size divisor from 6.2 to 5 for larger motifs. 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

  • Memphis color palette (PAL array)
  • scroll speeds per band (oTop/oMid/oBot multipliers)
  • cell size divisor (W/6.2)
  • motif kind assignments per band (kindA/kindB args)
  • seam accent colors (#D345A4 / #ff4d80)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • No interactivity — purely passive; adding pointer response requires significant rework
  • Cell size is viewport-width-relative so very wide screens may show oversized motifs
  • Background color hardcoded in both CSS and JS BG variable — must update both

memphispatternscrollingcanvasgeometricretro80stiled

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.
  • Grid Jumble5x5 grid of Memphis shapes — circles, triangles, squiggles, zigzags — jittering in sine-wave phases over a terrazzo-speckled dark background.