@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.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://animbits.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://animbits.dev/r/registry.json

bun bunx shadcn@latest add https://animbits.dev/r/registry.json

fetch registry curl -s https://animbits.dev/r/registry.json

Components

60 total

Use Hover Lift lib

The use-hover-lift hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-hover-lift.json

Use Hover Glow lib

The use-hover-glow hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-hover-glow.json

Use Press lib

The use-press hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-press.json

Use Fade In lib

The use-fade-in hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-fade-in.json

Use Scale In lib

The use-scale-in hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-scale-in.json

Use Slide In lib

The use-slide-in hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-slide-in.json

Use Pulse lib

The use-pulse hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-pulse.json

Use Bounce lib

The use-bounce hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-bounce.json

Use Shimmer lib

The use-shimmer hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-shimmer.json

Use Scramble lib

The use-scramble hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-scramble.json

Use Word Carousel lib

The use-word-carousel hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-word-carousel.json

Use Magnetic lib

The use-magnetic hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-magnetic.json

Use Parallax Tilt lib

The use-parallax-tilt hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-parallax-tilt.json

Use Stroke Draw lib

The use-stroke-draw hook.

npx shadcn@latest add https://animbits.dev/r/hooks-use-stroke-draw.json

Index lib

The index hook.

npx shadcn@latest add https://animbits.dev/r/hooks-index.json

Pulse Icon component

Continuous pulsing animation for icons

npx shadcn@latest add https://animbits.dev/r/icons-pulse.json

Bounce Icon component

One-shot bounce animation for icons with configurable triggers

npx shadcn@latest add https://animbits.dev/r/icons-bounce.json

Bounce Continuous component

Continuous bouncing animation for icons

npx shadcn@latest add https://animbits.dev/r/icons-bounce-continuous.json

Spin Icon component

Continuous rotation animation for icons

npx shadcn@latest add https://animbits.dev/r/icons-spin.json

Wiggle Icon component

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

npx shadcn@latest add https://animbits.dev/r/icons-wiggle.json

Shake Icon component

One-shot shake animation (horizontal shake) for icons

npx shadcn@latest add https://animbits.dev/r/icons-shake.json

Heartbeat Icon component

Continuous heartbeat rhythm animation for icons

npx shadcn@latest add https://animbits.dev/r/icons-heartbeat.json

Fade In Icon component

Entrance animation with fade effect for icons

npx shadcn@latest add https://animbits.dev/r/icons-fade-in.json

Scale In Icon component

Entrance animation with scale effect for icons

npx shadcn@latest add https://animbits.dev/r/icons-scale-in.json

Pop Icon component

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

npx shadcn@latest add https://animbits.dev/r/icons-pop.json

Rotate Icon component

One-shot 360° rotation animation for icons

npx shadcn@latest add https://animbits.dev/r/icons-rotate.json

Stroke Draw Icon component

SVG path stroke drawing animation for icons

npx shadcn@latest add https://animbits.dev/r/icons-stroke-draw.json

Reaction Dock component

A smooth, scaling dock of reaction emojis with magnification effect

npx shadcn@latest add https://animbits.dev/r/specials-reaction-dock.json

Reaction Dock Demo component

Demo for the Reaction Dock component

npx shadcn@latest add https://animbits.dev/r/specials-reaction-dock-demo.json

Animated Toast 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 ui

An interactive card with a spotlight effect.

npx shadcn@latest add https://animbits.dev/r/spotlight-card.json

reaction-button ui

npx shadcn@latest add https://animbits.dev/r/reaction-button.json

Border Beam component

An animated gradient border effect that travels around a container

npx shadcn@latest add https://animbits.dev/r/specials-border-beam.json

Border Beam Demo component

Demo for the Border Beam component

npx shadcn@latest add https://animbits.dev/r/specials-border-beam-demo.json

Press Button component

Button with press-down effect on tap

npx shadcn@latest add https://animbits.dev/r/buttons-press.json

Glow Button component

Button with glow effect on hover

npx shadcn@latest add https://animbits.dev/r/buttons-glow.json

Lift Button component

Button that lifts up on hover

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

Shine Button component

Button with shine sweep effect on hover

npx shadcn@latest add https://animbits.dev/r/buttons-shine.json

Fade In Button component

Button with fade-in entrance animation

npx shadcn@latest add https://animbits.dev/r/buttons-fade-in.json

Slide In Button component

Button with slide-in entrance animation

npx shadcn@latest add https://animbits.dev/r/buttons-slide-in.json

Ripple Button component

Button with touch-aware ripple effect on click

npx shadcn@latest add https://animbits.dev/r/buttons-ripple.json

Magnetic Button component

Button with cursor-following magnetic attraction effect

npx shadcn@latest add https://animbits.dev/r/buttons-magnetic.json

Border Gradient Button component

Button with animated gradient border

npx shadcn@latest add https://animbits.dev/r/buttons-border-gradient.json

Hover Lift Card component

Card that lifts with shadow on hover

npx shadcn@latest add https://animbits.dev/r/cards-hover-lift.json

Hover Glow Card component

Card with glow effect on hover

npx shadcn@latest add https://animbits.dev/r/cards-hover-glow.json

Fade In Card component

Card with fade-in animation on mount

npx shadcn@latest add https://animbits.dev/r/cards-fade-in.json

Scale In Card component

Card with scale-in animation on mount

npx shadcn@latest add https://animbits.dev/r/cards-scale-in.json

Slide In Card component

Card that slides in from any direction on mount

npx shadcn@latest add https://animbits.dev/r/cards-slide-in.json

Flip Card component

Card with 3D flip animation on hover

npx shadcn@latest add https://animbits.dev/r/cards-flip.json

Tilt Card component

Card with mouse-tracking tilt effect

npx shadcn@latest add https://animbits.dev/r/cards-tilt.json

Parallax Tilt Card component

Card with 3D parallax tilt effect and depth

npx shadcn@latest add https://animbits.dev/r/cards-parallax-tilt.json

Background Zoom Card component

Card with background image zoom on hover

npx shadcn@latest add https://animbits.dev/r/cards-background-zoom.json

Fade In Text component

Text that fades in word by word or character by character

npx shadcn@latest add https://animbits.dev/r/text-fade-in.json

Slide Up Text component

Text that slides up word by word or character by character

npx shadcn@latest add https://animbits.dev/r/text-slide-up.json

Typewriter Text component

Text with typewriter effect and optional blinking cursor

npx shadcn@latest add https://animbits.dev/r/text-typewriter.json

Gradient Text component

Text with animated gradient effect

npx shadcn@latest add https://animbits.dev/r/text-gradient.json

Blur In Text component

Text that blurs in word by word or character by character

npx shadcn@latest add https://animbits.dev/r/text-blur-in.json

Dia Text component

Scroll-driven text reveal with precision blur and spring physics

npx shadcn@latest add https://animbits.dev/r/text-dia.json

Shimmer Text component

Text with gradient shimmer sweep animation

npx shadcn@latest add https://animbits.dev/r/text-shimmer.json

Scramble Text component

Hacker-style text scramble decode animation

npx shadcn@latest add https://animbits.dev/r/text-scramble.json