A photo wheel drawn in raw WebGL with no library. Portrait cards are hinged on one horizontal axle and fan out into a star, seen from a quarter turn so the cards facing you lean to one side. The wheel turns one card at a time and eases into each one; while it turns, every card smears along its path with a thin spectral fringe, its rims flare from cool blue to warm amber, a sheen crosses its face and the seam along the axle glows brighter. Cards turning away fade into the stage, and a soft shadow sits on the floor under the wheel. Drag, the scroll wheel, the arrow keys or the two step buttons take over from the autoplay, and an exact critically damped spring settles the wheel on a card with no overshoot; a moment later the autoplay picks up from there. Load more photos than cards and each card swaps its picture while it faces away from you. Photos, card count, ratio and corners, wheel size, turn, tilt, camera distance, axle gap, direction, seconds per card, the pause at each card, settle speed, drag and wheel behaviour, sheen, axle glow, floor shadow, back fade, smear, fringe, flare and the colours are all editable live. The engineering holds up in a real page: a screen reader gets a list of the photos and a live region, the step buttons are labelled, reduced motion stops the autoplay and the smear, rendering pauses off screen, a lost graphics context rebuilds itself and a browser without WebGL sees a scrolling strip of the photos instead of a hole. The export is one HTML file that loads its pictures from the CDN.
Carousel · HTML / CSS / JS · All tools