Background, media, gradient, texture, category, year, title and call to action all slide at different rates across a card that leans no more than five degrees. The picture drifts the other way inside its own frame, so the frame reads as a window rather than a crop; the sheen follows the cursor across the glass. Click and the case study rises from the bottom. On a phone the lean is off and a press is what answers instead.
A project card built out of eight layers that answer the cursor at eight different rates, on a plane that leans between three and five degrees. Internal parallax on the media, a reflection that follows the pointer, a gradient and a CSS texture over it, and an optional case study that rises from the bottom on a click. Image or video, with video paused whenever the card is off screen.
Download the componentOne Code File. React and Framer only.
Reduced motion and static preview included.