Motion Design System
Motion Design Patterns
Standardized interaction patterns with second-order spring specifications, accessibility guardrails, and production implementation code.
Buttonsk:480 c:24 m:0.9
Elastic Tactile Button Recoil
Spring click feedback with scale compression and zero layout shift.
<motion.button whileTap={{ scale: 0.92 }} transition={{ type: "spring", stiffness: 480, damping: 24 }} />Cardsk:350 c:28 m:1
Directional Swipe-to-Dismiss Card
Multi-touch drag resistance with velocity threshold ejection.
const gesture = Gesture.Pan().onUpdate(e => { translationX.value = e.translationX; });Navigationk:420 c:30 m:0.8
Floating macOS-Style Dock Magnification
Continuous distance-based scale transformation across adjacent icons.
const scale = interpolate(distance, [-100, 0, 100], [1, 1.45, 1], Extrapolate.CLAMP);
Sheetsk:320 c:26 m:1.2
Interactive Multi-Snap Bottom Sheet
Three-state detent sheet (collapsed, mid, full) with rubber-band resistance.
useSnapSheet({ snapPoints: ['25%', '50%', '90%'], spring: { stiffness: 320, damping: 26 } });Gesturesk:500 c:32 m:1
Spatial Pinch-to-Zoom Focal Recoil
Two-finger focal point scaling with boundary collision snap-back.
Gesture.Pinch().onUpdate(e => { scale.value = e.scale; focalX.value = e.focalX; });Loadersk:220 c:18 m:1.5
Harmonic Kinetic Ring Loader
Continuous spring rotation avoiding linear robotic motion fatigue.
withRepeat(withSpring(360, { stiffness: 220, damping: 18 }), -1, true);Listsk:400 c:28 m:1.1
Staggered Inertial Reorder List
Spring layout reordering when list items change position or filter.
<LayoutGroup>{items.map(item => <motion.li layout key={item.id} />)}</LayoutGroup>Parallaxk:280 c:22 m:1.3
Gyroscope & Mouse Spatial Parallax Tilt
Dual-axis perspective projection tracking pointer velocity.
transform: perspective(1000px) rotateX(${tiltY}deg) rotateY(${tiltX}deg);