∞ forever components

Art Nouveau

Stained Glass

7 organic petal and leaf cells light up in sequence with glowing halos against dark glass, then fade and reblooom. CSS transitions on SVG paths.

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

Dark-mode hero backgrounds, decorative panels, art or luxury brand aesthetic, ambient looping display.

When not to

Light backgrounds (hardcoded dark palette). Contexts needing user interaction or text legibility over the animation.

Working with an AI agent

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

Change the bloom step interval from STEP=620 to STEP=400 and swap the crown blossom fill to url(#an02-gRose) for a rose-pink center. 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

  • bloom step interval (STEP=620 ms)
  • cell lighting order (order array)
  • cell fill gradients (an02-gGold, an02-gRose, an02-gGreen, an02-gTeal)
  • halo opacity (.an02-halo.an02-on opacity:.5)
  • dark-hold pause after full bloom (last = t + 700)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange stop/start guard
  • prefers-reduced-motion branch (lights all cells immediately)
  • IIFE wrapper
  • lead came paths layered on top of cells
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No interactivity — purely ambient; cannot click individual cells to light them
  • Dark background hardcoded in both CSS var and inline SVG rect — must change both to retheme

stained-glassart-nouveausvgfloralambientsequentialglow

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