A vertical card carousel drawn in raw WebGL2. The upper part of the active card sits flat and sharp; below a fold line the strip of cards curls toward the viewer and dissolves into a pool of light that takes the colour of whichever card is sinking into it. Each step kicks a spring in that light, so it swells, pushes the next card out and rings once before settling, while the curled part of the strip trails the cards like a viscous sheet. The cards are clear glass with frosted etched lines or dark brushed metal, on a black or a light page, and their faces (chip, emblem, name and number) are drawn procedurally, so renaming a card re-engraves it live. Drag, the wheel, the arrow keys or two focusable step buttons move it one card at a time, and autoplay advances it when the reader stops touching it. The engineering holds up in a real page: a live region names the card, keyboard focus shows a ring above the canvas, reduced motion turns autoplay and easing off, the loop sleeps when the stage is off screen, and a browser without WebGL sees a still card instead of a hole. Stage size, corner radius, background, material, six card names, autoplay, elastic push, wheel, drag, curl blur, the label and the hint are all editable live, and the export is one HTML file with no library to fetch.
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