Gallery 130 block design & features
Gallery130 is a slideshow built with shadcn/ui in the format of a set of stories, split into two columns. The left column holds the heading and a one-line description at the top and, pinned to the bottom, the title and note for the current photo with round arrow buttons and a small counter. The right column is a large square rounded frame with segmented progress bars across the top. On small screens the frame sits between the heading and the caption.
Each new photo is assembled from a 6×6 grid of tiles. Every tile starts as a small rounded dot and grows into a sharp square, and the delay depends on its distance from where the frame was tapped, so the picture ripples outwards from your finger. Arrow buttons, keys and autoplay start the ripple from the centre. The current bar fills over five seconds and then advances in an endless loop. Hovering or pressing and holding the frame pauses it with a small Paused label, tapping the left third goes back and tapping elsewhere goes forward. With reduced motion the tiles are replaced by a short crossfade.
The square frame and quiet caption column suit eyewear, jewellery, accessories or any product shot close up. It needs a photo, a short title and a one-line note for each frame.