Gallery 50 block design & features
Gallery50 is a comparison gallery built with shadcn/ui around two before-and-after image pairs. A mono eyebrow, heading, and short description introduce a stack of wide comparison stages. Each stage layers two photographs under a draggable vertical divider with side labels and a handle so viewers can scrub between states.
The divider and handle sit over cover imagery with soft contrast so the control stays visible without hiding the subject. Labels mark each side of the pair, and motion on the handle keeps the interaction feeling responsive. Stages share large rounded borders so the set reads as one gallery, not three unrelated widgets.
The pattern is interaction-driven with moderate complexity. It needs paired photographs that clearly differ across the divider. Compared with a static two-up layout, the scrub control is what makes the block distinctive.