∞ forever components

Art Nouveau

Mosaic Halo

84 stained-glass trapezoid cells in gold, green, and rose shimmer via staggered sine-wave opacity; a floral medallion and vine flourishes anchor the center.

svgmedium complexitysubtle motionmobile-ready

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 →
1

When to use it

Decorative hero backgrounds, ornamental loading screens, or Art Nouveau themed UI sections needing ambient looping motion.

When not to

Contexts requiring legible text overlay. Light backgrounds — dark navy is hardcoded. Low-contrast branding palettes.

Working with an AI agent

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

Change the palette to cool blues by replacing PAL with ["#4a6fa5","#6a8fc8","#4a7a8a","#3a5f7a","#7a5a9a","#9a7ab0","#5a6a8a","#a0b8d8"] and update the background to #0a0c14. 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

  • color palette (PAL array, 8 colors)
  • ring radii and segment counts (ring() r0, r1, n args)
  • shimmer speed range (spd[i] = 0.6 + ... formula)
  • petal count (loop p<6, rotate p*60)
  • vine count and offset (loop v<8, a offset 0.2)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (reduce + drawFrame(1.2) early return)
  • visibilitychange stop/go handlers
  • Float32Array phase/spd pre-allocation
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color is hardcoded in both CSS (#0e1310) and SVG rect — must change both
  • Vine flourishes are static with no animation
  • 84 setAttribute calls per frame may stutter on very low-end devices

art-nouveaumosaicstained-glassradialshimmerambientdecorative

More Art Nouveau components

  • Vine GrowAn Art Nouveau whiplash vine draws itself upward via stroke-dashoffset; four leaves bloom and three gold buds pop along the S-curves on a dark green…
  • Stained Glass7 organic petal and leaf cells light up in sequence with glowing halos against dark glass, then fade and reblooom. CSS transitions on SVG paths.
  • Whiplash LineFive Catmull-Rom S-curve ribbons in gold, sage, and rose breathe with sinusoidal wobble; five-petal rosette nodes pulse along the curves.
  • Floral BloomRose and gold petals unfold in sequence around a glowing core; corner whiplash vines draw in. The whole bloom sways gently on a loop.
  • Peacock CurlFive peacock-feather plumes unfurl from a central fan, swaying gently in gold and green whiplash lines with jewel-toned iridescent eyes at each tip.
  • Arch TendrilsSeven symmetric whiplash tendrils with curled buds, leaves, and a crown rosette sway gently in a slow sine-wave rotation over a dark stained-glass arch…