3D Perspective
3D tilt perspective card lightbox.
Main Features of 3D Perspective
How to Use 3D Perspective in Next.js
Installation Guide for 3D Perspective
Props
Customize the component with these 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. |
thumbnailImage | string | Optional thumbnail image URL (uses main image if not provided). | |
backgroundColor | string | #cbd5e1 | Background color (hex, rgb, or hsl). |
overlayColor | string | #0f172a | Overlay background color (hex, rgb, or hsl). |
title | string | Mountain Retreat | Title text displayed in lightbox. |
description | string | A serene escape into nature's embrace. | Description text displayed in lightbox. |
buttonText | string | Explore More | Button text. |
showShare | boolean | true | Whether to show the share button. |
Related Components
When to Use
Excellent for high-end fashion campaigns, award-winning portfolios, and Next.js applications that want a meaningful 'Perspective' aesthetic. Use this layout to communicate digital excellence and sophisticated storytelling through 3D modules.
Best Practices
Maintain consistent spacing within your design system by using it for focal narratives. Follow React best practices by pairing this with bold, professional typography. Optimize for performance by using efficient image textures.
Why This Component Matters in Modern UI Development
Perspective-based aesthetics communicate technical reliability, clarity, and timeless craft. This production-ready UI template helpsคุณ build an interface that feels organized and professional, reflecting a brand identity rooted in design purity.
Frequently Asked Questions
QHow does 'Tilt' work?
The component uses localized mouse coordinates to rotate the primary image card, creating a high-fidelity 'physical' 3D tilt effect into the heart of the project narrative.
QCan I adjust colors?
Yes, both the primary 'backgroundColor' and specific 'overlayColor' are fully configurable to match your brand's specific intensity (default: Slate).
QIs it mobile responsive?
The 3D scale and typographic scales adapt for mobile, ensuring the objective clarity remains consistent on high-density mobile screens.