∞ forever components

Backgrounds

Layered Waves

Three SVG wave layers in iris, cyan, and dark slide horizontally at different speeds over a deep blue-gradient sky, creating a parallax depth effect.

csslight 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-mode hero backgrounds, landing pages, ocean or depth-themed sections needing calm ambient motion.

When not to

Light-background layouts (sky hardcoded dark navy). Contexts where text legibility is critical over the wave area.

Working with an AI agent

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

Change the foreground wave color from cyan (#22d3ee) to coral (#ff6b6b) and slow the fastest layer from 5s to 8s animation duration. 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

  • wave colors (fill attributes on each path)
  • animation durations (11s, 7.5s, 5s per layer)
  • layer opacity values (.45, .65, .90)
  • sky gradient colors (--bg-700 and stops)
  • wave height/shape (SVG path d attribute)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause (animationPlayState toggle)
  • IIFE wrapper
  • prefers-reduced-motion guard
  • 200%-width SVG with seamless -50% translateX loop
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background sky color hardcoded in CSS — must edit both .c07-wave__sky and body to change theme
  • Wave shapes are hand-crafted bezier paths — reshaping requires SVG path knowledge

wavesparallaxbackgroundsvgloopdark-themeambient

More Backgrounds components

  • Aurora BorealisThree blurred, screen-blended gradient ribbons drift and skew over a near-black background, simulating northern lights in blush, cream, and rose.
  • Mesh GradientFour blurred radial blobs in cream, gold, and tan drift and scale on a dark background with screen blend mode, creating a soft animated mesh gradient.
  • Particle Constellation18–60 lilac/tan/mauve particles drift and bounce; nearby pairs connect with fading lines, forming a shifting constellation network on a dark background.
  • Film GrainSVG feTurbulence noise jitters over a dark radial-tinted base with scrolling scanlines and a blinking magenta REC dot for an analog film look.
  • Digital RainCyan katakana and hex glyphs fall in columns down a dark canvas, leaving fading trails; occasional bright white leading chars evoke the Matrix effect.
  • Starfield WarpStars streak outward from center as cyan/purple/blue light trails simulating hyperspace warp. Auto-spawning keeps density constant on any viewport.