A library wheel drawn in WebGL with three.js. The pieces sit on a vertical wheel from the first frame, and the first scroll or drag already turns it: the piece at the front lies flat and full size, and the ones above and below fold away from it like doors, show their mirrored backs and curl toward the viewer off the top and bottom of the stage, where the stretched picture smears into streaks and the edges pick up a thin spectral fringe and haze. The neighbours also slide left round an arc, so the strip reads as a wheel seen side on. The title of the front piece sits on the left and the corners stay clear. Scroll, drag with fling, the arrow keys, Page Up and Page Down, Home and End move it one piece at a time, and the page scrolls on at either end. A live region names the piece, keyboard focus is visible, and reduced motion settles almost at once. Stage size and colour, up to nine pictures and every title, card width, corner radius, wheel curve, settle speed, autoplay, wheel and drag input, fringe, haze and streak smear are all editable live, and the export is one HTML file with the pictures embedded and three.js loaded through an import map.
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