Gallery 138 block design & features
Gallery138 is a photo slideshow built with shadcn/ui and a small WebGL2 shader. A centred heading and one line sit above a wide rounded frame, and below it the current photo's title, a pair of round arrow buttons and a row of thin progress segments.
Between slides the shader treats each photo as a height map. As the outgoing photo fades to the page colour, fine contour lines traced from its light and dark areas draw in over it in the text colour, slowly drifting like a topographic map. Halfway through, the lines reshape into the contours of the incoming photo, which then rises out of a grainy frosted blur until it is sharp. The current segment fills over five seconds before advancing, pausing while the pointer is over the frame, and the slideshow loops. Arrow keys work when the frame has focus. Without WebGL the photos crossfade out of a CSS blur, and with reduced motion they swap instantly with no autoplay.
Here it walks through six bright studio, interior and architecture shots with strong colour and contrast, which give the contour lines plenty of shape. It suits photographers, studios and editorial pages with a small set of strong images that should feel calm and considered rather than flashy. Each slide needs a photo and a short title.