Animations & Motion
Vortex Tunnel
Scaling circle creates a tunnel effect revealing content at the center.
scrollrevealvortextunnelscale
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 |