∞ forever components

Retro & Glitch

Tape Head Switching Noise

VHS head-switching dropout: frayed hash-noise band on the lower third, rising scanline ghosts, and a snapping chroma-split desync slice. Click boosts chaos.

canvasheavy complexityintense motionclick

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 or lo-fi hero backgrounds, VHS-themed pages, glitch art displays, or loading screens needing gritty analog texture.

When not to

Layouts with legible text in the lower third — noise band occupies ~34% of viewport. Avoid on low-end devices due to per-frame pixel writes.

Working with an AI agent

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

Change accent from blue-white to amber: replace 192,200,255 with 255,200,100 throughout, and update chroma echoes to warm tones (rgba(255,220,80,…) and rgba(255,100,50,…)).

Safe to edit

  • band height fraction (H*0.34)
  • noise density gate (0.10+tear*0.55+boost*0.25)
  • accent color (192,200,255)
  • horizontal jitter magnitude (Math.sin(t*0.9)*3 + Math.sin(t*5.3)*2)
  • scanline ghost count (gn up to 7)
  • desync snap frequency ((t*7|0)%13===0)

Keep intact

  • low-res offscreen noise buffer (NW=240) — critical for perf
  • IIFE wrapper with scoped canvas ID #ths-c
  • visibilitychange pause/resume
  • prefers-reduced-motion static-frame fallback

Known limitations

  • Per-frame putImageData pixel writes are CPU-bound — may stutter on low-end devices
  • Background hardcoded #0c0c0c in CSS — edit to change dark base
  • Canvas lacks aria-hidden — add for screen reader hygiene

vhsglitchnoiseretroscanlineschroma-splitcanvas

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.