∞ forever components

Art Nouveau Ornamental Panels

Whiplash Vines

Sinuous 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.

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, editorial pages, or decorative ambient loops where organic growth motion fits the brand.

When not to

Content-heavy layouts where moving vines compete with text, or low-end devices where continuous canvas redraws are costly.

Working with an AI agent

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

Change vine palette to burgundy and forest green by setting PAL.sage to '#6b2d3e' and PAL.teal to '#2d5a27', and raise the vine cap from 5 to 7. 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

  • vine color palette (PAL object)
  • max concurrent vines (vines.length < 5)
  • vine growth speed (dt*30 segments/s) and spawn interval (acc>1.2 s)
  • vine step (S.w/70 × 1–1.6 px: scales with the canvas) and mount pre-roll (initial vines at 10/18/26 segments)
  • curl intensity (0.5 + Math.random()*0.7)
  • bloom petal count (5 + random*3)
  • bloom size range (6 + random*8)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

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

Known limitations

  • Background color hardcoded in both CSS and canvas fillRect — must change both to recolor
  • No pointer interactivity — vines spawn on a timer only

art-nouveauvinesgenerativecanvasbloomambient

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.
  • 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,…