∞ 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 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

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…