∞ forever components

Retro & Glitch

Sync Roll Bars

Amber CRT test-pattern rolls vertically with a tearing sync seam, horizontal jitter, upward bright bands, and scanlines. Pointer/click accelerates the roll.

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/glitch-themed hero backgrounds, loading screens, or CRT aesthetic overlays on dark-mode UIs.

When not to

Light-background layouts (background hardcoded dark amber-black). Contexts where vertical motion competes with readable content.

Working with an AI agent

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

Change palette to green phosphor: replace '#ffd23f' with '#39ff14' and '#caa317' with '#1a8f0a' in the cols array and band gradients.

Safe to edit

  • scroll speed (sp base value 1.4)
  • color palette (cols array, 8 amber values)
  • bright band count (bands=2) and opacity (0.28)
  • scanline density (y+=3) and opacity (0.22)
  • tear jitter amplitude (sin multipliers 5 and 9)

Keep intact

  • DPR-aware canvas sizing (cv.width=W*DPR)
  • visibilitychange pause/start guards
  • reduced-motion static frame fallback
  • IIFE wrapper

Known limitations

  • Scanline loop runs every frame over full canvas height — minor perf cost on tall displays
  • Reduced-motion renders a single static frame only; no graceful slow-motion fallback

retrocrtglitchscanlinescanvasambertest-patternvignette

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.