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.
Card with scale-in animation on mount
Entrance animation with scale effect for icons
Hacker-style text scramble decode animation
One-shot shake animation (horizontal shake) for icons
A trigger that morphs into a modal with multiple animation styles.
Text with gradient shimmer sweep animation
Button with shine sweep effect on hover
Shimmer skeleton loader for content placeholders
Button with slide-in entrance animation
Card that slides in from any direction on mount
List with staggered slide-in animation for items
Text that slides up word by word or character by character
Continuous rotation animation for icons
Circular spinning loader
Text reveals with vertical split effect
An interactive card with a spotlight effect.
Interactive card with mouse-tracking spotlight effect
Demo for the Spotlight Card component
List with staggered fade-in animation for items
SVG path stroke drawing animation for icons
SVG path drawing animation that reveals text letter by letter with stroke animation
A deck of interactive cards with swipe gestures
Demo for the Swipeable Stack component
Animated tab navigation with multiple visual styles.
A smooth, hand-drawn marker highlight animation for text.
Demo for the Text Highlight component.
Circular ripple animation for theme toggle using View Transitions API.
Bottom to top slide animation for theme toggle using View Transitions API.
Left to right slide animation for theme toggle using View Transitions API.
Right to left slide animation for theme toggle using View Transitions API.
Top to bottom slide animation for theme toggle using View Transitions API.
Card with mouse-tracking tilt effect
Text with typewriter effect and optional blinking cursor
The use-bounce hook.
The use-fade-in hook.
The use-hover-glow hook.
The use-hover-lift hook.
The use-magnetic hook.
The use-parallax-tilt hook.
The use-press hook.
The use-pulse hook.
The use-scale-in hook.
The use-scramble hook.
The use-shimmer hook.
The use-slide-in hook.
The use-stroke-draw hook.
The use-word-carousel hook.
Smoothly rearrange items with multiple animation styles when switching views.