Gallery 30 block design & features
The block occupies a full-viewport height section with a centered heading in uppercase tracking-tight type and a short muted paragraph beneath it. Around and below the text, eight photographs are absolutely positioned at various offsets and sizes, creating an overlapping collage arrangement. On mount the image order is randomized and each photo receives a staggered delay before animating in with a spring-based framer-motion transition.
Every image supports drag interaction, letting users click and reposition photos freely. While dragging, the active image promotes to a higher z-index so it layers above its neighbors. Behind the entire composition, a subtle SVG illustration draws two large circular outlines that anchor the negative space without competing with the photographs.
The result is playful and art-directed, closer to a physical mood board than a conventional gallery grid. Several images are hidden on mobile and the remaining ones gain slight rotations, adapting the scattered layout to a smaller canvas. The combination of randomized ordering, spring animations, and drag affordance gives the section an experimental, interactive character.