PRO

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.

Component

Experiment 444

Scroll to advance

Install
npx shadcn@latest add @compronents/shader-warp-slider

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
API
PropTypeDefaultDescription
slidesShaderSlide[]7 BLANK projectsTitle, link, and image per slide. The set wraps, so scrolling never reaches an end.
brand / navLinks / socials / footerLeft / footerRightstring / string[]BLANK copyChrome around the slider.
Customize
slidestext

Slide images, titles, and links.

Dependencies
three