Entrance and scroll-triggered animations for React. Each one wraps your existing markup, so you can add motion without restructuring a component.
8 components · free and MIT-licensed · install with the shadcn CLI
Every animation component in the library, with the packages each one pulls in.
The AnimatedList component streams its children in one at a time, springing each new entry into place and pushing the older ones down until they fall out of the bottom of the list.
lucide-reactmotion
The Bounce component adds a playful, elastic animation to its children when they enter the viewport.
motion
The FadeIn component creates a smooth fade-in animation for its children when they enter the viewport.
motion
The FadeInUnblur component creates a smooth fade-in while unblurring animation for its children when they enter the viewport.
motion
The RotateIn component creates a smooth rotation animation for its children when they enter the viewport.
motion
The ScaleIn component creates a smooth scale-in animation for its children when they enter the viewport.
motion
The SmoothReveal component creates a smooth reveal animation for its children when they enter the viewport.
motion
The StaggerList component animates its children into view one after another when the list enters the viewport, without requiring any changes to the children themselves.
motion
Every component here is installable with the shadcn CLI, which also resolves its npm dependencies.
npx shadcn@latest add https://uibeats.com/r/animated-list.json