∞ forever components

Generative Geometry

Moiré Interference

Three drifting concentric ring sets in cyan, pink, and green blend additively to create shifting moiré patterns. Pointer steers one ring center.

canvasmedium complexitymoderate motionpointer

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-mode hero backgrounds, generative art displays, ambient panels where optical interference adds visual depth.

When not to

Light backgrounds (hardcoded dark navy). Users sensitive to repetitive optical interference patterns or motion.

Working with an AI agent

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

Change the cyan rings color to gold ('rgba(255,200,50,0.35)') and increase ring spacing from 10 to 14 for a more open pattern. 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

  • ring spacing (r+=10 in rings loop)
  • ring colors (rgba values in draw())
  • separation scale (0.16 multiplier)
  • wobble speed (t*0.0006)
  • pointer lerp speed (0.05 factor)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • No reduced-motion animation fallback — shows a single static frame only
  • Background color hardcoded in both CSS and canvas fill — edit both to change
  • Ring wobble uses raw ms timestamp — speed tweaks are non-linear

moireinterferenceringsgenerativecanvasadditive-blendambient

More Generative Geometry components

  • Voronoi Shatter14 drifting sites partition the canvas into cool-blue Voronoi mosaic cells; moving the pointer nudges the nearest site toward the cursor.
  • Auto-MazeDepth-first maze carves itself wall by wall on a dark grid with shifting hue; a bright dot marks the active cell. Resets with a new color on completion.
  • Truchet Tiles8x8 grid of rainbow quarter-arc Truchet tiles that flip orientation in slow sine waves, weaving shifting interlocked curves across a dark background.
  • SpirographA hypotrochoid spirograph traced progressively on canvas with a shifting hue; each cycle completes then resets with new random radii and color.
  • L-System PlantAn L-system fractal plant grows branch by branch from the canvas bottom, swaying gently; clicking triggers a wobble and regrows a randomized plant.
  • Rotating Mandala12-fold mandala of 5 nested polygon rings that counter-spin, breathe in scale, and cycle through lilac-gold hues. Tap adds a spin impulse.