InertiaGallery is one draggable motion.div and one MotionValue. Every slide's scale, opacity, and blur are useTransform chains reading that same value. There's no per-slide state, no onDrag re-render loop, and no manual momentum math. Framer's own animation loop drives all of it.

The whole strip is a single flex row wrapped in a masked, overflow-hidden viewport. x is the one MotionValue everything downstream reads, so dragging the track never touches React state.

The viewport pads each side by half the free space (measured with a ResizeObserver), which lets the first and last slide land dead center instead of pinned to an edge.

dragElastic: 0.16 lets the track travel a little past its constraints while you're still holding it, so the ends give a little instead of stopping hard. Release, and onDragEnd either commits the nearest slide (commit) or, with snap, animates x to it on a spring.

Stiffness 320 with damping 32 is tuned to slightly underdamp. The strip overshoots the target by a few pixels before it settles. mass: 0.9 keeps that overshoot small and barely visible.

Every slide runs the same three-curve chain off its own distance from center, computed from the shared x value with useTransform. None of it is per-slide state; it's a pure function re-evaluated on every frame x changes.

Because scale, opacity, and filter are all compositor properties, Framer can update every slide's falloff every frame without asking the browser to lay anything out, so the strip can be dragged at 60fps+ regardless of how many slides are off-screen.

Nothing here runs a requestAnimationFrame loop of its own. useTransform only recomputes when its input MotionValue changes, and x only changes while a drag or a settle animation is in flight. A gallery sitting still costs nothing beyond the one ResizeObserver watching the viewport.

One motion value, three distance curves, one settle spring. Throw the strip above, or use the buttons.