∞ forever components

Retro & Glitch

Pixel-art sprite march

Three rows of 8x8 two-frame pixel sprites march across a scrolling starfield at varying speeds; pointer horizontal position controls march speed.

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 game aesthetic headers, 8-bit themed landing pages, looping background decoration with nostalgic pixel style.

When not to

Designs requiring high-fidelity visuals or clean modern aesthetics. Low-end devices where canvas rAF loops at fixed 160x160 upscaled may blur at large sizes.

Working with an AI agent

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

Add a fourth sprite row by appending {col:'#ff9f3f', y:0.63, sp:1.2, off:45} to the rows array and adjust existing y values to space evenly.

Safe to edit

  • sprite palette colors (pal.A, pal.B)
  • row colors and speeds (rows array col/sp)
  • march speed multiplier (t*22*row.sp)
  • animation frame rate (t*6*row.sp for leg toggle)
  • canvas virtual resolution (W=H=160)

Keep intact

  • imageSmoothingEnabled=false + image-rendering:pixelated (critical for crisp pixels)
  • visibilitychange pause guard
  • reduce=matchMedia prefers-reduced-motion check

Known limitations

  • Canvas fixed at 160x160 virtual pixels — upscaling via CSS may produce blur in non-pixelated browsers
  • Reduced-motion freezes animation entirely rather than showing a static fallback frame
  • Sprite frame-bob offset (frame?-2:0) is hardcoded and not parameterized

pixel-artspriteretro8-bitscrollingstarfieldloop

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