Animations & Motion
Tunnel Vision
Infinite tunnel effect with scaling rings moving through 3D space.
3dtransformtunnelringsinfinite
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 |