∞ forever components

Art Nouveau Ornamental Panels

The Halo

Three nested SVG rings of gilded beads and teardrops rotate on slow opposing axes around a breathing gold rosette, evoking Art Nouveau's decorative halos.

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

Art-nouveau themed hero sections, cultural/museum contexts, ambient decorative backgrounds needing elegant slow motion.

When not to

Dark backgrounds (palette hardcoded for warm cream). Contexts needing interactivity or content overlaid in the center.

Working with an AI agent

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

Change PAL.gold to '#d4af37' for brighter gilt, slow the outer ring to 80s duration, increase bead count on outer ring from 24 to 32. 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 object)
  • ring bead counts (n: 24/16/12)
  • rotation durations (dur: 54/40/30 → --muc01-dur)
  • rosette petal count (loop i<8)
  • core breathe scale (1.05 in keyframe)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • reduced-motion guard (muc01-still class + media query)
  • visibilitychange pause (muc01-paused class)
  • IIFE wrapper
  • role=img + aria-label on stage div
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded to warm cream (#f4ecd8) — must edit CSS to change

ornamentalhaloringsfiligreeart-nouveauambient

More Art Nouveau Ornamental Panels components

  • Whiplash VinesSinuous sage and teal tendrils grow and curl on parchment; each vine ends in a rose or gold bezier-petal bloom, fades, and the cycle restarts.
  • Border WeaverMirrored Art Nouveau bands draw themselves stroke by stroke — gold sine scrolls, sage waves, rose petals, and teal beads trace across parchment then reset.
  • Floral Mandala12 mirrored sectors of sage stems, leaves, and gold-cored petaled flowers breathe and slowly rotate around a central rosette on a dark warm ground.
  • The Four Seasons ArcRotating floral halo cross-fades through four seasonal colourways — spring sage, summer rose, autumn gold, winter teal — each with distinct petal count.
  • Stained RibbonThree layered ribbons in teal, sage, and peach undulate across a dark ground in a stacked sine-wave motion, edged in gold with glinting enamel bead accents.
  • Mosaic TendrilsColored beads bloom and connect with gradient lines, branching into tendrils that slowly replace oldest nodes. Art Nouveau palette: gold, sage, rose,…