HomeBookmarks
animbitsanimbits
animbits

animbits

ANby animbits
1component1Kviews84bookmarks

Installs all 84 components. Without our CLI, run instead.

Auto-indexed

animbits contents

  • Text Highlight

    Text Highlight

    • That's all 1 components

    About animbits

    animbits publishes a shadcn registry at animbits.dev, with 84 components installable through the shadcn CLI.

    Components
    84
    GitHub stars
    36
    Last commit
    Jun 7, 2026
    Repository
    Garvit1000/AnimBits

    Also in the animbits registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • Border Gradient Button

      buttons-border-gradient

      Button with animated gradient border

      motion1 file

    • Fade In Button

      buttons-fade-in

      Button with fade-in entrance animation

      motion2 files

    • Glow Button

      buttons-glow

      Button with glow effect on hover

      motion2 files

    • Lift Button

      buttons-lift

      Button that lifts up on hover

      motion2 files

    • Magnetic Button

      buttons-magnetic

      Button with cursor-following magnetic attraction effect

      motion2 files

    • Press Button

      buttons-press

      Button with press-down effect on tap

      motion2 files

    • Ripple Button

      buttons-ripple

      Button with touch-aware ripple effect on click

      motion1 file

    • Shine Button

      buttons-shine

      Button with shine sweep effect on hover

      motion1 file

    • Slide In Button

      buttons-slide-in

      Button with slide-in entrance animation

      motion2 files

    • Background Zoom Card

      cards-background-zoom

      Card with background image zoom on hover

      motion1 file

    • Fade In Card

      cards-fade-in

      Card with fade-in animation on mount

      motion1 file

    • Flip Card

      cards-flip

      Card with 3D flip animation on hover

      motion1 file

    • Grayscale Card

      cards-grayscale

      A card with grayscale to color transition effect on hover.

      motion1 file

    • Hover Glow Card

      cards-hover-glow

      Card with glow effect on hover

      motion2 files

    • Hover Lift Card

      cards-hover-lift

      Card that lifts with shadow on hover

      motion2 files

    • Parallax Tilt Card

      cards-parallax-tilt

      Card with 3D parallax tilt effect and depth

      motion2 files

    • Scale In Card

      cards-scale-in

      Card with scale-in animation on mount

      motion2 files

    • Slide In Card

      cards-slide-in

      Card that slides in from any direction on mount

      motion2 files

    • Tilt Card

      cards-tilt

      Card with mouse-tracking tilt effect

      motion1 file

    • Bounce Icon

      icons-bounce

      One-shot bounce animation for icons with configurable triggers

      motion2 files

    • Bounce Continuous

      icons-bounce-continuous

      Continuous bouncing animation for icons

      motion2 files

    • Fade In Icon

      icons-fade-in

      Entrance animation with fade effect for icons

      motion2 files

    • Heartbeat Icon

      icons-heartbeat

      Continuous heartbeat rhythm animation for icons

      motion2 files

    • Morph Icon

      icons-morph

      An icon that morphs between different states (e.g., play → pause).

      motion1 file

    • Pop Icon

      icons-pop

      One-shot pop effect (scale from 0 to 1) for icons

      motion2 files

    • Pulse Icon

      icons-pulse

      Continuous pulsing animation for icons

      motion2 files

    • Rotate Icon

      icons-rotate

      One-shot 360° rotation animation for icons

      motion2 files

    • Scale In Icon

      icons-scale-in

      Entrance animation with scale effect for icons

      motion2 files

    • Shake Icon

      icons-shake

      One-shot shake animation (horizontal shake) for icons

      motion2 files

    • Spin Icon

      icons-spin

      Continuous rotation animation for icons

      motion1 file

    • Stroke Draw Icon

      icons-stroke-draw

      SVG path stroke drawing animation for icons

      motion2 files

    • Wiggle Icon

      icons-wiggle

      One-shot wiggle animation (rotate left-right) for icons

      motion2 files

    • Slide In List

      lists-slide-in

      List with staggered slide-in animation for items

      motion1 file

    • Stagger Fade List

      lists-stagger-fade

      List with staggered fade-in animation for items

      motion1 file

    • Dots Loader

      loaders-dots

      Bouncing dots loader

      motion1 file

    • Page Transition Fade

      pages-page-transition-fade

      Page transition component with fade effect using View Transitions API.

      1 file

    • Page Transition Link

      pages-page-transition-link

      Navigation link component with View Transitions API support.

      1 file

    • Page Transition Slide

      pages-page-transition-slide

      Page transition component with slide effect using View Transitions API.

      1 file

    • reaction-button

      motion, lucide-react1 file
      Docs ↗

    • Animated Toast

      specials-animated-toast

      Detailed toast notification with slide-in animation, icon, and auto-dismiss progress bar

      motion2 files

    • Border Beam

      specials-border-beam

      An animated gradient border effect that travels around a container

      motion1 file

    • Border Beam Demo

      specials-border-beam-demo

      Demo for the Border Beam component

      motion1 file

    • Magnetic Drawer Demo

      specials-magnetic-drawer-demo

      Demo for the Magnetic Drawer component

      motion, lucide-react1 file

    • Reaction Dock

      specials-reaction-dock

      A smooth, scaling dock of reaction emojis with magnification effect

      motion, lucide-react1 file

    • Reaction Dock Demo

      specials-reaction-dock-demo

      Demo for the Reaction Dock component

      motion, lucide-react1 file

    • Spotlight Card

      specials-spotlight-card

      Interactive card with mouse-tracking spotlight effect

      motion, lucide-react1 file

    • Spotlight Card Demo

      specials-spotlight-card-demo

      Demo for the Spotlight Card component

      motion, lucide-react1 file

    • Swipeable Stack

      specials-swipeable-stack

      A deck of interactive cards with swipe gestures

      motion, lucide-react1 file

    • Swipeable Stack Demo

      specials-swipeable-stack-demo

      Demo for the Swipeable Stack component

      motion, lucide-react1 file

    • spotlight-card

      An interactive card with a spotlight effect.

      motion, lucide-react, clsx, tailwind-merge2 files
      Docs ↗

    • Gradient Text

      text-gradient

      Text with animated gradient effect

      motion1 file

    • Text Highlight Demo

      text-highlight-demo

      Demo for the Text Highlight component.

      motion1 file

    • Scramble Text

      text-scramble

      Hacker-style text scramble decode animation

      motion2 files

    • Shimmer Text

      text-shimmer

      Text with gradient shimmer sweep animation

      motion2 files

    • Typewriter Text

      text-typewriter

      Text with typewriter effect and optional blinking cursor

      motion1 file

    • Expanding Card

      transitions-expanding-card

      Smoothly expand a card into a detail view with multiple animation styles.

      motion, lucide-react1 file

    • Shared Modal

      transitions-shared-modal

      A trigger that morphs into a modal with multiple animation styles.

      motion, lucide-react1 file

    • Tab Switcher

      transitions-tab-switcher

      Animated tab navigation with multiple visual styles.

      motion1 file

    • Theme Toggle Circular

      transitions-theme-toggle-circular

      Circular ripple animation for theme toggle using View Transitions API.

      1 file

    • Theme Toggle Slide Bottom

      transitions-theme-toggle-slide-bottom

      Bottom to top slide animation for theme toggle using View Transitions API.

      1 file

    • Theme Toggle Slide Left

      transitions-theme-toggle-slide-left

      Left to right slide animation for theme toggle using View Transitions API.

      1 file

    • Theme Toggle Slide Right

      transitions-theme-toggle-slide-right

      Right to left slide animation for theme toggle using View Transitions API.

      1 file

    • Theme Toggle Slide Top

      transitions-theme-toggle-slide-top

      Top to bottom slide animation for theme toggle using View Transitions API.

      1 file

    • View Toggle

      transitions-view-toggle

      Smoothly rearrange items with multiple animation styles when switching views.

      motion, lucide-react1 file

    • Zoom Hollow Text

      transitions-zoom-hollow

      A beautiful text transition that zooms in with a hollow outline effect.

      motion1 file

    From the animbits readme

    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

    Read the rest on GitHub →

    Registries like animbits

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Animate UI

    Animate UI

    by Elliot Sutton

    34

    components

    Browse every shadcn registry we track →

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    Fancy Components

    Fancy Components

    by Daniel Petho

    35

    components

    1. Components
    2. /
    3. animbits
    4. /
    5. animbits

    Related libraries

    AnimateIcons / Lucide

    AnimateIcons / Lucide

    by Avijit Dey

    434

    components

    FR

    Freedom

    by Dhileep Kumar GM

    215

    components

    Efferd

    Efferd

    by Efferd

    115

    components

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    8bitcn

    8bitcn

    by OrcDev

    103

    components

    Be UI

    Be UI

    by Saurabh Chauhan

    72

    components

    About animbits

    animbits is a component library on 21st.dev by animbits with 1 public React component. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 1 animbits components

    • Text Highlight

    Browse all component libraries →