A card carousel drawn in WebGL with three.js. The centre card lies flat and faces the viewer; the cards beside it crumple into lumpy paper balls whose rims curl back to show the white back of the sheet, and each one smooths out as it slides into the middle. The paper bends without stretching, so a wad never breaks into jagged teeth, and fine crease relief and paper grain catch the light on every facet. Six seeded crumple layouts are used in turn. Autoplay has a visible pause button, and drag with fling, the sideways wheel, the arrow keys and two step buttons move it one card at a time. A live region names the card, keyboard focus is visible, and reduced motion starts paused and swaps cards without animation. Stage size and colour, card shape (1:1, 4:5 or 3:4), corner radius, up to twelve pictures, crumple, memory, folds, sharpness, texture, roll, gap, step time and autoplay 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