react-spring-physics

SKILL.md

React Spring Physics

Physics-based animation for React applications combining React Spring's declarative spring animations with Popmotion's low-level physics utilities.

Overview

React Spring provides spring-physics animations that feel natural and interruptible. Unlike duration-based animations, springs calculate motion based on physical properties (mass, tension, friction), resulting in organic, realistic movement. Popmotion complements this with composable animation functions for keyframes, decay, and inertia.

When to use this skill:

Natural, physics-based UI animations

Gesture-driven interfaces (drag, swipe, scroll)

Interruptible animations that respond to user input mid-motion

Smooth transitions that maintain velocity across state changes

Momentum scrolling and inertia effects

Core libraries:

@react-spring/web - React hooks for spring animations

@react-spring/three - Three.js integration

popmotion - Low-level animation utilities (optional, for advanced use cases)