Glass Edge Slider

A vertical picture slider that steps up one card at a time, seen through a curved glass rim that folds and widens each card as it leaves or enters the stage.

About this tool

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: a card that leaves or arrives folds back on itself and widens toward the edge, the way a picture looks through the rim of a glass. 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 eight 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, drag, wheel and the four words are all editable live. 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

Photos

Card size x

Corner words

Top left

Top right

Bottom left

Bottom right

Show words

true false

Glass

Glass strength

Rim depth x

Motion

Playback

playing paused

Time per card s

Drag

true false

Wheel

true false

Stage

Background

#ffffff