Shader Tunnel Slider
Cards flying at you down a CSS perspective corridor, over a raymarch-style tunnel drawn by a fragment shader. The backdrop is a single full-screen plane whose polar pattern is sin(angle / 0.1) times sin(20 / radius + t), which is what produces the ribbed funnel, and scroll is fed in as a separate uniform on top of elapsed time so scrolling accelerates the tunnel rather than only moving the cards. Each card starts far down the Z axis, alternates to the left or right of centre, and is pushed forward across the whole scroll while its opacity ramps only over the final step, so it fades up out of the dark instead of popping in. Three.js, GSAP ScrollTrigger, and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/shader-tunnel-slider.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 |
|---|---|---|---|
| slides | TunnelSlide[] | 10 BLANK cards | Title, id, and image. Travel distance is derived from the count, so adding cards lengthens the corridor rather than crowding it. |
| zStep | number | 2500 | Spacing between cards, and also the window over which a card fades up. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
brandtextWordmark in the centre of the nav.
zSteptextWorld units between two cards on the Z axis.
threegsaplenis