{"id":25328443,"url":"https://github.com/masculinn/motion-provider","last_synced_at":"2025-04-08T02:49:45.622Z","repository":{"id":277076051,"uuid":"931254404","full_name":"Masculinn/motion-provider","owner":"Masculinn","description":"Animate everything in your react web app, code in 1 minute, test in 5 second, make the web better. Introducing, Motion Provider.","archived":false,"fork":false,"pushed_at":"2025-04-04T20:11:21.000Z","size":22554,"stargazers_count":25,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T21:24:58.711Z","etag":null,"topics":["framer-motion","mit-license","motion","nextjs","open-source","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://burakdev.com/motion-provider","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Masculinn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-02-12T01:01:44.000Z","updated_at":"2025-04-04T20:11:24.000Z","dependencies_parsed_at":"2025-02-12T02:25:47.781Z","dependency_job_id":"2c369467-7170-4ad4-9805-c33ab1c59d73","html_url":"https://github.com/Masculinn/motion-provider","commit_stats":null,"previous_names":["masculinn/motion-provider"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Masculinn%2Fmotion-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Masculinn%2Fmotion-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Masculinn%2Fmotion-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Masculinn%2Fmotion-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Masculinn","download_url":"https://codeload.github.com/Masculinn/motion-provider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767253,"owners_count":20992541,"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","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":["framer-motion","mit-license","motion","nextjs","open-source","react","tailwindcss","typescript"],"created_at":"2025-02-14T02:33:20.970Z","updated_at":"2025-04-08T02:49:45.616Z","avatar_url":"https://github.com/Masculinn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Motion Provider\n\n\u003c!-- markdownlint-disable first-line-h1 --\u003e\n\u003c!-- markdownlint-disable html --\u003e\n\u003c!-- markdownlint-disable no-duplicate-header --\u003e\n\n![motion-provider-banner](https://github.com/user-attachments/assets/3d04e609-9104-422e-b6f8-054e3a29d449)\n\n\u003chr\u003e\n\u003cdiv align=\"center\" style=\"line-height: 1;\"\u003e\n  \u003ca href=\"https://burakdev.com/motion-provider\" target=\"_blank\" style=\"margin: 2px;\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/Docs-Motion%20Provider-536af5?color=536af5\u0026logoColor=white\" style=\"display: inline-block; vertical-align: middle;\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Masculinn/motion-provider\" target=\"_blank\" style=\"margin: 2px;\"\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/Masculinn/motion-provider?style=social\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\" style=\"line-height: 1;\"\u003e\n  \u003ca href=\"https://x.com/masculinnnnn\" target=\"_blank\" style=\"margin: 2px;\"\u003e\n    \u003cimg alt=\"Twitter Follow\" src=\"https://img.shields.io/badge/Twitter-@masculinnn-1DA1F2?logo=twitter\" style=\"display: inline-block; vertical-align: middle;\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\" style=\"line-height: 1;\"\u003e\n  \u003ca href=\"https://github.com/Masculinn/motion-provider/blob/main/LICENSE\" style=\"margin: 2px;\"\u003e\n    \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-MIT-brightgreen\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://burakdev.com/motion-provider\"\u003e\u003cb\u003eDocumentation Application\u003c/b\u003e📚\u003c/a\u003e\n\u003c/p\u003e\n\nDear Fellow Developer,\n\nThank you for being here and taking the time to explore this project. If you are roaming the industry, you will hear my name often in some social apps, linkedin, x, dev.to, daily.dev etc. Follow me via socials🌟. Over the past month, I’ve poured 160+ hours of passion into crafting this project, aiming to give you everything you need to bring your creative visions to life—without compromises. Do not forget everything free-to-use, open-sourced for the developer who has real passion to make the web better!\n\nWith this, you can build:\n\n-🚀 Stunning SaaS platforms,\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"/public/assets/projects/thumbs/saas-thumb.gif\"\u003e\n\u003c/p\u003e\n-🎯 Pixel-perfect landing pages, \n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"/public/assets/projects/thumbs/nft-thumb.gif\"\u003e\n\u003c/p\u003e\n-💼 Portfolios that captivate clients\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"public/assets/projects/thumbs/agency-thumb.gif\"\u003e\n\u003c/p\u003e\n\n...and truly, anything you imagine. No need to google for animations, No need to copy paste entire complicated components that you feel extremely confused instead here you are simply going through the engines, If you do not have idea about the animations you want to generate kindly press 'roll a dice' button and let the engines generates you fully unique animations among 21,840 animation combination.\n\nSpecial thanks to Motion team (old name: framer-motion) for being a held on the back side by publishing their animation API's open-sourced to the people ❤️\n\n## Introduction\n\n_I know animations are challenging to implement as well as finding the right library to suit your needs, creating animations for different elements and components, and managing them consistently across your application can be time-consuming and require significant effort and patience._\n\nThis is where \u003cMotionContainer /\u003e and useAnimationMixer() comes in. It’s a highly customizable, using a tiny (0.6kb) hook from motion and lightning-fast React component built to simplify the process of adding sophisticated animations. Leveraging the Motion library, it provides developers with a declarative approach to animate child elements based on their visibility in the viewport. With pre-defined animation modes and transition configurations, it eliminates the repetitive work of manually creating animations for every element, streamlining the process while delivering polished results.\n\nMotion Provider is a React animation library that simplifies complex motion design through a centralized animation system (CAS). It provides:\n\n- **Atomic Animation Components**: Pre-built motion primitives (`MotionContainer`, `MotionQueue`, `MotionText`)\n- **Synchronized Animations**: Coordinate animations across multiple components\n- **Dynamic Control**: Real-time animation control with hooks (`useAnimation`)\n- **Cross-Platform**: Works with Next.js, React Native, and WebGL\n\nKey differentiators:\n\n- 🌀 Built-in animation queue system\n- 🎮 Imperative animation control\n- 🌓 Automatic dark mode support\n- 📱 Mobile-first responsive animations\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"https://raw.githubusercontent.com/yourusername/motion-provider/main/demo.gif\"\u003e\n\u003c/p\u003e\n\n## 2. Features\n\n\u003cdiv align=\"center\"\u003e\n\n| Feature                        | Description                                                            |\n| ------------------------------ | ---------------------------------------------------------------------- |\n| Motion Queue System            | Sequential/parallel animations with linear/exponential delay logic     |\n| CAS (Central Animation System) | Centralized control for application-wide animation states              |\n| Animation Presets              | 40+ pre-built animations (fadeIn, rotateClockwise, filterBlurIn, etc.) |\n| Responsive Hooks               | useAnimation, useMotionState, useBreakpoint for dynamic control        |\n| TypeSafe API                   | Full TypeScript support with strict animation type checking            |\n| Performance Optimized          | WebGL fallbacks and requestAnimationFrame integration                  |\n\n\u003c/div\u003e\n\n### 3. Documentation \u0026 Examples\n\nMotion Provider comes with comprehensive documentation to help you get the most out of its features. Explore the following resources:\n\n- **Component API Reference**  \n  Detailed information about each component and hook.\n\n- **Tutorials \u0026 Guides**  \n  Step-by-step guides for implementing complex animations.\n\n- **Examples**  \n  Check out real-world examples demonstrating various use cases:\n  - **SaaS SPA App:** Learn motion state management and advanced image animations.\n  - **Crypto Landing App:** Implement coloured and controlled animations.\n  - **Agency Landing App:** Master text animations and synchronized effects.\n  - **NFT Landing App:** Explore layout animations and dynamic motion queues.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/example-saas.gif\" width=\"45%\" alt=\"SaaS SPA App Example\" style=\"margin: 10px;\"\u003e\n  \u003cimg src=\"assets/example-crypto.gif\" width=\"45%\" alt=\"Crypto Landing App Example\" style=\"margin: 10px;\"\u003e\n\u003c/div\u003e\n\n## Contact\n\nFor support and inquiries:\n\nEmail: hello@burakdev.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasculinn%2Fmotion-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasculinn%2Fmotion-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasculinn%2Fmotion-provider/lists"}