Split Column Infinite Slider
Two columns that scroll in opposite directions off one wheel. Each slide is revealed by a clip path growing from the bottom on the left and the top on the right, with a half percent overlap so no seam ever shows. Images drift against the reveal at 1.25 zoom so the drift never exposes an edge, and copy holds dead center through a short window before easing away on a smoothstep. Slides are built and destroyed around a three slide buffer, so the loop is endless without cloning the set.
npx shadcn@latest add https://ui.aryank.space/r/split-column-infinite-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 | SplitSlide[] | Five BLANK projects | Title, tag lines, accent color, link, and a separate image per column. |
| scrollSensitivity / smoothness / imageZoom | number | 1200 / 0.05 / 1.25 | Wheel divisor, lerp factor toward the target, and the image scale that hides the parallax drift. |
slidestextTitle, tags, accent, and the two column images.
None.