Immersive 4 block design & features
Immersive4 is a scroll-driven reveal built with shadcn/ui. The section pins and opens on a single photograph filling the screen with a large headline over it. As the visitor scrolls, the photo shrinks and its corners round until it becomes the center cell of a three by three grid, and a closing line fades in underneath.
The surrounding photos fade and slide in toward the center in waves, with the four nearest neighbors arriving first and the corners last. The headline lifts and fades as the zoom begins. All motion is smoothed with a spring and reverses when scrolling back up.
It is a cinematic, story-led block that works well as a portfolio or brand opener. It needs nine landscape photographs, with the fifth used as the opening image.