∞ forever components

Retro & Glitch

VHS tracking distortion

VHS 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 background.

css+canvasmedium complexityintense 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

Retro/lo-fi hero backgrounds, VHS-aesthetic landing pages, glitch art screensavers, or 80s/90s nostalgia UI themes.

When not to

Contexts requiring legible text overlays or calm ambient motion — the constant jitter and tear make reading difficult and can be visually fatiguing.

Working with an AI agent

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

Change the color bars palette from the current 5-color array to a classic SMPTE set by replacing bands with ['#c0c0c0','#c0c000','#00c0c0','#00c000','#c000c0','#C08459','#000000'], and slow the animation by changing t+=0.03 to t+=0.015.

Safe to edit

  • color bars palette (bands array)
  • slice jitter intensity (Math.sin multiplier *2 and random range *40-20)
  • tracking bar speed (t*0.13 multiplier)
  • chroma-split offset distance (cx±3)
  • canvas resolution ratio (innerWidth*.55 / innerHeight*.55)

Keep intact

  • canvas self-drawImage slice loop (critical for scanline effect without pixel readback)
  • visibilitychange pause/play guards
  • prefers-reduced-motion check (t+=reduce?0:0.03)

Known limitations

  • Canvas self-drawImage compositing accumulates noise per frame — clearing with fillRect each tick partially resets but jitter bleeds; on some GPU/browser combos edges artifact
  • Canvas resolution fixed at 55% of viewport — sharp on retina but pixelated look is intentional; changing the ratio alters the VHS aesthetic
  • No click or hover interactivity — purely ambient

vhsglitchretroscanlineschroma-splitcanvasdistortion

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.
  • 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.
  • Fake terminal typingGreen-on-black CRT terminal auto-types a fake boot sequence with randomized keystroke delays, scanline overlay, and blinking block cursor; loops continuously.