Depth Parallax
Carousel with depth parallax scrolling effects.
Main Features of Depth Parallax
How to Use Depth Parallax in Next.js
Installation Guide for Depth Parallax
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [url1, url2, ...] | Array of image URLs to display in the carousel. |
labels | string[] | [] | Optional array of labels for each slide (overrides default 'SLIDE 0X' format). |
defaultIndex | number | 0 | Initial active slide index. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #000000 | Background color of the carousel container (hex, rgb, or hsl). |
borderRadius | string | 1rem | Border radius of the container (CSS value). |
imageOpacity | number | 0.6 | Opacity of background images (0-1). |
textColor | string | #ffffff | Color of slide labels (hex, rgb, or hsl). |
buttonBgColor | string | rgba(255,255,255,0.2) | Background color of navigation buttons (hex, rgb, or hsl). |
buttonHoverBgColor | string | rgba(255,255,255,0.4) | Background color of buttons on hover (hex, rgb, or hsl). |
buttonTextColor | string | #ffffff | Text/icon color of buttons (hex, rgb, or hsl). |
buttonBorderRadius | string | 9999px | Border radius of buttons (CSS value). |
transitionDuration | number | 0.8 | Duration of slide transitions in seconds. |
height | string | 16rem | Height of the carousel container (CSS value). |
maxWidth | string | 28rem | Maximum width of the carousel container (CSS value). |
Related Components
When to Use
Excellent for luxury brand landing pages, cinematic portfolios, and Next.js applications that want a meaningful 'Depth' aesthetic. Use this carousel to provide immersive image exploration with subtle parallax layers and glow effects.
Best Practices
Maintain consistent spacing within your design system by using it for high-fidelity focal imagery. Follow React best practices by pairing this with sharp, technical typography. Optimize for performance by managed the image opacity renders.
Why This Component Matters in Modern UI Development
Depth-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 the 'Depth' work?
The component uses localized scale offsets and layout-id transitions to move the background layers at different speeds, creating a high-fidelity 'opening' 3D effect.
QCan I adjust the parallax intensity?
Absolutely, you can customize the Framer Motion transition properties to adjust how dramatically the images scale and move during scrolling.
QIs it mobile responsive?
The depth scales and typographic scales adapt for mobile, ensuring the objective clarity remains consistent on high-density mobile screens.