∞ forever components

Art Deco

Fountain Arcs

Symmetrical golden arcs well up from a central jet with a chevron crown, fanning outward in a breathing 7.2s cycle over a near-black field.

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

Dark luxury hero backgrounds, Art Deco themed headers, ambient looping display for premium brand contexts.

When not to

Light backgrounds (hardcoded dark field). Contexts requiring legible text overlaid — arc motion competes with reading.

Working with an AI agent

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

Change ARCS from 9 to 12, set GOLD to '#e8c97a', and slow the breathing cycle by changing the cycle variable from 7.2 to 10. 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

  • arc count per side (ARCS=9)
  • color palette (GOLD, PALE, AMBER, DEEP constants)
  • breathing cycle duration (cycle=7.2)
  • spread and lift ratios (W*0.46, unit*0.46)
  • chevron crown stack count (k<3)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing and setTransform
  • cached gradient rebuild on resize only (gradL/gradR)
  • visibilitychange pause/resume
  • reduced-motion static frame fallback (render(2.6))
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS and canvas — must edit both to change from near-black
  • No pointer/touch interactivity — purely passive display
  • 26-segment polyline per arc approximates curves; very high ARCS count may show minor perf cost

art-decofountaingoldsymmetrycanvasambientgenerative

More Art Deco components

  • Sunburst Fan13 tapered gold rays open and close in mirrored symmetry from a glowing core medallion above a ziggurat plinth, breathing with a 7-second CSS cycle.
  • Ziggurat RiseThree stepped gold ziggurat skyscrapers rise and settle with a damped bob against a radial sunburst on deep black — staggered entrance, then looping.
  • Chevron MarchInterlocking gold and ink chevron bands march in alternating directions across a black canvas; a convoy of gold diamonds glides down a central seam.
  • Fan BloomA 16-rib peacock fan blooms open and closed from a sunburst medallion over a gold ziggurat base; each rib has barbs and an emerald eye-spot.
  • Gatsby FrameGold SVG frame self-draws in fourfold symmetry — ziggurat corners, sunburst fans, chevrons, and a fountain medallion bloom then fade and redraw in a 4.2s…
  • Radial GrilleConcentric gold rings, 16 spokes, and stepped lozenge diamonds counter-rotate in two layers against deep black, evoking a wrought-iron Art Deco elevator…