@upendra.manike/next-motion-kit
v0.1.4
Published
Next Motion Kit - production-ready animation components and hooks for Next.js and React. Includes hero animations, scroll reveals, counters, page transitions, and motion presets built on top of Framer Motion.
Maintainers
kora-langReadme
Next Motion Kit
Production-ready animation components & hooks for Next.js/React, powered by Framer Motion. Build hero sections, scroll reveals, counters, navbars, and page transitions in minutes.
🤖 Optimized for AI agents – every component and hook is documented in api.json, making it easy for ChatGPT/Cursor/Claude/Copilot to discover.
✨ Highlights
- 🎬 Hero, section, counter, navbar, and page transition components
- 🌀 Hook library:
useAnimateOnScroll,useScrollProgress - 📦 Motion presets for consistent animations
- ⚡ Framer Motion under the hood – tree-shaken and configurable
- 🧱 Works in Next.js (App + Pages Router) and plain React
- 🌗 Tailwind-friendly default styles (override with your classes)
📦 Installation
npm install @upendra.manike/next-motion-kit framer-motion
# or
yarn add @upendra.manike/next-motion-kit framer-motion
# or
pnpm add @upendra.manike/next-motion-kit framer-motion🚀 Quick Start
import { MotionHero, MotionSection, MotionCounter } from '@upendra.manike/next-motion-kit';
export default function Home() {
return (
<main className="space-y-24">
<MotionHero
eyebrow="Introducing"
title="Next Motion Kit"
description="Drop-in animations for hero sections, stats, navigation and more."
actions=[
{ label: 'Get Started', href: '#features' },
{ label: 'View GitHub', href: 'https://github.com/upendra-manike/JSLib' }
]
/>
<MotionSection className="grid gap-8 md:grid-cols-3">
{[1200, 98, 24].map((value) => (
<div key={value} className="rounded-2xl border p-6 text-center">
<MotionCounter value={value} suffix={value === 98 ? '%+' : '+'} />
<p className="text-sm text-gray-500">Happy teams</p>
</div>
))}
</MotionSection>
</main>
);
}🧩 Components & Hooks
<MotionHero />
- Animated eyebrow, title, description, CTA buttons
- Props:
title,description,eyebrow,actions,align,motionPreset
<MotionSection />
- Scroll-reveal wrapper with IntersectionObserver
- Props:
motionPreset,once,delay
<MotionCounter />
- Animated number counter using springs
- Props:
value,duration,prefix,suffix,decimals
<MotionNavbar />
- Sticky navbar with hide-on-scroll behaviour
- Props:
hideOnScroll,blur,className
<MotionPageTransition />
- Page transition wrapper for route changes
- Props:
routeKey,preset,duration
<MotionReveal />
- Minimal scroll-reveal wrapper for any element
Hooks
useAnimateOnScroll(options)– returns{ ref, isInView }useScrollProgress()– 0→1 scroll progress (great for progress bars)
Motion Presets
Use motionPresets or getPreset('fadeUp') for consistent animations across components.
import { motionPresets, getPreset } from '@upendra.manike/next-motion-kit';
const customPreset = {
hidden: { opacity: 0, rotate: -2 },
visible: { opacity: 1, rotate: 0, transition: { duration: 0.6 } },
};📘 Using with Next.js App Router
// app/layout.tsx
import { MotionPageTransition } from '@upendra.manike/next-motion-kit';
import { usePathname } from 'next/navigation';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
return (
<html lang="en">
<body>
<MotionPageTransition routeKey={pathname}>{children}</MotionPageTransition>
</body>
</html>
);
}🧪 Testing
npm run test🛣️ Roadmap
- Page builder examples (hero + pricing + testimonials)
- Storybook playground
- Variants for dark/light themes
- CLI to scaffold animation-heavy sections
📝 License
MIT © Upendra Manike