∞ forever components

Art Nouveau

Wave Tress

9 whiplash hair tresses in gold, sage, and rose sway and curl over a dark green field; stained-glass floral blossoms bob at gathering points.

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 themed hero backgrounds, decorative ambient loops, luxury/botanical brand displays.

When not to

Light backgrounds (hardcoded dark green). Contexts where constant sinuous motion competes with readable content.

Working with an AI agent

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

Change strand count to 12 by setting N=12, shift palette to cooler tones by replacing GOLD with '#8ab4c9' and SAGE with '#5a8a7a', and slow drift by reducing sp multiplier from 0.5 to 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

  • strand count (N=9)
  • palette constants (GOLD, SAGE, ROSE, IVORY)
  • sway amplitude multiplier (0.085)
  • curl frequency range (1.1–2.7)
  • blossom anchor points (pts array)
  • drift speed (sp: 0.45+0.5)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing with ctx.setTransform
  • visibilitychange pause/resume
  • reduced-motion single static frame (frame(2.1))
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded to dark green — requires CSS edit to change
  • Blossoms use fixed fractional positions that may look sparse on very wide or portrait-narrow viewports

art-nouveauhairwhiplashcanvasorganicambientfloral

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…