Project 13 A block design & features
The section starts with a full-screen hero where the background image translates vertically on scroll, covered by a gradient that transitions from light black at the top to deeper black at the bottom. Centered text includes a large two-line title and a subtitle, both of which fade and slide up on load. A project info section splits into two columns: a heading with overview paragraph on the left and stacked metadata (studio, year and role, tools) on the right. Four full-width images are rendered edge-to-edge in a vertical stack without spacing. A closing concept section uses a two-column layout with a small label and a heading paired with body paragraphs.
The hero text parallax runs independently from the background parallax, creating a layered depth effect. Entry animations use custom cubic-bezier easing curves and generous vertical offsets for a weighty, cinematic entrance. The Shadcn UI layout tokens handle container widths and spacing throughout.
Visually the block is immersive and photo-heavy, with the gradient hero and edge-to-edge gallery emphasizing full-bleed imagery. Typography scales from very large hero text down through structured metadata and relaxed body copy.
On mobile the two-column project overview stacks vertically and the hero text sizes reduce, while the full-width images maintain their edge-to-edge presentation.