AnimBits is a collection animated UI components for React that use Framer Motion. The components provided include buttons, cards, text, icons, lists, loaders, and page transitions, animation hooks all of which have general-purpose effects that are not flashy and easy on the eyes, making them easy to use.
Detailed toast notification with slide-in animation, icon, and auto-dismiss progress bar
Card with background image zoom on hover
Animated height bars loader
Text that blurs in word by word or character by character
An animated gradient border effect that travels around a container
Demo for the Border Beam component
Button with animated gradient border
Continuous bouncing animation for icons
One-shot bounce animation for icons with configurable triggers
Scroll-driven text reveal with precision blur and spring physics
Bouncing dots loader
Smoothly expand a card into a detail view with multiple animation styles.
Button with fade-in entrance animation
Card with fade-in animation on mount
Entrance animation with fade effect for icons
Text that fades in word by word or character by character
Card with 3D flip animation on hover
Button with glow effect on hover
Organic merging blobs animation
Text with animated gradient effect
A card with grayscale to color transition effect on hover.
Continuous heartbeat rhythm animation for icons
Card with glow effect on hover
Card that lifts with shadow on hover
Text with a dynamic, animated image mask background.
The index hook.
Button that lifts up on hover
A stunning, smooth-scrolling 3D carousel inspired by Linear.
A liquid-style progress bar that fills vertically.
Button with cursor-following magnetic attraction effect
A physics-based drawer with magnetic snap points
Demo for the Magnetic Drawer component
An icon that morphs between different states (e.g., play → pause).
Shape-shifting morphing animation
Spinning particles in orbit animation
Page transition component with fade effect using View Transitions API.
Navigation link component with View Transitions API support.
Page transition component with slide effect using View Transitions API.
Card with 3D parallax tilt effect and depth
One-shot pop effect (scale from 0 to 1) for icons
Button with press-down effect on tap
Continuous pulsing animation for icons
Pulsing circle loader
(No description)
A smooth, scaling dock of reaction emojis with magnification effect
Demo for the Reaction Dock component
Button with touch-aware ripple effect on click
One-shot 360° rotation animation for icons