A vertical slider drawn in WebGL2 with no library. A column of rounded picture cards fills the stage edge to edge and steps up one card every two seconds on a critically damped spring, so each move eases in and settles without a bounce. At the top and bottom edges the column is seen through a curved glass rim that folds each card back on itself and widens it, and a prism exit takes over from there: the picture smears into streaks along its way out, its outline splits into a thin red, green and blue fringe, and a pale, hue-shifted haze spills past it. The middle of the stage stays sharp and clean. Drag, the wheel or the arrow keys move the column yourself, and autoplay picks up again three seconds after you let go. The default set is ten pictures from the HorizonX Top bank, photographs that fill the card and graphics that let their plain ground run past it, and you can replace them with up to sixteen of your own. A short word sits in each corner. Stage size, background, card size, time per card, glass strength, rim depth, prism strength, drag, wheel and the four words are all editable live; a prism strength of zero gives the plain glass rim. The engineering holds up in a real page: a screen reader gets a list of the pictures and a live region, a play and pause button appears on keyboard focus, reduced motion turns autoplay off, rendering pauses off screen and in hidden tabs, and a browser without WebGL2 sees a still picture instead of a hole. The export is one HTML file that loads its pictures from the CDN.
In collections: React Carousels & Image Galleries
Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· React Carousel: Build One With CSS Scroll Snap or a Library· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools