Z-Axis Tunnel
Infinity scroll effect where you scroll into the screen with 3D layers.
Main Features of Z-Axis Tunnel
How to Use Z-Axis Tunnel in Next.js
Installation Guide for Z-Axis Tunnel
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
layerCount | number | 5 | Number of layers |
backgroundColor | string | bg-black | Background color of the component |
perspective | string | perspective-[100px] | CSS perspective value |
containerHeight | string | h-[400vh] | Height of the container |
text | string | WARP | Text displayed |
textColor | string | text-white | Color of the text |
textSize | string | text-9xl | Size of the text |
zStartOffset | number | -100 | Starting Z offset |
zEnd | number | 100 | Ending Z position |
zStep | number | 50 | Z step between layers |
rotationMultiplier | number | 45 | Rotation multiplier |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for immersive storytelling, sci-fi themed landing pages, and cinematic Next.js portfolios. Use this React component to create a high-impact 'warp' effect where the user feels like they are traveling through infinite layers of content.
Best Practices
Maintain consistent spacing within your design system by ensuring the `zStep` creates a clear sense of depth. Follow React best practices by providing high-quality images that work well with 3D scaling and rotation. Optimize for performance by limiting the `layerCount` to ensure smooth canvas or DOM rendering.
Why This Component Matters in Modern UI Development
Z-axis motion and tunnel zooms are a staple of premium modern UI development. This production-ready component provides a robust implementation of complex 3D perspective, adding a layer of polish and semantic authority to your real-world application architecture.
Frequently Asked Questions
QHow many images can I add?
The component is optimized for 3-7 layers. You can add more, but be mindful of browser memory usage for high-resolution images.
QCan I adjust the rotation speed?
Yes, the `rotationMultiplier` prop allows you to make the tunnel spiral gently or spin rapidly as the user scrolls.
QIs it responsive?
Yes, the perspective and scaling are relative to the viewport, ensuring a consistent 'warp' experience on all devices.