∞ forever components

Backgrounds

Cursor Trail

Glowing sage, tan, and stone particles trail the pointer with additive blending on a dark canvas; idle drift animation keeps the tile alive without interaction.

canvasmedium complexitymoderate motionpointer

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 hero backgrounds, creative portfolio canvases, or interactive demos where pointer feedback adds ambient delight.

When not to

Light-background UIs (background hardcoded dark), content-heavy layouts where trail competes with text, or contexts without pointer input (pure touch kiosks).

Working with an AI agent

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

Change the COLORS array to ["#ff6b35","#ffcc00","#00ff88"] for a warm sunset palette and increase MAX to 180 for a denser trail. 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

  • COLORS array (iris/cyan/pink palette)
  • MAX particle count (120)
  • particle size range (r: 1.5–5)
  • decay rate (0.012 + random*0.02)
  • idle drift speed (auto.t += 0.018)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • precomputed sprite canvas per color (perf-critical)
  • visibilitychange pause via runLoop
  • prefers-reduced-motion static fallback
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Touch support uses passive touchmove so emit fires but no cursor feedback is visible on touch devices

cursortrailparticlescanvasadditiveglowbackground

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.
  • Layered WavesThree SVG wave layers in iris, cyan, and dark slide horizontally at different speeds over a deep blue-gradient sky, creating a parallax depth effect.