Installs all 84 components. Without our CLI, run instead.
animbits publishes a shadcn registry at animbits.dev, with 84 components installable through the shadcn CLI.
Copy a prompt for your agent, copy the install command, or open the docs that ship it.
Button with animated gradient border
Button with fade-in entrance animation
Button with glow effect on hover
Button that lifts up on hover
Button with cursor-following magnetic attraction effect
Button with press-down effect on tap
Button with touch-aware ripple effect on click
Button with shine sweep effect on hover
Button with slide-in entrance animation
Card with background image zoom on hover
Card with fade-in animation on mount
Card with 3D flip animation on hover
A card with grayscale to color transition effect on hover.
Card with glow effect on hover
Card that lifts with shadow on hover
Card with 3D parallax tilt effect and depth
Card with scale-in animation on mount
Card that slides in from any direction on mount
Card with mouse-tracking tilt effect
One-shot bounce animation for icons with configurable triggers
Continuous bouncing animation for icons
Entrance animation with fade effect for icons
Continuous heartbeat rhythm animation for icons
An icon that morphs between different states (e.g., play → pause).
One-shot pop effect (scale from 0 to 1) for icons
Continuous pulsing animation for icons
One-shot 360° rotation animation for icons
Entrance animation with scale effect for icons
One-shot shake animation (horizontal shake) for icons
Continuous rotation animation for icons
SVG path stroke drawing animation for icons
One-shot wiggle animation (rotate left-right) for icons
List with staggered slide-in animation for items
List with staggered fade-in animation for items
Bouncing dots loader
A liquid-style progress bar that fills vertically.
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.
Detailed toast notification with slide-in animation, icon, and auto-dismiss progress bar
An animated gradient border effect that travels around a container
Demo for the Border Beam component
A stunning, smooth-scrolling 3D carousel inspired by Linear.
A physics-based drawer with magnetic snap points
Demo for the Magnetic Drawer component
A smooth, scaling dock of reaction emojis with magnification effect
Demo for the Reaction Dock component
Interactive card with mouse-tracking spotlight effect
Demo for the Spotlight Card component
A deck of interactive cards with swipe gestures
Demo for the Swipeable Stack component
An interactive card with a spotlight effect.
Text that blurs in word by word or character by character
Text that fades in word by word or character by character
Text with animated gradient effect
A smooth, hand-drawn marker highlight animation for text.
Demo for the Text Highlight component.
Hacker-style text scramble decode animation
Text with gradient shimmer sweep animation
Text that slides up word by word or character by character
SVG path drawing animation that reveals text letter by letter with stroke animation
Text with typewriter effect and optional blinking cursor
Smoothly expand a card into a detail view with multiple animation styles.
A trigger that morphs into a modal with multiple animation styles.
Animated tab navigation with multiple visual styles.
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.
Smoothly rearrange items with multiple animation styles when switching views.
A beautiful text transition that zooms in with a hollow outline effect.
A beautifully crafted collection of copy-paste animation components powered by Framer Motion. Install with one command, customize with simple props.
Documentation · Browse Components · Report Bug
prefers-reduced-motion settingsInstall any animation component with a single command:
npx shadcn add https://animbits.dev/r/buttons-lift.json
import { LiftButton } from "@/components/animations/buttons/lift"
export default function App() {
return (
Hover me!
)
}
That's it! No configuration, no setup, just beautiful animations.
Bring your icons to life with smooth, performant animations.
npx shadcn add https://animbits.dev/r/icons-heartbeat.json
npx shadcn add https://animbits.dev/r/icons-pulse.json
npx shadcn add https://animbits.dev/r/icons-bounce.json
Available: Heartbeat, Pulse, Bounce, Spin, Wiggle, Shake, Pop, Rotate, Stroke Draw, Fade In, Scale In
Interactive button animations that enhance user experience.
npx shadcn add https://animbits.dev/r/buttons-ripple.json
npx shadcn add https://animbits.dev/r/buttons-magnetic.json
npx shadcn add https://animbits.dev/r/buttons-glow.json
Available: Ripple, Magnetic, Glow, Lift, Press, Shine, Border Gradient, Fade In, Slide In
Elegant card animations for modern interfaces.
npx shadcn add https://animbits.dev/r/cards-parallax-tilt.json
npx shadcn add https://animbits.dev/r/cards-hover-glow.json
npx shadcn add https://animbits.dev/r/cards-hover-lift.json
Available: Parallax Tilt, Hover Glow, Hover Lift, Fade In, Scale In, Slide In, Blur Fade, Grayscale
Eye-catching text animations and effects.
npx shadcn add https://animbits.dev/r/text-shimmer.json
npx shadcn add https://animbits.dev/r/text-scramble.json
npx shadcn add https://animbits.dev/r/text-word-carousel.json
Available: Shimmer, Scramble, Word Carousel, Gradient, Typewriter
Staggered animations for list items and grids.
npx shadcn add https://animbits.dev/r/lists-stagger-fade.json
npx shadcn add https://animbits.dev/r/lists-slide-in.json
Available: Stagger Fade, Slide In, Scale In, Blur Fade
Beautiful loading indicators for better UX.
npx shadcn add https://animbits.dev/r/loaders-orbit.json
npx shadcn add https://animbits.dev/r/loaders-morphing.json
npx shadcn add https://animbits.dev/r/loaders-gooey.json
Available: Orbit, Morphing, Gooey, Dots, Spinner, Pulse, Liquid Progress
Smooth page and theme transitions using View Transitions API.
npx shadcn add https://animbits.dev/r/transitions-theme-toggle-circular.json
npx shadcn add https://animbits.dev/r/pages-page-transition-fade.json
Available: Theme Toggle (Circular, Slide), Page Transitions (Fade, Slide)
Reusable animation hooks for custom components.
npx shadcn add https://animbits.dev/r/hooks-use-hover-lift.json
npx shadcn add https://animbits.dev/r/hooks-use-magnetic.json
Available: Hover Lift, Hover Glow, Magnetic, Parallax Tilt, Press, Fade In, Scale In, Slide In, and more
import { MagneticButton } from "@/components/animations/buttons/magnetic"
Magnetic Effect
import { ThemeToggleCircular } from "@/components/animations/transitions/theme-toggle-circular"
import { useTheme } from "next-themes"
export function ThemeToggle() {
const { setTheme } = useTheme()
return (
setTheme(theme === 'dark' ? 'light' : 'dark')}
speed={0.5}
blur={0}
>
Toggle Theme
)
}
import { CardParallaxTilt } from "@/components/animations/cards/parallax-tilt"
Interactive Card
Hover to see the 3D tilt effect
# Clone the repository
git clone https://github.com/Garvit1000/AnimBits.git
cd AnimBits
# Install dependencies
pnpm install
# Build the registry
pnpm registry:build
# Start the development server
pnpm dev
The site will be available at http://localhost:3000
# In your test project
npx shadcn add http://localhost:3000/r/buttons-lift.json
Contributions are welcome! Whether it's:
Please feel free to open an issue or submit a pull request.
registry/new-york/animations/[category]/[name].tsxregistry.jsoncontent/docs/animations/[category]/[name].mdxpnpm registry:build to generate the registry filesMIT © Garvit Joshi
Made with love for the React community
