∞ forever components

Retro & Glitch

CRT scanline screen

Green-phosphor CRT terminal: rolling CSS scanlines, vignette, glowing oscilloscope wave, blinking boot-text rows, and random canvas glitch flashes.

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

Retro/hacker themed hero sections, loading screens, terminal-aesthetic UI backgrounds, or dark-mode displays needing CRT nostalgia.

When not to

Light-background UIs (background hardcoded dark green-black). Contexts where animation competes with readable content overlaid on top.

Working with an AI agent

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

Change boot text by editing the cols string (e.g. replace '> SYS BOOT OK' with '> HELLO WORLD'), then swap phosphor color from '#3ef08a' to '#ffb347' for amber.

Safe to edit

  • boot text rows (cols string)
  • phosphor color (#3ef08a / #54f08a)
  • oscilloscope wave amplitude (H*0.11, H*0.05)
  • scanline roll speed (6s CSS animation)
  • glitch flash frequency (Math.random()<0.03)

Keep intact

  • visibilitychange pause/play guards
  • prefers-reduced-motion guard (disables glitch + stops t increment)
  • half-resolution canvas for pixelated CRT feel
  • CSS scanline + vignette overlay layers

Known limitations

  • Background color hardcoded in both CSS and canvas fillStyle — must edit both to change palette
  • Glitch flashes fully disabled under prefers-reduced-motion
  • Half-resolution canvas may appear soft on high-DPI displays despite image-rendering:pixelated

crtscanlinesretroterminalgreen-phosphorglitchoscilloscope

More Retro & Glitch components

  • 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.
  • 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.