AnimBits

Production-Ready Animation Components for React

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

---

Features

• 50+ Animation Components - Icons, buttons, cards, loaders, transitions, and more
• One-Command Install - Use the shadcn CLI to add animations instantly
• Simple Prop API - Customize animations with intuitive props
• Zero Config - Works out of the box with Next.js, Vite, and more
• Fully Typed - Built with TypeScript for excellent developer experience
• Dark Mode Ready - All animations work seamlessly in light and dark themes
• Responsive - Optimized for all screen sizes
• Accessible - Respects prefers-reduced-motion settings

Quick Start

Installation

Install any animation component with a single command:

npx shadcn add https://animbits.dev/r/buttons-lift.json

Usage

import { LiftButton } from "@/components/animations/buttons/lift"

export default function App() {
  return (
    
      Hover me!
    
  )
}

That's it! No configuration, no setup, just beautiful animations.

Component Categories

Icons

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

Buttons

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

Cards

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

Text

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

Lists

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

Loaders

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

Transitions

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)

Hooks

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

Examples

Magnetic Button

import { MagneticButton } from "@/components/animations/buttons/magnetic"

  Magnetic Effect

Theme Toggle with Circular Ripple

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
    
  )
}

Parallax Tilt Card

import { CardParallaxTilt } from "@/components/animations/cards/parallax-tilt"

  
    Interactive Card
    Hover to see the 3D tilt effect
  

Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Local Setup

# 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

Testing Components Locally

# In your test project
npx shadcn add http://localhost:3000/r/buttons-lift.json

Contributing

Contributions are welcome! Whether it's:

• Bug reports
• Feature requests
• Documentation improvements
• New animation components

Please feel free to open an issue or submit a pull request.

Adding a New Component

1. Create your component in registry/new-york/animations/[category]/[name].tsx
2. Add the component entry to registry.json
3. Create documentation in content/docs/animations/[category]/[name].mdx
4. Run pnpm registry:build to generate the registry files
5. Test locally and submit a PR

License

MIT © Garvit Joshi

Acknowledgments

• Built with Next.js and Tailwind CSS
• Powered by Framer Motion
• CLI integration via shadcn/ui
• Documentation with Fumadocs

---

animbits.dev · @Garvit1000

Made with love for the React community