Three.js Infinite Slider
A vertical WebGL image loop with velocity distortion. Drag, wheel, and touch input move a wrapped plane stack while mesh vertices bend forward during fast motion and the active title tracks the nearest frame.
npx shadcn@latest add https://ui.aryank.space/r/threejs-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 | { name: string; image: string }[] | 10 Compronents-hosted JPGs | Named texture set used by the infinite stack. |
| minHeight / maxHeight / aspectRatio | number | 1 / 1.5 / 1.5 | Plane sizing range in world units. |
| distortionStrength | number | 2.5 | Strength multiplier for velocity-based vertex bending. |
slidesasset-urlSlide names and texture URLs mapped onto the WebGL planes.
distortionStrengthtupleHow far the mesh bends when wheel or drag input spikes.
three