Gallery 20 block design & features
The block centers five square images in an absolutely positioned stack. Each image has a preset rotation and x/y translation defined in data, fanning them outward from the center like a hand of cards. The center image sits flat with a slight upward offset and a higher z-index, while the outer pairs angle away at roughly 12 and 19 degrees. A Framer Motion spring animation slides the whole group in from below on mount.
Each image is draggable and snaps back to its origin on release. On hover, the image scales to 1.15x, straightens its rotation to zero, lifts upward, and jumps to the top of the stack. The images use rounded-3xl corners and a box shadow to reinforce the layered-photo feel. Below the stack, a centered heading and a round shadcn/ui Button with an arrow icon fade in with a short delay.
The aesthetic is playful and tactile, evoking a pile of printed photographs scattered on a table. The drag-and-snap interaction reinforces that physicality, and the spring-based timing keeps motion organic rather than mechanical.