∞ forever components

Vaporwave Y2K

Scanline Sun

A 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 overlay.

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

Vaporwave or Y2K themed hero backgrounds, loading screens, nostalgia-aesthetic landing pages.

When not to

Light-mode UIs (hardcoded dark palette). Contexts where continuous motion competes with text readability.

Working with an AI agent

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

Change the sun stripe color from '#190a30' in var_bg() to '#0a0a0a' for deeper contrast, and increase the sun radius multiplier from 0.30 to 0.38 for a larger sun.

Safe to edit

  • sun radius (Math.min(W,H)*0.30)
  • sun stripe count (slices=7)
  • star count (STAR_N=70)
  • grid scroll speed (time*40)
  • sky gradient color stops
  • horizon position (H*0.62)

Keep intact

  • ctx.save()/ctx.restore() around sun clip path
  • visibilitychange stop/start guard
  • reduced-motion drawOne() static fallback
  • IIFE wrapper

Known limitations

  • Scanlines loop redraws every frame (H/3 fillRect calls) — minor perf cost on very tall viewports
  • Background palette is fully hardcoded — requires editing multiple gradient stops to retheme
  • No reduced-motion animation beyond a static single frame

vaporwaveretrosunscanlinesgridstarscanvasambient

More Vaporwave Y2K components

  • Neon GridMagenta vanishing-point grid scrolls toward the viewer over a banded sunset sky and retro sun with scan slits. Classic vaporwave canvas loop.
  • Chrome TypeChrome extruded text slowly rotates via horizontal squash above a vaporwave sunset and neon perspective grid. Metal gradient has cyan, magenta, and gold…
  • 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.