∞ forever components

Retro & Glitch

Datamosh blocks

Grid of color blocks from a shifting gradient; random tiles smear and chroma-split magenta/cyan to simulate datamoshing. Click to burst all blocks.

canvasmedium 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 glitch-aesthetic hero backgrounds, music visualizers, cyberpunk UI accents.

When not to

Contexts requiring legible overlaid text or calm environments — constant block smearing is visually loud.

Working with an AI agent

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

Change chroma-split colors from magenta/cyan to red/yellow by editing the two rgba fillStyle values inside the `if(m.life>0)` block, and slow drift by reducing `t+=0.04` to `t+=0.015`.

Safe to edit

  • cell size divisor (Math.min(W,H)/14)
  • gradient drift speed (t += 0.04)
  • mosh trigger probability (Math.random()<0.02)
  • chroma-split offset (+3/-3 pixels)
  • click burst strength (cell*3 / cell*2)
  • background fill color (#0d0d12)

Keep intact

  • visibilitychange pause/resume
  • prefers-reduced-motion guard (freeze t, skip m.life)
  • vec reseed on resize
  • globalAlpha reset after chroma layers

Known limitations

  • Canvas resolution capped at 60% of viewport — no DPR scaling, edges may look soft on retina screens
  • No aria role — add aria-hidden in production
  • Reduced-motion freezes t but rAF loop still runs at full rate

glitchdatamoshcanvaschroma-splitretroblocksgenerative

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.