3D Perspective
3D tilt perspective drag card lightbox.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?q=80&w=2000&auto=format&fit=crop | Main image source URL. |
| backgroundColor | string | #cbd5e1 | Page background color. |
When to Use
Excellent for high-end portfolios and campaigns that want a physical, tactile '3D Perspective' experience. The drag-to-tilt interaction makes it memorable.
Best Practices
Use portrait or square images for the best 3D card proportions. The tilt effect is most dramatic with high-contrast imagery.
Why This Component Matters
Perspective-based interactions communicate technical sophistication and craft. This production-ready Uilora template creates a physical feeling in a digital interface.
FAQ
QHow does the tilt work?
Drag the card in any direction — Framer Motion useMotionValue tracks x/y position and maps it to rotateX/rotateY transforms with perspective-1000px.
QDoes it snap back?
Yes — releasing the drag snaps x and y back to 0 via spring physics.
QIs it mobile responsive?
The card scales to max-w-[90vw] on mobile. Touch drag works the same as mouse drag.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.