---
name: "@animbits"
slug: "animbits"
description: "Production-ready Framer Motion animation component library for React (Next.js 15, TypeScript 5.9). Ships 50+ copy-paste animation components organized into: Icons (heartbeat, pulse, bounce, spin, wiggle, shake, pop, rotate, stroke-draw, fade-in, scale-in), Buttons (lift, ripple, magnetic, glow), Cards, Loaders, Lists, and Page Transitions, plus animation hooks. All components respect prefers-reduced-motion. Install via shadcn CLI. Free, MIT-licensed, dark-mode ready. Use for: adding tasteful, non-flashy micro-interactions to existing components — particularly icons and buttons — in Next.js or Vite projects."
category: "Animated components"
tags: ["aesthetic", "animation", "backgrounds", "buttons", "cards", "design-system", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "overlays", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "Garvit1000"
website: "https://animbits.dev"
github: "https://github.com/Garvit1000/AnimBits"
registry: "https://animbits.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 32
component_count: 99
generated_at: "2026-07-28T08:00:50.948Z"
---

# @animbits

Production-ready Framer Motion animation component library for React (Next.js 15, TypeScript 5.9). Ships 50+ copy-paste animation components organized into: Icons (heartbeat, pulse, bounce, spin, wiggle, shake, pop, rotate, stroke-draw, fade-in, scale-in), Buttons (lift, ripple, magnetic, glow), Cards, Loaders, Lists, and Page Transitions, plus animation hooks. All components respect prefers-reduced-motion. Install via shadcn CLI. Free, MIT-licensed, dark-mode ready. Use for: adding tasteful, non-flashy micro-interactions to existing components — particularly icons and buttons — in Next.js or Vite projects.

## Links

- Website: https://animbits.dev
- GitHub: https://github.com/Garvit1000/AnimBits
- Registry JSON: https://animbits.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/animbits
- This file: https://sh4dcn.vercel.app/md/animbits.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://animbits.dev/r/registry.json
pnpm dlx shadcn@latest add https://animbits.dev/r/registry.json
bunx shadcn@latest add https://animbits.dev/r/registry.json
# clone the source repo
git clone https://github.com/Garvit1000/AnimBits.git
# fetch the raw registry index
curl -s https://animbits.dev/r/registry.json
```

## Components (99)

| name | type | description | install |
| --- | --- | --- | --- |
| hooks-use-hover-lift | registry:lib | The use-hover-lift hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-hover-lift.json` |
| hooks-use-hover-glow | registry:lib | The use-hover-glow hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-hover-glow.json` |
| hooks-use-press | registry:lib | The use-press hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-press.json` |
| hooks-use-fade-in | registry:lib | The use-fade-in hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-fade-in.json` |
| hooks-use-scale-in | registry:lib | The use-scale-in hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-scale-in.json` |
| hooks-use-slide-in | registry:lib | The use-slide-in hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-slide-in.json` |
| hooks-use-pulse | registry:lib | The use-pulse hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-pulse.json` |
| hooks-use-bounce | registry:lib | The use-bounce hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-bounce.json` |
| hooks-use-shimmer | registry:lib | The use-shimmer hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-shimmer.json` |
| hooks-use-scramble | registry:lib | The use-scramble hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-scramble.json` |
| hooks-use-word-carousel | registry:lib | The use-word-carousel hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-word-carousel.json` |
| hooks-use-magnetic | registry:lib | The use-magnetic hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-magnetic.json` |
| hooks-use-parallax-tilt | registry:lib | The use-parallax-tilt hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-parallax-tilt.json` |
| hooks-use-stroke-draw | registry:lib | The use-stroke-draw hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-use-stroke-draw.json` |
| hooks-index | registry:lib | The index hook. | `npx shadcn@latest add https://animbits.dev/r/hooks-index.json` |
| icons-pulse | registry:component | Continuous pulsing animation for icons | `npx shadcn@latest add https://animbits.dev/r/icons-pulse.json` |
| icons-bounce | registry:component | One-shot bounce animation for icons with configurable triggers | `npx shadcn@latest add https://animbits.dev/r/icons-bounce.json` |
| icons-bounce-continuous | registry:component | Continuous bouncing animation for icons | `npx shadcn@latest add https://animbits.dev/r/icons-bounce-continuous.json` |
| icons-spin | registry:component | Continuous rotation animation for icons | `npx shadcn@latest add https://animbits.dev/r/icons-spin.json` |
| icons-wiggle | registry:component | One-shot wiggle animation (rotate left-right) for icons | `npx shadcn@latest add https://animbits.dev/r/icons-wiggle.json` |
| icons-shake | registry:component | One-shot shake animation (horizontal shake) for icons | `npx shadcn@latest add https://animbits.dev/r/icons-shake.json` |
| icons-heartbeat | registry:component | Continuous heartbeat rhythm animation for icons | `npx shadcn@latest add https://animbits.dev/r/icons-heartbeat.json` |
| icons-fade-in | registry:component | Entrance animation with fade effect for icons | `npx shadcn@latest add https://animbits.dev/r/icons-fade-in.json` |
| icons-scale-in | registry:component | Entrance animation with scale effect for icons | `npx shadcn@latest add https://animbits.dev/r/icons-scale-in.json` |
| icons-pop | registry:component | One-shot pop effect (scale from 0 to 1) for icons | `npx shadcn@latest add https://animbits.dev/r/icons-pop.json` |
| icons-rotate | registry:component | One-shot 360° rotation animation for icons | `npx shadcn@latest add https://animbits.dev/r/icons-rotate.json` |
| icons-stroke-draw | registry:component | SVG path stroke drawing animation for icons | `npx shadcn@latest add https://animbits.dev/r/icons-stroke-draw.json` |
| specials-reaction-dock | registry:component | A smooth, scaling dock of reaction emojis with magnification effect | `npx shadcn@latest add https://animbits.dev/r/specials-reaction-dock.json` |
| specials-reaction-dock-demo | registry:component | Demo for the Reaction Dock component | `npx shadcn@latest add https://animbits.dev/r/specials-reaction-dock-demo.json` |
| specials-animated-toast | registry:component | Detailed toast notification with slide-in animation, icon, and auto-dismiss progress bar | `npx shadcn@latest add https://animbits.dev/r/specials-animated-toast.json` |
| spotlight-card | registry:ui | An interactive card with a spotlight effect. | `npx shadcn@latest add https://animbits.dev/r/spotlight-card.json` |
| reaction-button | registry:ui | — | `npx shadcn@latest add https://animbits.dev/r/reaction-button.json` |
| specials-border-beam | registry:component | An animated gradient border effect that travels around a container | `npx shadcn@latest add https://animbits.dev/r/specials-border-beam.json` |
| specials-border-beam-demo | registry:component | Demo for the Border Beam component | `npx shadcn@latest add https://animbits.dev/r/specials-border-beam-demo.json` |
| buttons-press | registry:component | Button with press-down effect on tap | `npx shadcn@latest add https://animbits.dev/r/buttons-press.json` |
| buttons-glow | registry:component | Button with glow effect on hover | `npx shadcn@latest add https://animbits.dev/r/buttons-glow.json` |
| buttons-lift | registry:component | Button that lifts up on hover | `npx shadcn@latest add https://animbits.dev/r/buttons-lift.json` |
| buttons-shine | registry:component | Button with shine sweep effect on hover | `npx shadcn@latest add https://animbits.dev/r/buttons-shine.json` |
| buttons-fade-in | registry:component | Button with fade-in entrance animation | `npx shadcn@latest add https://animbits.dev/r/buttons-fade-in.json` |
| buttons-slide-in | registry:component | Button with slide-in entrance animation | `npx shadcn@latest add https://animbits.dev/r/buttons-slide-in.json` |
| buttons-ripple | registry:component | Button with touch-aware ripple effect on click | `npx shadcn@latest add https://animbits.dev/r/buttons-ripple.json` |
| buttons-magnetic | registry:component | Button with cursor-following magnetic attraction effect | `npx shadcn@latest add https://animbits.dev/r/buttons-magnetic.json` |
| buttons-border-gradient | registry:component | Button with animated gradient border | `npx shadcn@latest add https://animbits.dev/r/buttons-border-gradient.json` |
| cards-hover-lift | registry:component | Card that lifts with shadow on hover | `npx shadcn@latest add https://animbits.dev/r/cards-hover-lift.json` |
| cards-hover-glow | registry:component | Card with glow effect on hover | `npx shadcn@latest add https://animbits.dev/r/cards-hover-glow.json` |
| cards-fade-in | registry:component | Card with fade-in animation on mount | `npx shadcn@latest add https://animbits.dev/r/cards-fade-in.json` |
| cards-scale-in | registry:component | Card with scale-in animation on mount | `npx shadcn@latest add https://animbits.dev/r/cards-scale-in.json` |
| cards-slide-in | registry:component | Card that slides in from any direction on mount | `npx shadcn@latest add https://animbits.dev/r/cards-slide-in.json` |
| cards-flip | registry:component | Card with 3D flip animation on hover | `npx shadcn@latest add https://animbits.dev/r/cards-flip.json` |
| cards-tilt | registry:component | Card with mouse-tracking tilt effect | `npx shadcn@latest add https://animbits.dev/r/cards-tilt.json` |
| cards-parallax-tilt | registry:component | Card with 3D parallax tilt effect and depth | `npx shadcn@latest add https://animbits.dev/r/cards-parallax-tilt.json` |
| cards-background-zoom | registry:component | Card with background image zoom on hover | `npx shadcn@latest add https://animbits.dev/r/cards-background-zoom.json` |
| text-fade-in | registry:component | Text that fades in word by word or character by character | `npx shadcn@latest add https://animbits.dev/r/text-fade-in.json` |
| text-slide-up | registry:component | Text that slides up word by word or character by character | `npx shadcn@latest add https://animbits.dev/r/text-slide-up.json` |
| text-typewriter | registry:component | Text with typewriter effect and optional blinking cursor | `npx shadcn@latest add https://animbits.dev/r/text-typewriter.json` |
| text-gradient | registry:component | Text with animated gradient effect | `npx shadcn@latest add https://animbits.dev/r/text-gradient.json` |
| text-blur-in | registry:component | Text that blurs in word by word or character by character | `npx shadcn@latest add https://animbits.dev/r/text-blur-in.json` |
| text-dia | registry:component | Scroll-driven text reveal with precision blur and spring physics | `npx shadcn@latest add https://animbits.dev/r/text-dia.json` |
| text-shimmer | registry:component | Text with gradient shimmer sweep animation | `npx shadcn@latest add https://animbits.dev/r/text-shimmer.json` |
| text-scramble | registry:component | Hacker-style text scramble decode animation | `npx shadcn@latest add https://animbits.dev/r/text-scramble.json` |
| text-word-carousel | registry:component | Rotating word carousel animation | `npx shadcn@latest add https://animbits.dev/r/text-word-carousel.json` |
| text-split-reveal | registry:component | Text reveals with vertical split effect | `npx shadcn@latest add https://animbits.dev/r/text-split-reveal.json` |
| text-svg-text-draw | registry:component | SVG path drawing animation that reveals text letter by letter with stroke animation | `npx shadcn@latest add https://animbits.dev/r/text-svg-text-draw.json` |
| loaders-spinner | registry:component | Circular spinning loader | `npx shadcn@latest add https://animbits.dev/r/loaders-spinner.json` |
| loaders-dots | registry:component | Bouncing dots loader | `npx shadcn@latest add https://animbits.dev/r/loaders-dots.json` |
| loaders-bars | registry:component | Animated height bars loader | `npx shadcn@latest add https://animbits.dev/r/loaders-bars.json` |
| loaders-pulse | registry:component | Pulsing circle loader | `npx shadcn@latest add https://animbits.dev/r/loaders-pulse.json` |
| loaders-skeleton | registry:component | Shimmer skeleton loader for content placeholders | `npx shadcn@latest add https://animbits.dev/r/loaders-skeleton.json` |
| loaders-orbit | registry:component | Spinning particles in orbit animation | `npx shadcn@latest add https://animbits.dev/r/loaders-orbit.json` |
| loaders-gooey-blobs | registry:component | Organic merging blobs animation | `npx shadcn@latest add https://animbits.dev/r/loaders-gooey-blobs.json` |
| loaders-morphing | registry:component | Shape-shifting morphing animation | `npx shadcn@latest add https://animbits.dev/r/loaders-morphing.json` |
| lists-slide-in | registry:component | List with staggered slide-in animation for items | `npx shadcn@latest add https://animbits.dev/r/lists-slide-in.json` |
| lists-stagger-fade | registry:component | List with staggered fade-in animation for items | `npx shadcn@latest add https://animbits.dev/r/lists-stagger-fade.json` |
| icons-morph | registry:component | An icon that morphs between different states (e.g., play → pause). | `npx shadcn@latest add https://animbits.dev/r/icons-morph.json` |
| cards-grayscale | registry:component | A card with grayscale to color transition effect on hover. | `npx shadcn@latest add https://animbits.dev/r/cards-grayscale.json` |
| loaders-liquid-progress | registry:component | A liquid-style progress bar that fills vertically. | `npx shadcn@latest add https://animbits.dev/r/loaders-liquid-progress.json` |
| pages-page-transition-fade | registry:component | Page transition component with fade effect using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/pages-page-transition-fade.json` |
| pages-page-transition-link | registry:component | Navigation link component with View Transitions API support. | `npx shadcn@latest add https://animbits.dev/r/pages-page-transition-link.json` |
| pages-page-transition-slide | registry:component | Page transition component with slide effect using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/pages-page-transition-slide.json` |
| transitions-shared-modal | registry:component | A trigger that morphs into a modal with multiple animation styles. | `npx shadcn@latest add https://animbits.dev/r/transitions-shared-modal.json` |
| transitions-expanding-card | registry:component | Smoothly expand a card into a detail view with multiple animation styles. | `npx shadcn@latest add https://animbits.dev/r/transitions-expanding-card.json` |
| transitions-tab-switcher | registry:component | Animated tab navigation with multiple visual styles. | `npx shadcn@latest add https://animbits.dev/r/transitions-tab-switcher.json` |
| transitions-view-toggle | registry:component | Smoothly rearrange items with multiple animation styles when switching views. | `npx shadcn@latest add https://animbits.dev/r/transitions-view-toggle.json` |
| transitions-zoom-hollow | registry:component | A beautiful text transition that zooms in with a hollow outline effect. | `npx shadcn@latest add https://animbits.dev/r/transitions-zoom-hollow.json` |
| transitions-theme-toggle-circular | registry:component | Circular ripple animation for theme toggle using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/transitions-theme-toggle-circular.json` |
| transitions-theme-toggle-slide-bottom | registry:component | Bottom to top slide animation for theme toggle using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/transitions-theme-toggle-slide-bottom.json` |
| transitions-theme-toggle-slide-left | registry:component | Left to right slide animation for theme toggle using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/transitions-theme-toggle-slide-left.json` |
| transitions-theme-toggle-slide-right | registry:component | Right to left slide animation for theme toggle using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/transitions-theme-toggle-slide-right.json` |
| transitions-theme-toggle-slide-top | registry:component | Top to bottom slide animation for theme toggle using View Transitions API. | `npx shadcn@latest add https://animbits.dev/r/transitions-theme-toggle-slide-top.json` |
| text-highlight | registry:component | A smooth, hand-drawn marker highlight animation for text. | `npx shadcn@latest add https://animbits.dev/r/text-highlight.json` |
| text-highlight-demo | registry:component | Demo for the Text Highlight component. | `npx shadcn@latest add https://animbits.dev/r/text-highlight-demo.json` |
| specials-swipeable-stack | registry:component | A deck of interactive cards with swipe gestures | `npx shadcn@latest add https://animbits.dev/r/specials-swipeable-stack.json` |
| specials-swipeable-stack-demo | registry:component | Demo for the Swipeable Stack component | `npx shadcn@latest add https://animbits.dev/r/specials-swipeable-stack-demo.json` |
| specials-magnetic-drawer | registry:component | A physics-based drawer with magnetic snap points | `npx shadcn@latest add https://animbits.dev/r/specials-magnetic-drawer.json` |
| specials-magnetic-drawer-demo | registry:component | Demo for the Magnetic Drawer component | `npx shadcn@latest add https://animbits.dev/r/specials-magnetic-drawer-demo.json` |
| specials-spotlight-card | registry:component | Interactive card with mouse-tracking spotlight effect | `npx shadcn@latest add https://animbits.dev/r/specials-spotlight-card.json` |
| specials-spotlight-card-demo | registry:component | Demo for the Spotlight Card component | `npx shadcn@latest add https://animbits.dev/r/specials-spotlight-card-demo.json` |
| image-text | registry:component | Text with a dynamic, animated image mask background. | `npx shadcn@latest add https://animbits.dev/r/image-text.json` |
| specials-linear-carousel | registry:component | A stunning, smooth-scrolling 3D carousel inspired by Linear. | `npx shadcn@latest add https://animbits.dev/r/specials-linear-carousel.json` |

## For AI agents

```text
You are adding components from @animbits to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/animbits.md) for the component list.
2. Fetch the machine-readable index: https://animbits.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: animbits).
```