∞ forever components

Art Nouveau

Arch Tendrils

Seven 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 ground.

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

Ambient hero backgrounds for botanical, art-nouveau, or luxury themes. Dark-mode decorative panels or loading screens.

When not to

Light backgrounds (hardcoded dark green). Contexts requiring interactivity or legible text overlaid on the animation.

Working with an AI agent

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

Change the palette array to warm rose tones (e.g. ["#e07a8a","#c94f6a","#f2b8c2","#e8a0b0"]), increase sway amplitude by setting amp to (4+r.s*4) in the T.push call. 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

  • palette array (4 accent colors)
  • sway amplitude (amp: 2.6+r.s*2.4)
  • sway speed per tendril (sp: 0.55+r.s*0.35)
  • root x positions (roots array)
  • vine stroke gradient (an06-stem stops)
  • background radial gradient (an06-glow stops)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (reduce check + frame(0.6) static fallback)
  • visibilitychange pause/resume handler
  • transformOrigin set per-element in JS (critical for correct sway pivot)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded as dark green — requires CSS and gradient edits to change theme
  • Tendril shape parameters are tightly coupled to root positions; rebalancing symmetry requires coordinated edits to roots array and path math

art-nouveaubotanicaltendrilssvgambientfloralloop

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.
  • Lily PondStylised lilies with radial petals and kidney pads drift over expanding gold ripple rings on a deep green pond, framed by whiplash vine corners.