Shadcn.io is not affiliated with official shadcn/ui
3d Card
Mouse-tracking 3D tilt card with perspective transforms for React
Move your mouse and watch the card follow. This 3D tilt effect makes flat cards feel tangible—like you could reach in and grab them. The card tilts toward your cursor in real-time with that satisfying perspective shift. Elements inside can pop out at different depths on hover using translateZ, so your image lifts while the background stays put. It's the kind of polish that makes product cards, team profiles, and feature showcases feel premium. Works smooth because it's all CSS transforms—GPU accelerated, no layout thrashing.
Installation
Related Components
3D Pin
Map-pin style hover card
3D Marquee
Isometric image gallery
Magnetic
Cursor-following elements
Boxes
3D hoverable grid
FAQ
Was this page helpful?
Sign in to leave feedback.