Shader Warp Slider
A wheel-driven slider where the transition happens in the fragment shader rather than in transforms. Both the outgoing and incoming textures are sampled on the same plane, split at the scroll position, so one image slides out as the next arrives with no second mesh. The vertex shader bows the plane by scroll velocity, bending the sides more than the top and bottom, so the frame flexes like film during a fast flick.
npx shadcn@latest add @compronents/shader-warp-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 | ShaderSlide[] | 7 BLANK projects | Title, link, and image per slide. The set wraps, so scrolling never reaches an end. |
| brand / navLinks / socials / footerLeft / footerRight | string / string[] | BLANK copy | Chrome around the slider. |
slidestextSlide images, titles, and links.
three