∞ forever components

Art Nouveau

Ribbon Script

Gold S-curve ribbon banner with italic serif title sways gently through floral vines via SMIL transforms on a dark background.

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 or section divider for art nouveau, luxury, or editorial themes. Ambient looping display with no interaction required.

When not to

UIs needing legible body text nearby — the motion and dark background dominate. Contexts where SMIL browser support is uncertain.

Working with an AI agent

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

Change the ribbon text to 'Belle Époque', set --an10-gold to #d4af37, and slow the ribbon sway from 11s to 18s. 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

  • title text (text element content)
  • ribbon sway duration (11s)
  • rotation range (-0.8 / 1.0 degrees)
  • gold color (--an10-gold, linearGradient stops)
  • vine dash drift speed (6s)
  • corner floret rotation period (17s)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion early-return guard
  • visibilitychange pause/unpause via svg.pauseAnimations()
  • SMIL additive=sum on all animateTransform
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • SMIL animations not supported in IE; acceptable for modern browsers only
  • Text position is absolute, not path-following — ribbon shape changes require manual text repositioning
  • Google Fonts (Cormorant Garamond) required for intended look; falls back to Georgia

art-nouveauribbonbannergoldfloralsmiltypography

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…