Vortex Tunnel
Scaling circle creates a tunnel effect revealing content at the center.
Main Features of Vortex Tunnel
How to Use Vortex Tunnel in Next.js
Installation Guide for Vortex Tunnel
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1535382607908-17277b0c3608?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-neutral-900 | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
backgroundText | string | THE VOID | Background text displayed |
backgroundTextColor | string | text-neutral-800 | Color of background text |
backgroundTextSize | string | text-[10vw] | Size of background text |
portalSize | string | w-[10vw] h-[10vw] | Size of the portal |
portalColor | string | bg-blue-500 | Color of the portal |
portalShadow | string | shadow-[0_0_100px_rgba(0,255,255,0.5)] | Shadow of the portal |
innerImageWidth | string | w-[100vw] | Width of inner image |
innerImageHeight | string | h-[100vh] | Height of inner image |
innerImageOpacity | number | 0.5 | Opacity of inner image |
innerText | string | REALITY | Inner text displayed |
innerSubtext | string | Breached | Inner subtext displayed |
innerTextColor | string | text-black | Color of inner text |
innerTextSize | string | text-9xl | Size of inner text |
innerSubtextSize | string | text-2xl | Size of inner subtext |
scaleRange | [number, number] | [0, 20] | Scale range |
rotateRange | [number, number] | [0, 180] | Rotation range in degrees |
scrollOffset | [string, string] | ["start start", "end end"] | Scroll offset configuration |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for experimental brands, cinematic storytelling, and experimental modern web applications. Use this React component when you want to create a 'wormhole' effect that draws the user into a completely different visual reality as they scroll down.
Best Practices
Optimize for performance by ensuring the `innerImage` is not too heavy for multiple renders. Follow React best practices by setting a reasonable `scaleRange` to avoid extreme pixelation. Maintain scalable component architecture by using the `portalColor` to emphasize the breach point.
Why This Component Matters in Modern UI Development
Tunnel and vortex effects are powerful tools for immersive UI design. This reusable React component gives you a production-ready way to implement complex scaling and rotation transitions, helping you build a unique real-world application architecture.
Frequently Asked Questions
QCan I use video instead of an image?
Yes, the portal is a container that can hold any React element, including high-quality looped videos for an even more dynamic effect.
QIs the rotation speed adjustable?
The rotation is mapped to scroll progress, so the speed is determined by how fast the user scrolls and the `rotateRange` prop.
QHow large does the portal get?
By default, the portal scales up to 20x its original size, effectively 'swallowing' the screen to reveal the inner content.