Tunnel Vision
Infinite tunnel effect with scaling rings moving through 3D space.
Main Features of Tunnel Vision
How to Use Tunnel Vision in Next.js
Installation Guide for Tunnel Vision
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
ringCount | number | 5 | Number of rings in the tunnel |
backgroundColor | string | bg-zinc-950 | Background color of the component |
perspective | string | perspective-500 | CSS perspective value for 3D effect |
ringSize | number | 300 | Base size of the rings |
ringBorderColor | string | border-zinc-500/30 | Border color of the rings |
text | string | WARP | Text displayed in the center |
textColor | string | text-white | Color of the text |
textSize | string | text-4xl | Size of the text |
initialZ | number | -1000 | Initial Z position of rings |
finalZ | number | 500 | Final Z position of rings |
animationDuration | number | 4 | Animation duration in seconds |
delayMultiplier | number | 0.8 | Delay multiplier between rings |
scaleRange | [number, number] | [0.5, 1.5] | Scale range for rings |
textPulseDuration | number | 2 | Text pulse animation duration |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for artistic portfolios, experimental startup landing pages, and cinematic web experiences. This production-ready React UI component is perfect for intro sequences where you want to draw the user 'into' your site's world.
Best Practices
To follow React best practices, ensure the `animationDuration` is slow enough to avoid motion sickness while still maintaining rhythm. Maintain consistent spacing within your design system by using the `perspective` prop to match other 3D components on your site. Optimize for performance by using a reasonable `ringCount` (e.g., 5-8).
Why This Component Matters in Modern UI Development
Infinite motion is a powerful tool for building immersive modern UI development experiences. This reusable React component gives developers a way to implement the 'dolly zoom' effect in a 2D space, adding incredible depth to your real-world application architecture.
Frequently Asked Questions
QCan I put a video in the center?
Yes, the center of the tunnel is a standard React container where you can place text, videos, or even other components.
QHow do I control the depth?
The `initialZ` and `finalZ` props define the start and end of each ring's journey through 3D space.
QDoes the text pulse automatically?
Yes, there is a built-in `textPulseDuration` prop to keep the center element alive and engaging.