HomeGenerative Art & Algorithmic PatternsCarousel Slider Physics 2D: Spring-Damper Snap & Drag Inertia

Carousel Slider Physics 2D: Spring-Damper Snap & Drag Inertia

Interactive 2D carousel slider: drag the ring to spin it with real momentum, then watch a critically-damped spring snap it to the nearest slide. Tune friction, spring stiffness and damping ratio and watch the live response chart change from bouncy to snappy to sluggish.

Generative Art & Algorithmic Patterns2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-sliders ↗ Open standalone

Behind every smooth image slider or carousel is a small piece of applied physics: drag momentum that decays under friction, and a spring that pulls the resting position back to the nearest slide. This 2D simulator renders an 8-card carousel from above as an orbiting ring you can grab and spin — release it and it keeps turning under real rotational inertia, then a critically-damped spring snaps it to the nearest slide exactly the way native scroll-snap and app carousels do. Friction, spring stiffness and damping ratio are all live controls, with a scrolling response chart underneath so you can watch the same ring swing from a bouncy underdamped wobble to an instant critical snap to a slow overdamped drift, with autoplay demonstrating the identical mechanism driving itself.

⚙ Under the hood

Drag a 2D orbiting ring of cards viewed from above and feel real rotational momentum decay under friction, then watch a critically-damped spring snap it to the nearest slide -- the same physics behind CSS scroll-snap and native app carousels, plotted live on a scrolling response chart.

ui-physicscarouselspring-dampereasinggenerative-artinteraction-design2d-canvas

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)