A card carousel drawn in WebGL with three.js. The centre card lies flat and faces the viewer; its neighbours show their backs and fold away from it like doors, swinging about their inner edge, receding, then curling back toward the lens at the side of the stage, where the stretched part of the picture smears into horizontal streaks and the silhouette picks up a thin spectral fringe and a hue-shifted haze that follow each card's colour. A slot change swings the leaving card past edge-on into the mirrored neighbour while the next one unfolds out of the flare. The fold path, swing timing and optics were measured frame by frame from a reference recording, and every card is a curved strip with rounded corners drawn by a signed-distance mask. Drag, the wheel, the arrow keys or two focusable step buttons move it one card at a time, and an exact critically damped spring does the settling at any frame rate. The engineering holds up in a real page: a live region names the card, keyboard focus shows a ring above the canvas, reduced motion settles faster and turns autoplay off, and a browser without WebGL sees a still card instead of a hole. Stage size, corner radius, background, six card pictures with their labels, pills and captions, settle speed, autoplay, wheel axes, drag, fringe, haze, smear and the hint are all editable live, and the export is one HTML file that loads three.js through an import map.
In collections: React Carousels & Image Galleries
Guide: React Carousel: Build One With CSS Scroll Snap or a Library· Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools