∞ forever components

Op Art & Moire

Line Illusion

64 horizontal lines kink at a center crease with differential shading, creating a breathing 3D fold illusion of two angled sheets.

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 hero backgrounds, geometric/architectural themes, or anywhere a calm optical illusion adds depth without distracting from content.

When not to

Light backgrounds (hardcoded dark fill). Contexts needing text legibility over the animation, or where any motion is unwanted.

Working with an AI agent

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

Change line count to 80 by setting LINES=80, slow the breathing to t*0.3, and tint lines amber by replacing rgba(255,255,255,…) with rgba(255,200,80,…). 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

  • line count (LINES=64)
  • breathe speed (t*0.55)
  • fold depth (H*0.085)
  • traveling wave speed (t*0.7)
  • line color (rgba 255,255,255)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing
  • visibilitychange pause
  • reduced-motion static fallback (draw(0) + return)
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded (#0a0a0a) in both CSS and fillStyle — must edit both to change
  • No pointer interactivity — purely passive

op-artlinescanvas3d-illusionfoldambientgeometric

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.
  • Spiral VertigoTwo counter-rotating Archimedean spirals at near-equal pitch create shifting moire fringes and illusory depth pull on a dark background.