Images aren't faded in — they're revealed by a rectangle that expands from a slit in the middle. Editorial and cinematic.
A reveal animation where the image starts hidden behind a "shutter" — a mask shaped like a thin horizontal slit — and the slit expands outward to uncover the full image. Often combined with a slow zoom-out on the image inside. Used heavily on agency portfolios, editorial features, and any product page that wants a cinematic moment for hero imagery.
The image starts with clip-path: inset(40% 50% 40% 50%) — a thin horizontal slit in the middle of its container. On scroll, an IntersectionObserver adds an .in class which transitions clip-path to inset(0 0 0 0) (full visibility) over ~1.2 seconds with a custom cubic-bezier. Pair with a transform: scale(1.15) on the image that animates to scale(1) over the same duration so the image looks like it pushes through the slit. Two simultaneous transitions create the cinematic feel.
Scroll inside. Images push through the slit as each frame enters the viewport.
Build an image reveal effect using clip-path. For each image frame: aspect-ratio:16/10, border-radius:14px, overflow:hidden, position:relative. Inside, the image is absolutely-positioned and starts with clip-path:inset(40% 50% 40% 50%) — a thin horizontal slit in the middle. Also start the image at transform:scale(1.15). Apply transitions to both: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1) and transform 1.4s ease. Use IntersectionObserver (threshold 0.25) on each frame; on first intersection, add an .in class that animates clip-path to inset(0 0 0 0) (fully visible) and transform to scale(1). The image appears to push through the slit while zooming back to normal — cinematic camera-push feel. Unobserve after first trigger so it doesn't repeat. Add caption metadata below each frame (uppercase mono "Plate 01" + italic serif title).