Carousel Slider Physics: Spring-Damper Snap & Drag Inertia

Carousel

Physics

Drag friction 2.5

Snap stiffness k 55

Damping ratio ζ 1.00

Autoplay interval 3.0s

Live State

Slide

1 / 8

Angular velocity

0.0°/s

Snap error (distance to target)

0.00°

How it works

The carousel is a rigid ring of cards at angle θ around the vertical axis. Dragging sets θ directly from pointer motion and records an angular velocity ω = Δθ/Δt. On release the ring keeps spinning under momentum, decaying like real rotational friction:

ω(t+dt) = ω(t) · e^(-friction · dt)

Once |ω| drops below a small threshold (or a Next/Prev/autoplay/dot click fires), the ring switches to a critically-damped spring that pulls θ to the nearest slide angle θ_target = 2π·round(θ/Δθ)/N — exactly the model behind CSS scroll-snap and native app carousels:

a = -k·(θ - θ_target) - c·ω
c = ζ · 2√k        (ζ=1 is critical damping: fastest snap, no overshoot)
ω += a·dt ;  θ += ω·dt

ζ < 1 (underdamped) — the slide overshoots and oscillates before settling, like a bouncy UI easing curve.
ζ = 1 (critical) — the fastest snap with zero overshoot, the "snappy" feel most sliders aim for.
ζ > 1 (overdamped) — a slow, syrupy settle with no bounce.
Autoplay advances the target slide index every interval and lets the same spring carry it there, just like an auto-advancing image slider.

Real-world relevance: this is the same spring-physics model used by iOS/Android scroll views, Framer Motion, and CSS scroll-snap-type to make dragged lists settle naturally instead of snapping instantly.

drag to spin · release to feel momentum

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.