∞ forever components

Gold-Leaf Ornamental Studies

Mosaic Shimmer

A 14x10 grid of gold tesserae pulses in diagonal sine-wave shimmer; sparse jewel-toned accents pop against the gold, evoking Byzantine mosaic.

cssmedium 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

Luxury or art-themed hero backgrounds, gold-leaf/Art Nouveau design contexts, ambient looping screensavers with a gold palette.

When not to

Light backgrounds (hardcoded dark body). Contexts requiring legible text overlays — the constant tile scaling competes with content.

Working with an AI agent

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

Change grid to 18 columns and 12 rows by setting COLS=18 and ROWS=12, then shift accent colors to deep violet (#4b1fa0) and teal (#0d6b6b). 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 dimensions (COLS=14, ROWS=10)
  • accent colors (accents array)
  • wave speed (t*1.6 and t*0.9)
  • scale on highlight (scale(1.06))
  • accent tile probability (0.12)
  • opacity range (0.22 + 0.6 * ...)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard with static fallback
  • visibilitychange pause/resume
  • role=img + aria-label on stage
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS (#0a0805) — must edit to change from near-black
  • Scale transform on individual DOM cells may cause jank at large grid sizes on low-end devices

mosaicgoldgridshimmerambientbyzantine

More Gold-Leaf Ornamental Studies components

  • The Golden TreeRecursive gold fractal tree grows and breathes via a pulsing sine wave, with spiral coil tips and drifting gold flecks against a near-black background.
  • Spiral Ornament EngineGold spirals, all-seeing eyes, and gilded triangles fade in and out against a near-black background, slowly rotating as they drift through their lifespan.
  • Gilded HaloConcentric gold rings bloom and fade from click/pointer points while gold-leaf flecks scatter with gravity; auto-strikes keep it alive passively.
  • The Pattern LoomThree gold friezes of gold-leaf symbols (circles, spirals, triangles, eyes) scroll in alternating directions at staggered speeds, endlessly re-weaving.
  • Falling GoldDiamond-shaped gold flakes drift and sway downward against a near-black background, each shimmering in opacity as they tumble and rotate.
  • Byzantine CounterpointTwo SVG columns of spirals, eyes, and triangles in gold and malachite cycle motifs and counter-rotate every 900ms in phase-shifted counterpoint.