Project 12 - Project intro with mask-reveal heading animation

Pro

Two-column project introduction featuring multi-line headings with a clip-path mask reveal, metadata labels, and a large bordered hero image.

Shadcn Project 12 block

Component Data

  • ID:project12
  • Access:pro
  • Created:Oct 1, 2025
  • Type:block

Project 12 block design & features

The layout arranges a large multi-line heading and a back navigation button on the left alongside a narrower sidebar on the right that holds a short paragraph and three stacked metadata items (year, project name, photographer). Each heading line animates in with a horizontal clip-path mask reveal, staggered by 0.3 seconds, while the sidebar content fades up independently. A full-width hero image with a rounded border and drop shadow sits below the two-column header. The shadcn/ui Button provides the back navigation element.

Visual treatment is clean and editorial. The heading uses bold, tightly tracked type at a large scale, while metadata labels use uppercase extra-small text in muted foreground. The hero image receives a subtle shadow and a thin border, giving it a framed quality. Fade-up and mask-reveal transitions use eased timing curves for a smooth entrance.

The block reads as a polished project introduction page with a strong typographic hierarchy and restrained motion. The mask-reveal technique on the heading lines is the primary distinguishing detail.

On smaller screens the two-column header stacks into a single column, and the heading size scales down to maintain readability.