Gallery 133 block design & features
Gallery133 is an endless photo carousel built with shadcn/ui and WebGL. A centred heading and one-line description sit above a row of rounded portrait cards of homeware, and the name of the card in the middle is set underneath.
Cards in the middle of the row stay sharp. As a card travels towards either edge it starts to break apart into fine grains of sand, each one coloured by the pixel it came from. The grains on the outer side let go first, drift outward past the edge of the card with a slight wobble and fade, until the card has gone completely by the time it reaches the frame edge. Bringing a card back reverses it, so the grain flows home and the photo re-forms. The row drifts slowly on its own and loops forever. Dragging it carries momentum and settles on a card, a wheel or trackpad gesture moves one card, arrow keys work when the row is focused, and clicking a card brings it to the centre. Touch drags only read the horizontal axis so the page still scrolls. With reduced motion the drift and wobble stop, and browsers without WebGL fade the edge cards instead.
The grain effect suits homeware and ceramics shops, interior studios, photographers and editorial brands that want a product row with a little texture. It needs a portrait photo and a short name for each card.