{"id":29799865,"url":"https://github.com/mirayatech/mochi-motion","last_synced_at":"2025-07-28T08:49:22.348Z","repository":{"id":304555742,"uuid":"1019120517","full_name":"mirayatech/mochi-motion","owner":"mirayatech","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-13T20:25:27.000Z","size":3182,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-13T22:09:58.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirayatech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-13T19:27:44.000Z","updated_at":"2025-07-13T21:10:24.000Z","dependencies_parsed_at":"2025-07-13T22:20:06.426Z","dependency_job_id":null,"html_url":"https://github.com/mirayatech/mochi-motion","commit_stats":null,"previous_names":["mirayatech/mochi-motion"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/mirayatech/mochi-motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fmochi-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fmochi-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fmochi-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fmochi-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirayatech","download_url":"https://codeload.github.com/mirayatech/mochi-motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fmochi-motion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267488783,"owners_count":24095785,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-28T08:49:18.829Z","updated_at":"2025-07-28T08:49:22.331Z","avatar_url":"https://github.com/mirayatech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1800\" height=\"1200\" alt=\"IMG_0349\" src=\"https://github.com/user-attachments/assets/d9e5a102-e3ae-455f-9a57-95fa8c13fe92\" /\u003e\n\n\n# 🍡 Mochi Motion\n\n**Professional spring animations for React \u0026 Next.js that feel like butter.**\n\nMochi Motion brings world-class animation to your React applications with zero configuration. Built on Framer Motion with intelligent defaults, it delivers the smooth, bouncy animations you see in the best modern web apps.\n\n\u003cbr/\u003e\n\n## ✨ Why Mochi Motion?\n\n**It just works.** Drop it in your React or Next.js app and get beautiful animations instantly. No complex configuration, no performance headaches, no framework lock-in.\n\n- **Universal compatibility** — Works with React, Next.js App Router, Pages Router, Vite, and Create React App\n- **Professional spring physics** — Four carefully tuned presets plus full customization\n- **Performance optimized** — Intersection Observer API with smart defaults\n- **TypeScript native** — Written in TypeScript with comprehensive type definitions\n- **Production ready** — 8KB compressed, battle-tested in real applications\n\n\u003cbr/\u003e\n\n## 📦 Installation\n\n```bash\nnpm install mochi-motion framer-motion react-intersection-observer\n```\n\nThat's it. No additional setup required.\n\n\u003cbr/\u003e\n\n## 🚀 Quick Start\n\n### React (Vite, CRA, or any React app)\n\n```tsx\nimport { ReactTransition, RevealOnScroll } from 'mochi-motion'\n\nfunction App() {\n  return (\n    \u003cReactTransition\u003e\n      \u003cRevealOnScroll effect=\"fade-up\"\u003e\n        \u003ch1\u003eWelcome to the future\u003c/h1\u003e\n      \u003c/RevealOnScroll\u003e\n    \u003c/ReactTransition\u003e\n  )\n}\n```\n\n### Next.js App Router\n\n```tsx\n// app/layout.tsx\nimport { AppRouterTransition } from 'mochi-motion'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cAppRouterTransition\u003e\n          {children}\n        \u003c/AppRouterTransition\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  )\n}\n```\n\n### Next.js Pages Router\n\n```tsx\n// pages/_app.tsx\nimport { PageTransition } from 'mochi-motion'\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003cPageTransition\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/PageTransition\u003e\n  )\n}\n```\n\n\u003cbr/\u003e\n\n## 🎬 Animation Effects\n\nMochi Motion includes eight carefully crafted animation effects. Each one uses professional spring physics that respond naturally to user interaction.\n\n### Fade Animations\n```tsx\n\u003cRevealOnScroll effect=\"fade-up\"\u003eContent slides up smoothly\u003c/RevealOnScroll\u003e\n\u003cRevealOnScroll effect=\"fade-down\"\u003eContent drops down elegantly\u003c/RevealOnScroll\u003e\n\u003cRevealOnScroll effect=\"fade-left\"\u003eContent sweeps in from the right\u003c/RevealOnScroll\u003e\n\u003cRevealOnScroll effect=\"fade-right\"\u003eContent glides in from the left\u003c/RevealOnScroll\u003e\n```\n\n### Scale Animations\n```tsx\n\u003cRevealOnScroll effect=\"scale-up\"\u003eContent zooms in with perfect timing\u003c/RevealOnScroll\u003e\n\u003cRevealOnScroll effect=\"scale-down\"\u003eContent emerges from larger scale\u003c/RevealOnScroll\u003e\n```\n\n### Special Effects\n```tsx\n\u003cRevealOnScroll effect=\"blur-up\"\u003eContent focuses into clarity\u003c/RevealOnScroll\u003e\n\u003cRevealOnScroll effect=\"rotate-up\"\u003eContent spins into position\u003c/RevealOnScroll\u003e\n```\n\n\u003cbr/\u003e\n\n## ⚙️ Spring Physics\n\nThe magic happens in the spring configurations. We've spent months tuning these presets to feel just right in real applications.\n\n### Gentle\nSoft, premium feel. Perfect for luxury brands and professional interfaces.\n```tsx\n\u003cRevealOnScroll preset=\"gentle\"\u003e\n  \u003cCard\u003eElegant and refined\u003c/Card\u003e\n\u003c/RevealOnScroll\u003e\n```\n\n### Wobbly  \nBouncy and engaging. Adds personality without being distracting.\n```tsx\n\u003cRevealOnScroll preset=\"wobbly\"\u003e\n  \u003cButton\u003eFun and interactive\u003c/Button\u003e\n\u003c/RevealOnScroll\u003e\n```\n\n### Stiff\nQuick and responsive. Great for dashboards and productivity apps.\n```tsx\n\u003cRevealOnScroll preset=\"stiff\"\u003e\n  \u003cMenuItem\u003eSnappy and efficient\u003c/MenuItem\u003e\n\u003c/RevealOnScroll\u003e\n```\n\n### Slow\nDeliberate and thoughtful. Commands attention for important content.\n```tsx\n\u003cRevealOnScroll preset=\"slow\"\u003e\n  \u003cCallToAction\u003eConsidered and impactful\u003c/CallToAction\u003e\n\u003c/RevealOnScroll\u003e\n```\n\n\u003cbr/\u003e\n\n## 🔥 Advanced Usage\n\n### Custom Spring Physics\n\nWhen the presets aren't enough, dive into the physics:\n\n```tsx\n\u003cRevealOnScroll \n  preset=\"custom\"\n  spring={{\n    stiffness: 200,  // How bouncy (80-300)\n    damping: 12,     // How much it oscillates (8-30)\n    mass: 1.2        // How heavy it feels (0.8-1.5)\n  }}\n\u003e\n  \u003cComponent /\u003e\n\u003c/RevealOnScroll\u003e\n```\n\n### Staggered Animations\n\nCreate cascading effects that guide user attention:\n\n```tsx\nfunction FeatureGrid({ features }) {\n  return (\n    \u003cdiv className=\"grid\"\u003e\n      {features.map((feature, index) =\u003e (\n        \u003cRevealOnScroll\n          key={feature.id}\n          effect=\"fade-up\"\n          delay={index * 0.1}\n        \u003e\n          \u003cFeatureCard {...feature} /\u003e\n        \u003c/RevealOnScroll\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\n### Performance Optimization\n\nFine-tune when animations trigger:\n\n```tsx\n\u003cRevealOnScroll \n  effect=\"fade-up\"\n  threshold={0.2}        // Trigger when 20% visible\n  rootMargin=\"50px\"      // Start 50px before entering viewport\n  triggerOnce={true}     // Animate only once\n\u003e\n  \u003cExpensiveComponent /\u003e\n\u003c/RevealOnScroll\u003e\n```\n\n\u003cbr/\u003e\n\n## 💙 TypeScript Support\n\nMochi Motion is written in TypeScript with comprehensive type definitions. Everything is fully typed for the best developer experience.\n\n### Core Types\n\n```typescript\ntype AnimationEffect = \n  | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right'\n  | 'scale-up' | 'scale-down' \n  | 'blur-up' | 'rotate-up'\n\ntype SpringPreset = 'gentle' | 'wobbly' | 'stiff' | 'slow' | 'custom'\n\ninterface SpringConfig {\n  stiffness?: number  // 80-300\n  damping?: number    // 8-30\n  mass?: number       // 0.8-1.5\n}\n```\n\n### Component Props\n\n```typescript\ninterface RevealOnScrollProps {\n  effect?: AnimationEffect\n  preset?: SpringPreset\n  spring?: SpringConfig\n  delay?: number\n  distance?: number\n  scale?: number\n  threshold?: number\n  triggerOnce?: boolean\n  children: React.ReactNode\n  className?: string\n}\n```\n\n### Type-Safe Usage\n\n```tsx\nimport { RevealOnScroll, SpringConfig } from 'mochi-motion'\n\nconst customSpring: SpringConfig = {\n  stiffness: 150,\n  damping: 15,\n  mass: 1.1\n}\n\nfunction TypedComponent() {\n  return (\n    \u003cRevealOnScroll\n      effect=\"scale-up\"      // ✅ Fully typed\n      preset=\"wobbly\"        // ✅ Autocomplete works  \n      spring={customSpring}  // ✅ Type checked\n      delay={0.3}           // ✅ Number type enforced\n    \u003e\n      \u003cdiv\u003ePerfectly type-safe animations\u003c/div\u003e\n    \u003c/RevealOnScroll\u003e\n  )\n}\n```\n\n\u003cbr/\u003e\n\n## 🌍 Real-World Examples\n\n### Landing Page Hero\n\n```tsx\nfunction Hero() {\n  return (\n    \u003csection\u003e\n      \u003cRevealOnScroll effect=\"scale-up\" preset=\"gentle\" delay={0.1}\u003e\n        \u003ch1\u003eYour Product Name\u003c/h1\u003e\n      \u003c/RevealOnScroll\u003e\n      \n      \u003cRevealOnScroll effect=\"fade-up\" preset=\"gentle\" delay={0.3}\u003e\n        \u003cp\u003eThe future of everything, available today.\u003c/p\u003e\n      \u003c/RevealOnScroll\u003e\n      \n      \u003cRevealOnScroll effect=\"fade-up\" preset=\"wobbly\" delay={0.5}\u003e\n        \u003cbutton\u003eGet Started\u003c/button\u003e\n      \u003c/RevealOnScroll\u003e\n    \u003c/section\u003e\n  )\n}\n```\n\n### Feature Showcase\n\n```tsx\nfunction Features() {\n  const features = [\n    { title: \"Lightning Fast\", description: \"Built for speed\" },\n    { title: \"Rock Solid\", description: \"Never breaks\" },\n    { title: \"Always Fresh\", description: \"Regular updates\" }\n  ]\n\n  return (\n    \u003cdiv className=\"features-grid\"\u003e\n      {features.map((feature, i) =\u003e (\n        \u003cRevealOnScroll\n          key={feature.title}\n          effect=\"fade-up\"\n          preset=\"gentle\"\n          delay={i * 0.15}\n        \u003e\n          \u003cdiv className=\"feature-card\"\u003e\n            \u003ch3\u003e{feature.title}\u003c/h3\u003e\n            \u003cp\u003e{feature.description}\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/RevealOnScroll\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\n### Testimonial Section\n\n```tsx\nfunction Testimonials() {\n  return (\n    \u003csection\u003e\n      \u003cRevealOnScroll effect=\"blur-up\" preset=\"slow\"\u003e\n        \u003ch2\u003eWhat people are saying\u003c/h2\u003e\n      \u003c/RevealOnScroll\u003e\n      \n      \u003cdiv className=\"testimonials\"\u003e\n        \u003cRevealOnScroll effect=\"fade-left\" delay={0.2}\u003e\n          \u003cTestimonialCard person=\"Sarah Chen\" /\u003e\n        \u003c/RevealOnScroll\u003e\n        \n        \u003cRevealOnScroll effect=\"scale-up\" preset=\"wobbly\" delay={0.4}\u003e\n          \u003cTestimonialCard person=\"Marcus Johnson\" featured /\u003e\n        \u003c/RevealOnScroll\u003e\n        \n        \u003cRevealOnScroll effect=\"fade-right\" delay={0.6}\u003e\n          \u003cTestimonialCard person=\"Elena Rodriguez\" /\u003e\n        \u003c/RevealOnScroll\u003e\n      \u003c/div\u003e\n    \u003c/section\u003e\n  )\n}\n```\n\n\u003cbr/\u003e\n\n## 🔄 Migration Guide\n\n### From Pages Router to App Router\n\n**Before:**\n```tsx\n// pages/_app.tsx\nimport { PageTransition } from 'mochi-motion'\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003cPageTransition\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/PageTransition\u003e\n  )\n}\n```\n\n**After:**\n```tsx\n// app/layout.tsx\nimport { AppRouterTransition } from 'mochi-motion'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cAppRouterTransition\u003e\n          {children}\n        \u003c/AppRouterTransition\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  )\n}\n```\n\n\u003cbr/\u003e\n\n## ⚡ Performance Notes\n\nMochi Motion is built for production. Here's what we've optimized:\n\n- **Intersection Observer API** for efficient scroll detection\n- **Hardware acceleration** for all animations\n- **Tree shaking support** to keep bundles small\n- **Smart defaults** that work in 90% of cases\n- **Minimal re-renders** with optimized React patterns\n\n### Bundle Size\n- **8.8 KB compressed** (smaller than most images)\n- **Tree shakable** — import only what you use\n- **Zero runtime dependencies** — peer dependencies only\n\n\u003cbr/\u003e\n\n## 🌐 Browser Support\n\nMochi Motion works in all modern browsers:\n- **Chrome/Edge**: 88+\n- **Firefox**: 85+ \n- **Safari**: 14+\n- **React**: 17.0.0+\n- **Next.js**: 12.0.0+\n\n\u003cbr/\u003e\n\n## 📖 API Reference\n\n### RevealOnScroll\n\nThe primary component for scroll-triggered animations.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `effect` | `AnimationEffect` | `'fade-up'` | Animation type |\n| `preset` | `SpringPreset` | `'gentle'` | Spring physics preset |\n| `spring` | `SpringConfig` | — | Custom spring configuration |\n| `delay` | `number` | `0` | Animation delay in seconds |\n| `distance` | `number` | `50` | Slide distance in pixels |\n| `scale` | `number` | `0.8` | Scale factor for scale animations |\n| `threshold` | `number` | `0.1` | Intersection observer threshold |\n| `triggerOnce` | `boolean` | `true` | Whether to animate only once |\n\n### Page Transition Components\n\n| Component | Use Case |\n|-----------|----------|\n| `ReactTransition` | Universal React apps (Vite, CRA) |\n| `AppRouterTransition` | Next.js 13+ App Router |\n| `PageTransition` | Next.js Pages Router |\n\nAll transition components accept:\n- `children`: React node to animate\n- `preset`: Spring physics preset\n- `className`: Additional CSS classes\n\n\u003cbr/\u003e\n\n## 🤝 Contributing\n\nMochi Motion is open source and welcomes contributions. Found a bug or have a feature request? [Open an issue](https://github.com/mirayatech/mochi-motion/issues).\n\n\u003cbr/\u003e\n\n## 📄 License\n\nMIT License © 2025 [@mirayatech](https://github.com/mirayatech)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fmochi-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirayatech%2Fmochi-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fmochi-motion/lists"}