∞ forever components

Art Nouveau Ornamental Panels

The Decorative Panel

Arched Art Nouveau panel on canvas: gold frame breathes open, rotating petal rings and a rayed halo glow at center, garland of flowers sways along the base.

canvasmedium 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

Art nouveau hero backgrounds, luxury brand contexts, museum or gallery interfaces needing ornate ambient motion.

When not to

Light backgrounds (hardcoded dark brown). Contexts needing legible text overlays — centered composition fills the viewport.

Working with an AI agent

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

Change PAL.peach to '#879CA1', PAL.rose to '#5F8FA3', PAL.gold to '#C9A227', and slow breathing by changing t*0.5 to t*0.25. 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 — cream, sage, peach, gold, rose)
  • breathing speed (t*0.5 in breath calculation)
  • panel width ratio (W*0.7, 520 cap)
  • halo ray count (rays=24)
  • garland flower count (gN=7)
  • petal ring rotation speed (t*0.2, -t*0.3)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (REDUCED flag)
  • visibilitychange stop/start loop
  • DPR-aware fitCanvas with setTransform
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS and canvas gradient — must change both to recolor
  • Panel frame width clamps at 520px so very wide viewports show empty side margins

art-nouveaudecorativecanvasfloralornamentalambient

More Art Nouveau Ornamental Panels components

  • The HaloThree nested SVG rings of gilded beads and teardrops rotate on slow opposing axes around a breathing gold rosette, evoking Art Nouveau's decorative halos.
  • 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.