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 @compronents/split-column-infinite-sliderInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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.