Gallery 127 block design & features
Gallery127 is a scrolling photo grid built with shadcn/ui and Motion. Nine commissioned photographs, from yoga and gym campaigns to a lookbook portrait, an eye close up and workplace scenes, sit in three columns on desktop and two on phones, with alternate columns pushed down so the rows stagger. Each photo has a title and the type of job underneath.
The effect is tied to scroll position rather than a timer. As a photo crosses the screen it starts soft, pale and nearly grey, then sharpens, gains contrast and fills with colour like a print coming up in the tray, settling crisp by the time it reaches the middle of the screen. Its caption slides up out of a mask during the last part of that move, and scrolling back reverses it. The columns also drift a few pixels against each other for a gentle sense of depth.
Pointing at a print, or tabbing to it, fades the others back and drains some of their colour so the chosen one stands out. Clicking opens it in a full-screen lightbox, where the photo develops in from the same soft, pale blur, with its title, job type and a counter underneath. Arrow buttons and the arrow keys step through the set, and Escape, the close button or a click outside closes it and returns focus to the print. With reduced motion every photo shows crisp and still and the lightbox simply fades.
The layout is quiet and gallery like, with rounded crops, small captions and plenty of space between rows. It suits photographers, studios and agencies with a run of recent work to show. Each item needs a portrait friendly photo, a title and a short detail line such as a client type or year.