Scroll Tunnel 3D
An endless depth tunnel of images: photos ring an ellipse four at a time and stack back along the Z axis, while wheel, drag, and idle motion pull the camera forward through them. Each layer wraps in depth so the tunnel never ends, and a per-layer black overlay fogs frames in from the far end and out as they pass the lens. One requestAnimationFrame loop, no animation library.
npx shadcn@latest add https://ui.aryank.space/r/scroll-tunnel-3d.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 12 Compronents-hosted JPGs | Photos ringed four-to-a-layer along the tunnel. |
| title / caption | string | undefined | Optional HUD copy in the lower-left corner. |
| background | string | "#000000" | Tunnel background and depth-overlay color. |
| scrollSpeed / layerGap / lerp | number | 2 / 2500 / 0.07 | Input sensitivity, ring depth spacing (px), and smoothing. |
| radiusX / radiusY | number | 400 / 280 | Ellipse radii (px) the four images ring around each layer. |
| itemWidth / itemHeight | number | 180 / 220 | Size of each image card in the tunnel, in px. |
| perspective | number | 1000 | CSS perspective applied to the 3D scene, in px. |
| autoplay / autoplaySpeed | boolean / number | true / 6 | Idle forward drift so the tunnel moves before input. |
backgroundcolorTunnel backdrop and the color the depth overlay fades to.
title / captiontextOptional corner HUD copy laid over the tunnel.
scrollSpeed / layerGap / lerptextInput sensitivity, ring spacing, and follow smoothing.
imagesasset-urlTwelve photos hosted through https://ui.aryank.space/assets/scroll-tunnel-3d/img-1.jpg and the numbered set.