React-Motion-Kit

Prebuilt animation hooks for React - Plug-and-play Framer Motion-based animations for buttons, modals, and more.

Features

• 🎭 Prebuilt Animations - Ready-to-use animation hooks
• ⚡ Easy to Use - Simple API, works out of the box
• 🎨 Customizable - Fine-tune duration, easing, and more
• 📦 Lightweight - Tree-shakeable, import only what you need
• 🔒 Type-safe - Full TypeScript support

Installation

npm install react-motion-kit framer-motion

or

pnpm add react-motion-kit framer-motion

or

yarn add react-motion-kit framer-motion

Usage

Animation Hooks

import { motion } from 'framer-motion';
import { useFadeIn, useSlideIn, useBounce } from 'react-motion-kit';

function MyComponent() {
  const fadeIn = useFadeIn({ duration: 0.5 });
  const slideIn = useSlideIn({ direction: 'up', distance: 50 });
  const bounce = useBounce();

  return (
    <>
      <motion.div {...fadeIn}>Fade in</motion.div>
      <motion.div {...slideIn}>Slide in</motion.div>
      <motion.div {...bounce}>Bounce in</motion.div>
    </>
  );
}

Fade In

import { motion } from 'framer-motion';
import { useFadeIn } from 'react-motion-kit';

function Component() {
  const fade = useFadeIn({ duration: 0.5, delay: 0.2 });

  return <motion.div {...fade}>Content</motion.div>;
}

Slide In

import { motion } from 'framer-motion';
import { useSlideIn } from 'react-motion-kit';

function Component() {
  const slide = useSlideIn({
    direction: 'up', // 'up' | 'down' | 'left' | 'right'
    distance: 50,
    duration: 0.5,
  });

  return <motion.div {...slide}>Content</motion.div>;
}

Scale

import { motion } from 'framer-motion';
import { useScale } from 'react-motion-kit';

function Component() {
  const scale = useScale({ from: 0, to: 1, duration: 0.5 });

  return <motion.div {...scale}>Content</motion.div>;
}

Rotate

import { motion } from 'framer-motion';
import { useRotate } from 'react-motion-kit';

function Component() {
  const rotate = useRotate({ from: 0, to: 360, duration: 1 });

  return <motion.div {...rotate}>Content</motion.div>;
}

Bounce

import { motion } from 'framer-motion';
import { useBounce } from 'react-motion-kit';

function Component() {
  const bounce = useBounce({ duration: 0.6 });

  return <motion.div {...bounce}>Content</motion.div>;
}

Shake

import { motion } from 'framer-motion';
import { useShake } from 'react-motion-kit';

function Component() {
  const shake = useShake({ duration: 0.5 });

  return <motion.div {...shake}>Content</motion.div>;
}

Pulse

import { motion } from 'framer-motion';
import { usePulse } from 'react-motion-kit';

function Component() {
  const pulse = usePulse({ duration: 1.5 });

  return <motion.div {...pulse}>Content</motion.div>;
}

Hover Effects

import { motion } from 'framer-motion';
import { useHover } from 'react-motion-kit';

function Component() {
  const hover = useHover({ scale: 1.1, translateY: -5 });

  return (
    <motion.div {...hover}>
      Hover me!
    </motion.div>
  );
}

Animated Button

import { AnimatedButton } from 'react-motion-kit';

function App() {
  return (
    <AnimatedButton variant="bounce" onClick={() => alert('Clicked!')}>
      Click me!
    </AnimatedButton>
  );
}

Variants:

• default - Subtle hover effect
• bounce - Spring bounce on hover
• scale - Scale up on hover
• pulse - Pulse animation

Animated Modal

import { AnimatedModal } from 'react-motion-kit';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <AnimatedModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        variant="scale" // 'fade' | 'scale' | 'slide'
      >
        <div className="bg-white p-6 rounded-lg">
          <h2>Modal Content</h2>
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      </AnimatedModal>
    </>
  );
}

API Reference

Hooks

useFadeIn(options?)

Fade in animation.

Options:

• duration?: number - Animation duration (default: 0.5)
• delay?: number - Animation delay (default: 0)
• ease?: string | number[] - Easing function (default: 'easeOut')

useSlideIn(options?)

Slide in animation.

Options:

• direction?: 'up' | 'down' | 'left' | 'right' - Slide direction (default: 'up')
• distance?: number - Slide distance in pixels (default: 50)
• duration?: number - Animation duration (default: 0.5)
• delay?: number - Animation delay (default: 0)
• ease?: string | number[] - Easing function (default: 'easeOut')

useScale(options?)

Scale animation.

Options:

• from?: number - Starting scale (default: 0)
• to?: number - Ending scale (default: 1)
• duration?: number - Animation duration (default: 0.5)
• delay?: number - Animation delay (default: 0)
• ease?: string | number[] - Easing function (default: 'easeOut')

useRotate(options?)

Rotate animation.

Options:

• from?: number - Starting rotation (default: 0)
• to?: number - Ending rotation (default: 360)
• duration?: number - Animation duration (default: 0.5)
• delay?: number - Animation delay (default: 0)
• ease?: string | number[] - Easing function (default: 'easeOut')

useBounce(options?)

Bounce animation with spring physics.

Options:

• duration?: number - Animation duration (default: 0.6)
• delay?: number - Animation delay (default: 0)

useShake(options?)

Shake animation.

Options:

• duration?: number - Animation duration (default: 0.5)
• delay?: number - Animation delay (default: 0)

usePulse(options?)

Pulse animation (infinite).

Options:

• duration?: number - Animation duration (default: 1.5)
• delay?: number - Animation delay (default: 0)

useHover(options?)

Hover and tap effects.

Options:

• scale?: number - Scale on hover (default: 1.05)
• rotate?: number - Rotation on hover (default: 0)
• translateY?: number - Y translation on hover (default: -5)
• duration?: number - Animation duration (default: 0.2)

Components

AnimatedButton

Pre-animated button component.

Props:

• variant?: 'default' | 'bounce' | 'scale' | 'pulse' - Animation variant
• All standard button props

AnimatedModal

Pre-animated modal component.

Props:

• isOpen: boolean - Whether modal is open
• onClose: () => void - Close handler
• variant?: 'fade' | 'scale' | 'slide' - Animation variant
• children: ReactNode - Modal content

Examples

Staggered List Animation

import { motion } from 'framer-motion';
import { useFadeIn } from 'react-motion-kit';

function List() {
  const fade = useFadeIn();

  return (
    <div>
      {items.map((item, index) => (
        <motion.div
          key={item.id}
          {...fade}
          transition={{ delay: index * 0.1 }}
        >
          {item.text}
        </motion.div>
      ))}
    </div>
  );
}

Combined Animations

import { motion } from 'framer-motion';
import { useFadeIn, useSlideIn, useHover } from 'react-motion-kit';

function Card() {
  const fade = useFadeIn();
  const slide = useSlideIn({ direction: 'up' });
  const hover = useHover();

  return (
    <motion.div
      {...fade}
      {...slide}
      {...hover}
    >
      Card content
    </motion.div>
  );
}

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Test
pnpm test

# Lint
pnpm lint

# Format
pnpm format

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.