Vortex Tunnel
Scaling circle creates a tunnel effect revealing content at the center.
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 |
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
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.
FAQ
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.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.