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 @compronents/threejs-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 | { 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