Project 13 block design & features
The block opens with a viewport-height hero section where a background image scales and translates in response to scroll position, overlaid with a dark scrim and a centered title that fades and scales into view. A metadata section beneath the hero presents a border-separated paragraph and a grid of five label-value pairs (project, studio, year, role, tools) using uppercase small text. A two-by-two image grid follows, with each square image enlarging on hover via a scale transition. A closing concept section pairs a small label on the left with a heading and two muted-foreground paragraphs on the right in a two-column grid.
Color treatment relies on black overlays for the hero and semantic token surfaces for the remaining sections. The hero title is rendered in white at a very large scale with a bordered white frame on medium screens. Staggered Framer Motion variants control the entrance of every section. Hover interactions on the gallery images use a 700 ms scale transition for a slow zoom effect.
The overall impression is immersive and gallery-forward, suited to visual storytelling. The parallax scroll effect on the hero adds depth, while the flat metadata grid keeps project details scannable. Built with Shadcn UI layout conventions.
The hero fills the viewport height and the four-image grid collapses to two columns then one on progressively smaller screens.