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 https://ui.aryank.space/r/shader-warp-slider.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

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