∞ forever components

Generative Geometry

Wang Tiles

Aperiodic Wang-tile mosaic of four-wedge tiles that domino-flip in a diagonal cascade with matched-seam glow on warm earth tones.

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

Generative art backgrounds, loading screens, or any context needing mathematically structured infinite pattern variety.

When not to

Layouts requiring legible text overlays or low-end devices where per-frame grid iteration may drop frames.

Working with an AI agent

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

Change PAL to cool blues and greens (e.g. ['#D8B297','#5B8FA8','#AFBCA9','#10b981']), increase tile size by setting S=Math.max(48, Math.round(m/5)), and slow the cascade by changing t+=0.012. 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

  • edge color palette (PAL array, 4 colors)
  • tile size floor (Math.max(34, ...))
  • cascade speed (t += 0.022)
  • pointer nudge strength (nudge+0.4)
  • seam glow fade duration (1.0 offset)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • Wang tile constraint logic (findTile top/left matching)
  • IIFE wrapper
  • prefers-reduced-motion guard + static fallback
  • visibilitychange pause/resume
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in both CSS and canvas fillRect — must change both to retheme
  • Auto-regenerates on click (cycle=999) which may feel abrupt
  • Seam glow skipped entirely under reduced-motion

wang-tilesgenerativemosaiccascadeaperiodicgeometrycanvas

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.