Projects 3 block design & features
The block displays project entries in a single full-width column beneath a centered heading. Each entry wraps a large rounded image overlaid with a gradient from transparent to dark at the bottom. Project metadata including date, category, and title render as white text centered over the image. Items stagger into view with opacity and vertical offset animations triggered by viewport intersection.
Scroll position drives subtle parallax transformations on each card: scale, vertical offset, and opacity shift as the user scrolls past. On hover, the image scales slightly larger and the gradient intensifies, while the title and metadata shift upward. A circular frosted-glass cursor icon containing a rotating plus symbol appears at the mouse position with spring physics, animating in and out with scale and rotation.
The combination of scroll-driven motion, hover reactivity, and the custom cursor element creates a highly interactive, agency-portfolio aesthetic. The single-column layout keeps focus on one project at a time.
Cards stack vertically at all breakpoints with consistent gap spacing between entries.