∞ forever components

Op Art & Moire

Interference

Three slowly rotating radial ray bursts overlap additively on black, generating shimmering moire interference patterns with a soft central bloom.

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

Dark ambient backgrounds, generative art displays, op-art or psychedelic themed hero sections.

When not to

Light backgrounds (hardcoded dark), contexts requiring legible text overlay, or low-end devices sensitive to rAF loops.

Working with an AI agent

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

Change SRC[0].rays to 120 and SRC[1].rays to 120 to increase interference density, then set all stroke opacity to 0.15 for stronger contrast. 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

  • ray count per source (SRC[k].rays, 64–88)
  • spin speed per source (SRC[k].spin, 0.007–0.013)
  • warp amount (SRC[k].wob, 0.07–0.10)
  • stroke opacity (rgba alpha in ctx.strokeStyle)
  • bloom radius (DIAG*0.20)
  • source positions (SRC[k].x / SRC[k].y)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • globalCompositeOperation='lighter' (creates additive interference)
  • IIFE wrapper
  • visibilitychange pause
  • reduced-motion static fallback (drawOneFrame)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background hardcoded to #0a0a0a — must edit CSS and fillStyle to change
  • No pointer/touch interactivity — purely passive
  • Ray count is fixed; very high values may drop frame rate on low-end devices

op-artmoireradialinterferencecanvasgenerativeambient

More Op Art & Moire components

  • Moire DriftTwo concentric ring grids drift apart with opposed phase, producing slow-shifting moire interference fringes via canvas lighter/difference compositing.
  • Bulge GridA 22x22 white line grid on black warps radially outward as an invisible lens drifts on a slow lissajous path; a faint offset twin grid creates moire shimmer.
  • Concentric Pulse26 white rings march outward from center in a ~6s loop; a second scaled field produces slow moire interference fringes on a dark background.
  • Wave ColumnsVertical B&W stripe columns undulate via detuned sine waves, creating a woven fabric ripple with a central bulge illusion and moire interference.
  • Checker WarpA black-and-white checkerboard bends around a breathing lens at the center, slowly rotating and drifting for a hypnotic op-art illusion.
  • Line Illusion64 horizontal lines kink at a center crease with differential shading, creating a breathing 3D fold illusion of two angled sheets.