Depth Parallax
Carousel with depth parallax scrolling effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [url1, url2, ...] | Array of image URLs to display. |
| labels | string[] | [] | Optional labels for each slide. |
| defaultIndex | number | 0 | Initial active slide index. |
| containerBgColor | string | #000000 | Background color of the container. |
| height | string | 16rem | Height of the carousel container. |
| maxWidth | string | 28rem | Maximum width of the container. |
When to Use
Excellent for luxury brand landing pages, cinematic portfolios, and applications that want an immersive depth aesthetic.
Best Practices
Use high-contrast imagery to maximize the parallax depth effect. Keep label text short and bold.
Why This Component Matters
Depth-based parallax creates visual hierarchy that flat carousels cannot achieve — it signals premium craft to the viewer.
FAQ
QHow does the depth effect work?
Layers scale and translate at different rates during transitions, creating the illusion of spatial depth.
QCan I adjust the effect intensity?
Yes — customize the Framer Motion transition properties to control scale and translation distances.
QIs it mobile responsive?
Yes, the layout adapts for smaller screens while preserving the depth effect.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.