∞ forever components

Op Art & Moire

Scintillating Grid

Grey lattice on black with white disks at intersections that slowly twinkle via dual-sine phases, evoking the classic scintillating-grid optical illusion.

canvasmedium 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

Dark-mode ambient backgrounds, science/perception-themed UIs, screensaver-style loops where subtle motion is desired.

When not to

Light backgrounds (hardcoded dark theme). Contexts where illusory flicker could distress users with visual sensitivities.

Working with an AI agent

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

Change disk color to soft gold by replacing 'rgba(255,255,255,'+a...')' with 'rgba(255,215,100,'+a+')', increase gap divisor from 8.5 to 6 for a looser grid. 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 spacing (gap = Math.round(m/8.5))
  • disk radius multiplier (gap*0.18)
  • bar thickness (gap*0.085)
  • shimmer speed (t*0.9 and t*0.37)
  • disk brightness range (0.30 + 0.62*v*v)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Illusion effect may be uncomfortable for viewers with certain visual sensitivities

op-artgridillusioncanvasscintillatingambientgenerative

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.