Fluid motion,
built for React.
A lightweight, declarative library for springs, gestures, and exit animations. Silky 60fps motion with an API you'll actually enjoy writing.
npm i react-ui-animateA focused toolkit for motion
Powerful enough for complex interactions, simple enough to learn in an afternoon.
Declarative API
Animate with props like animate, hover, press, and view. No imperative timelines or boilerplate.
60fps Performance
Values update outside React’s render cycle, so motion stays smooth without triggering re-renders.
Gestures Built-in
First-class hooks for drag, move, scroll, and wheel let you craft rich, tactile interactions.
Presence & Exit
Animate components as they leave the DOM. Built for modals, tooltips, and dropdowns.
TypeScript First
Fully typed components, hooks, and utilities with autocomplete that guides you as you build.
Tiny & Tree-shakeable
Import only what you use. Side-effect free and optimized for modern bundlers.
How much this actually costs you
We built the same component with each library: a spring animation with hover and press gestures. Then we bundled it with esbuild and gzipped the output, with React excluded from the count in every case.
If your component only needs animation and no gestures, react-spring alone is smaller at 17.4 KB. It grows past react-ui-animate once you add @use-gesture/react for hover, press, or drag, which is why that combined weight is what's shown above. Numbers come from the public packages available when we ran this test and will shift as those projects release new versions, so treat them as a snapshot rather than a permanent guarantee. Full methodology and source is in our README.
Examples
Interactive patterns built with React UI Animate. Real source, not a mockup.
Read the docs