MotionKit 🧩

A lightweight React animation library for beautiful micro-interactions. Add professional motion to your UI with minimal code.

Why MotionKit?

• Simple API – Intuitive components that just work
• Production Ready – Optimized for performance
• TypeScript First – Fully typed for better DX
• Zero Config – Works with any React setup
• Tiny Bundle – Minimal dependencies

Installation

npm install motionkit @react-spring/web @use-gesture/react

Quick Start

import { TiltCard, BounceButton } from "motionkit";

function App() {
  return (
    <div>
      <TiltCard>
        <h1>Hover me for 3D effect!</h1>
      </TiltCard>

      <BounceButton onClick={() => alert("Clicked!")}>Press me</BounceButton>
    </div>
  );
}

Core Components

Interactive Elements

TiltCard – 3D tilt effect on hover

<TiltCard maxTilt={15} scale={1.05}>
  <YourContent />
</TiltCard>

BounceButton – Satisfying press animation

<BounceButton scale={0.95} onClick={handleClick}>
  Click me
</BounceButton>

RippleButton – Material-style ripple feedback

<RippleButton rippleColor="rgba(255,255,255,0.6)">Ripple</RippleButton>

DraggableItem – Physics-based dragging

<DraggableItem bounds={{ left: 0, right: 300 }}>Drag me around</DraggableItem>

Scroll Effects

FadeInSection – Animate on scroll into view

<FadeInSection direction="up" distance={50}>
  I appear when you scroll to me
</FadeInSection>

ParallaxContainer – Smooth parallax scrolling

<ParallaxContainer speed={0.5}>
  <YourContent />
</ParallaxContainer>

UI Feedback

ShakeOnError – Shake animation for errors

<ShakeOnError trigger={hasError}>
  <input />
</ShakeOnError>

Toast – Notification system

<ToastProvider>
  <YourApp />
</ToastProvider>

Visual Components

MotionKit includes ready-to-use visual effects:

• 3DRotatingCarousel – Image carousel with 3D rotation
• AnimatedChart – Smooth chart animations
• ConfettiCannon – Celebration effects
• GlassCard – Glassmorphism card
• HolographicCard – Holographic shimmer effect
• MatrixRain – Matrix-style falling characters
• MusicVisualizer – Audio visualization
• ParticleField – Particle system
• VoiceVisualizer – Voice input visualization

See full component list →

Custom Hooks

Build your own animations with composable hooks:

import { useTilt, useParallax, useVisibility } from "motionkit";

// 3D tilt effect
const { tiltRef, style } = useTilt({ maxTilt: 20 });

// Parallax scrolling
const { ref, style } = useParallax({ speed: 0.3 });

// Scroll-triggered visibility
const [ref, springs] = useVisibility({ direction: "up" });

Styling

Works seamlessly with any styling approach:

// Tailwind CSS
<TiltCard className="p-6 rounded-xl shadow-lg bg-white" />

// CSS Modules
<BounceButton className={styles.myButton} />

// Inline styles
<DraggableItem style={{ width: 200, height: 200 }} />

TypeScript

Full type safety included:

import type { TiltCardProps, BounceButtonProps } from "motionkit";

Examples

Run the example app to see all components in action:

git clone https://github.com/yourusername/motionkit.git
cd motionkit
npm install
npm run dev:example

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance Tips

• Use will-change: transform for heavy animations
• Avoid animating too many elements simultaneously
• Set bounds on draggable items to limit calculations

Contributing

We welcome contributions! Please read our Contributing Guide to get started.

git clone https://github.com/yourusername/motionkit.git
cd motionkit
npm install
npm run dev
npm run build:lib

License

MIT © Gowsi S M

Acknowledgements

Built with:

• React Spring – Animation engine
• use-gesture – Gesture handling
• TypeScript – Type safety
• Vite – Build tooling

---

Made with ❤️ for developers who care about motion and UX

Documentation • Examples • NPM • GitHub