∞ forever components

Retro & Glitch

Copper Bars

Six glossy multicolor raster bars bob sinusoidally over a twinkling starfield with specular sheen and scanline overlay — a classic demoscene copper-bars effect.

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

Retro/demoscene hero sections, 80s aesthetic backgrounds, loading screens needing ambient colour motion.

When not to

Contexts requiring legible text overlays — bars and scanlines obscure content. Light-colour UIs (background is hardcoded dark navy).

Working with an AI agent

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

Add a seventh bar with hue:60 (yellow), sat:90, off:6.70, amp:0.26, spd:0.45 to the BARS array, then increase bar height cap from 76 to 90.

Safe to edit

  • bar hue/saturation per entry in BARS array
  • bar height cap (Math.min(H*0.16, 76))
  • vertical travel range (span = H*0.30)
  • animation speeds (spd values per bar)
  • star density divisor (W*H/2600)
  • scanline opacity (globalAlpha 0.06)

Keep intact

  • DPR-aware canvas sizing and setTransform
  • visibilitychange pause/start pattern
  • prefers-reduced-motion guard (static single frame)
  • IIFE wrapper

Known limitations

  • Background color hardcoded to #000016 — must edit CSS and clearRect fill to change
  • Scanline loop redraws every frame (minor cost on very tall viewports)
  • nudge decay via pointer/click has no reset — large screens may feel sluggish to respond

retrocopper-barscanvasstarfieldscanlinesdemosceneambient

More Retro & Glitch components

  • CRT scanline screenGreen-phosphor CRT terminal: rolling CSS scanlines, vignette, glowing oscilloscope wave, blinking boot-text rows, and random canvas glitch flashes.
  • VHS tracking distortionVHS test-pattern color bars with 46-slice horizontal jitter, random tear events, a rolling tracking bar, and chroma-split REC text on a dark vermillion…
  • Pixel-art sprite marchThree rows of 8x8 two-frame pixel sprites march across a scrolling starfield at varying speeds; pointer horizontal position controls march speed.
  • ASCII shimmerGrid of ASCII ramp characters shimmers through interfering radial and plasma waves in green-teal hues; character density and wave center follow the pointer.
  • Dot-matrix tickerAmber LED dot-matrix marquee scrolling GAME OVER / INSERT COIN / HIGH SCORE across a dim dot grid. Custom 5x7 bitmap font with pulsing brightness per column.
  • Neon arcade signPink neon ARCADE sign with CSS flicker animations and a yellow chasing-light marquee around a glowing pink border frame.