∞ forever components

Retro & Glitch

Chromatic aberration pulse

Three RGB-offset copies of concentric rings and a bold glyph pulse in screen blend mode, rotating and tracking the pointer with scanline flicker.

canvasmedium complexityintense 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 hero sections, music visualizers, cyberpunk-themed loading screens where high-energy RGB distortion fits the brand.

When not to

Contexts needing readable text overlays or calm ambience; photosensitive audiences — beat pulse and scanline flicker are aggressive.

Working with an AI agent

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

Change the glyph letter from 'R' to 'X', shift the red channel to '#ff6600', and slow the beat by changing t*1.6 to t*0.9.

Safe to edit

  • glyph letter ('R' in fillText)
  • RGB channel colors (#ff1133, #A9D22D, #C0B459)
  • beat rhythm speed (t*1.6)
  • scale factor (Math.min(W,H)*0.3)
  • scanline row gap (yy+=4)

Keep intact

  • screen globalCompositeOperation for RGB additive blend
  • visibilitychange pause
  • reduced-motion static-frame guard

Known limitations

  • No IIFE wrapper — globals pollute window scope
  • Scanline loop iterates full canvas height every frame — expensive on tall screens
  • Pointer offset affects red and blue channels asymmetrically by design

chromatic-aberrationglitchretrocanvasrgb-splitscanlinespulse

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.