∞ forever components

Retro & Glitch

Bayer Dither Dissolve

Green-on-dark chunky pixel grid animated with 4x4 Bayer ordered dithering; concentric ripple rings breathe in and out, warped by pointer position.

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 terminal aesthetics, hacker/cyberpunk hero backgrounds, screensaver-style ambient displays.

When not to

Light-background UIs (background hardcoded dark). Contexts needing legible text overlays — dense pixel motion competes heavily.

Working with an AI agent

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

Change FG to amber ([255,176,0]) and BG to [10,8,0], increase cell size divisor from 64 to 40 for coarser pixels, slow the ripple by changing tt*2.2 to tt*1.2.

Safe to edit

  • foreground color (FG array)
  • background color (BG array)
  • cell size divisor (64)
  • ripple speed (tt*2.2)
  • interference frequency (7.0)
  • breathe rate (t*1.6)

Keep intact

  • offscreen low-res canvas pattern (critical for chunky pixel upscale)
  • Bayer matrix B array
  • visibilitychange pause/start
  • reduced-motion static frame fallback

Known limitations

  • Static fallback on reduced-motion is a single frozen frame — no accessible alternative
  • Background color hardcoded in both CSS and JS fillRect — must update both to change it

ditherbayerretropixelcanvasgenerativepointer

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.