Product List 45 block design & features
A full-bleed product grid of sunglasses with thin divider lines, a Filter button and a sort select. The Filter button opens a horizontal strip of outline glyphs for cat-eye, round, square and geometric frames, plus an All option. Above the grid, a compare row holds a large photo, the shape, the name and the price for the last two shapes you picked.
Picking a shape filters the grid and moves the lead frame for that shape out of its grid slot and into the compare row with a shared layout animation, while the remaining cards close the gaps. The active shape is marked by a soft background that slides between glyphs. Each compare frame has a remove button, and choosing All sends the frames back to the grid. Products, shapes and sort options are plain data in the file, built on shadcn/ui Button and Select.
On mobile the shape strip scrolls sideways, the compare row stays as two compact columns and the grid drops to one column. Under reduced motion the frames and indicator jump straight to their new places.