https://github.com/kanadshee-18/motion-animations

A curated collection of modular animation components built with motion.dev & React ⚛️ — crafted for clean code, reusability, and smooth UI ✨.
https://github.com/kanadshee-18/motion-animations

aceternity-ui animation codeblock lucide-icons motion next15 react react19 shadcn-ui tablericons tailwindcss tailwindcss-v4

Last synced: about 1 month ago
JSON representation

A curated collection of modular animation components built with motion.dev & React ⚛️ — crafted for clean code, reusability, and smooth UI ✨.

• Host: GitHub
• URL: https://github.com/kanadshee-18/motion-animations
• Owner: KanadShee-18
• License: mit
• Created: 2025-06-27T15:22:47.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-06-27T16:10:54.000Z (11 months ago)
• Last Synced: 2025-06-27T16:39:46.752Z (11 months ago)
• Topics: aceternity-ui, animation, codeblock, lucide-icons, motion, next15, react, react19, shadcn-ui, tablericons, tailwindcss, tailwindcss-v4
• Language: TypeScript
• Homepage: https://motion-animations-dev.vercel.app/
• Size: 92.8 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## 🎬 Reusable Motion & Animation Components

### A curated collection of modular animation components built with motion.dev & React ⚛️ — crafted for clean code, reusability, and smooth UI ✨.

## 🚀 What's Inside

- This repo contains animation utilities and ready-to-use motion components covering:

- 🧲 Simple Animations — Effortlessly animate x, y, scale, opacity, and more.

- 🧩 Reusable Variants — Define animation variants once, reuse across components.

- 🎯 Layout Animations — Smooth transitions using layoutId for shared layout motion.

- 🌀 Exit Animations — Animate elements out with AnimatePresence for clean unmounting.

- 🧠 Motion Hooks — Use useAnimate, usePresence, and other hooks for dynamic logic-driven animations.

- 🎞️ Animation Sequences — Timeline-based AnimationSequence support for chained motion.

- 🖱️ Hover & Tap Effects — Predefined whileHover, whileTap props to add interactivity with ease.

-- 🧱 Composed Motion Components — Custom wrappers around motion.div, motion.button, etc., with default props and themes.

---

## 🛠 Built With

- motion.dev (Framer Motion reimagined)

- Next.js 15

- React 19+

- Tailwind CSS

- Lucide React + Tabler Icons

- shadcn/ui for base primitives and codeblock from aceternity

---

## 💡 Use Cases

- UI reveal animations

- Interactive button feedback

- Seamless page/component transitions

- Animated loaders, navbars, modals

- Micro-interactions and hover effects

---

## LICENSE:

- [LICENSE](LICENSE)

---

> If You got any help kindly give a star ☺️.