A WebGL-powered image slider built with Three.js. Images scroll along a curved 3D surface and deform like cloth with dual-axis wave distortion driven by scroll velocity. Supports infinite looping, momentum physics, auto-play, and a built-in lightbox.
Drag — Scroll through images horizontally or vertically
Scroll wheel — Scroll through the slider
Hover — Card scales up and comes forward in Z-depth
Click — Open image in a full-screen lightbox with optional title and description
Wave distortion — Images bend like fabric when scrolling, responding to drag velocity
3D curved layout — Cards sit on a curved surface, creating natural depth as they move away from center
Cover-fit — Images fill their cards without stretching
Rounded corners — Smooth anti-aliased corner rounding
Edge fade — Cards gradually fade out at the viewport edges
Infinite wrapping — Cards loop seamlessly with no visible seam
Momentum scrolling — Drag and release to glide with configurable decay
Auto-play — Optional continuous scrolling at adjustable speed
Per-frame hover detection — Raycasting runs every frame so hover state updates correctly even while scrolling
Z-depth ordering — Cards closer to center render on top; hovered cards pop forward
Lightbox — Click any image to open a full-screen overlay with backdrop blur, optional title and description