∞ forever components

Vaporwave Y2K

Neon Grid

Magenta vanishing-point grid scrolls toward the viewer over a banded sunset sky and retro sun with scan slits. Classic vaporwave canvas loop.

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

Hero backgrounds for retro/synthwave/Y2K aesthetics, loading screens, or ambient mood tiles on dark-themed sites.

When not to

Light-mode UIs (background hardcoded dark purple). Contexts where constant scrolling motion competes with foreground content.

Working with an AI agent

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

Change the grid line colors: set MAG to '#ff6ee7' (softer magenta) and CYA to '#00fff7' (brighter cyan), and slow the scroll by changing scroll+=0.035 to scroll+=0.018.

Safe to edit

  • scroll speed (scroll += 0.035)
  • palette: MAG and CYA color strings
  • grid density: GROWS (rows) and GCOLS (columns)
  • sun size (sunR = Math.min(W,H) * 0.30)
  • star count (SN=70)
  • horizon position (H * 0.50)

Keep intact

  • buildGradients() called only on resize, never per frame (perf guard)
  • DPR-aware canvas sizing and ctx.setTransform
  • visibilitychange stop/start guard
  • reduced-motion static-frame fallback

Known limitations

  • Background color hardcoded in both CSS and JS BG variable — must update both to change it
  • Stars are purely static; no twinkle or drift
  • Sun scan-slit positions use fixed offsets and may misalign on extreme aspect ratios

vaporwavegridretrocanvasbackgroundneonsunset

More Vaporwave Y2K components

  • Chrome TypeChrome extruded text slowly rotates via horizontal squash above a vaporwave sunset and neon perspective grid. Metal gradient has cyan, magenta, and gold…
  • Scanline SunA striped retro sun rises and bobs over a scrolling cyan perspective grid, beneath a magenta-to-amber sky with twinkling stars and full-frame scanline…
  • Retro OrbitFour neon wireframe shapes orbit a glowing magenta sun on tilted ellipses with depth sorting, over a scrolling perspective grid and twinkling starfield.
  • Glint SweepFive diagonal specular glints sweep left-to-right across a glossy chrome plane over a neon vaporwave grid; a chrome title bar reflects its own moving…
  • Palm SilhouetteThree swaying black palm silhouettes over a scrolling neon perspective grid, sliced sun, and magenta-to-gold CSS sunset sky with a chrome gradient title.
  • Cassette ReelsTwo chrome cassette reels spin with dashed cyan-and-magenta tape flowing between them over a scrolling neon grid and twinkling starfield.