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 — dragging the track never touches React state:

The viewport pads each side by half the free space (measured with a ResizeObserver), which is what 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 — a small give, not a hard wall. 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, rather than arriving dead-on. mass: 0.9 keeps that overshoot small; it's felt, not seen.

Every slide runs the same three-curve chain off its own distance from center, computed from the shared x value with useTransform — nothing here 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 — the whole 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.