A horizontal gallery of rounded photo cards on a light grey stage. The track loops and drifts left on its own, one card every four seconds, and sits on a gentle concave curve so the side cards sink back in depth behind a soft darker pool at the centre. Hover a card and the drift stops: a travelling wave runs through its top and bottom edges and the picture breaks up like a lost TV signal, with sync wobble, torn lines, a rolling bar, scanlines, static and colour fringing, in random bursts for as long as the pointer stays. Drag with a fling, the scroll wheel or the arrow keys move the track; Space, Enter or the pause button stop the drift. A 'Glitch on: always' mode runs the effect on the centre card without a pointer, for touch screens and posters. The loop always holds every photo the same number of times and is long enough that no card pops in or out of view. Reduced motion stops the drift and the glitch. Frames stop when nothing moves, off screen and in hidden tabs, and a still card replaces the scene if WebGL is unavailable. Seven photos, card width, gap, shape, corners, curve, background, centre shade, drift speed, wheel, burst strength, bad signal and edge wave are editable. The export is one HTML file.
In collections: Retro CRT, Pixel Art & Glitch Effects· Web Image Galleries & Photo Grid Layouts
Guide: React Carousel: Build One With CSS Scroll Snap or a Library
Carousel · HTML / CSS / JavaScript · All tools