Drag & Throw

Fling cards around a bounded table. Momentum, elastic edges and spring snap-back.

★ showcaseMotion

How it works

drag + dragConstraints bound to the table ref; dragTransition converts release velocity into an inertia animation whose bounceStiffness/bounceDamping come from the Playground.

Performance

Pointer/drag values live in MotionValues — they update the DOM directly and never trigger a React render. Only transform and opacity are animated, so every frame is composite-only: no layout, no paint.

Accessibility & reduced motion

Cards are focusable buttons; arrow keys nudge them so the demo is usable without a pointer.

Playgroundspring

settle 0.73sovershoot 8%ζ 0.62

Stiffness260

Damping20

Mass1.00

Initial velocity0.00

Edge elasticity0.35

Throw power0.40

Export

transition={{ type: 'spring', stiffness: 260, damping: 20, mass: 1 }}