Bending Carousel is a draggable media slider that reacts to motion. Items sit flat when idle, and as you drag, the entire row bends along a gaussian curve — the direction and depth of the bend follow the velocity of your finger or cursor. When you release, the carousel snaps to the nearest item with a velocity-projected tween, and the bend recovers independently so the surface flattens the instant you let go.
Built on WebGL for smooth 60fps performance, with Three.js bundled directly so nothing loads at runtime. The animation loop automatically pauses when the component scrolls out of view, and videos stop playing when they're not near the centre — so even long pages stay snappy.
Features
- Images and videos as item types, mixable in a single carousel
- Per-item links that open when the centred item is tapped (with new-tab toggle)
- Infinite loop or bounded mode with rubberband overshoot
- Horizontal and vertical orientation
- Directional bend (flips with drag direction) or symmetric bulge
- Responsive sizing — set item width and height in pixels or percent of viewport
- Optional aspect-ratio lock so items never distort on wide or tall screens
- Centre scale emphasis, fade edges, corner radius
- Fine-grained control over drag resistance, smoothing, snap behaviour, and bend recovery speed
- Native Framer ResponsiveImage support with alt text and srcSet
- Proper static fallback for canvas preview and export
Customisation
Every aspect of the motion is adjustable:
bend height, bend width, bend sensitivity, bend recovery duration, drag resistance, drag smoothing, centre scale, field of view, and more.
If you want a snappy, editorial feel, drop the recovery to 0.1 seconds and raise the hill height. If you want a softer, floatier feel, dial smoothing up and keep the recovery around 0.3.
Performance
The component uses IntersectionObserver to pause the WebGL loop when it leaves the viewport, and automatically limits video playback to items adjacent to the centre. Three.js is bundled through the package rather than loaded from a CDN, so the reviewed code matches what ships to production.
Use it for portfolio showcases, project galleries, product carousels, editorial sliders, or anywhere you want interactive media to feel tactile instead of static.
Konstantin Nikolaev
