[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2035":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},2035,"motion","motiondivision\u002Fmotion","motiondivision","A modern animation library for React and JavaScript","https:\u002F\u002Fmotion.dev",null,"TypeScript",32289,1198,115,0,16,67,391,57,44.24,"MIT License",false,"main",[25,26,5,27,28,29],"animation","animation-js","react","reactanimations","spring","2026-06-12 02:00:36","\u003Ch1 align=\"center\"> \u003Cimg width=\"35\" height=\"35\" alt=\"Motion logo\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F00d6d1c3-72c4-4c2f-a664-69da13182ffc\" \u002F>\u003Cbr \u002F>Motion\u003C\u002Fh1>\n\u003Ch3 align=\"center\">\n  An open source animation library\u003Cbr \u002F>for JavaScript, React and Vue\n\u003C\u002Fh3>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmotion\" rel=\"noopener noreferrer nofollow\" >\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fmotion?color=0368FF&label=version\" alt=\"npm version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmotion\" rel=\"noopener noreferrer nofollow\" >\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fframer-motion?color=8D30FF&label=npm\" alt=\"npm downloads per month\">\u003C\u002Fa>\n  \u003Ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fmotion\">\u003Cimg alt=\"jsDelivr hits (npm)\" src=\"https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhm\u002Fframer-motion?logo=jsdeliver&color=FF4FBA\">\u003C\u002Fa>\n  \u003Cimg alt=\"NPM License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Fmotion?color=FF2B6E\">\n\u003C\u002Fp>\n\n```bash\n# React \u002F JavaScript\nnpm install motion\n\n# Vue\nnpm install motion-v\n```\n\n## Table of Contents\n\n1. [Why Motion?](#why-motion)\n2. [🍦 Platforms](#-platforms)\n3. [🎓 Examples](#-examples)\n4. [⚡️ Motion+](#-motion)\n5. [👩🏻‍⚖️ License](#-license)\n6. [💎 Contribute](#-contribute)\n7. [✨ Sponsors](#-sponsors)\n\n## Why Motion?\n\n-   **Simple API:** First-class React, JavaScript, and Vue packages.\n-   **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.\n-   **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.\n    **Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.\n\n## 🍦 Platforms\n\nMotion is available for [React](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Freact), [JavaScript](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fquick-start) and [Vue](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fvue).\n\n### React\n\n```jsx\nimport { motion } from \"motion\u002Freact\"\n\nfunction Component() {\n    return \u003Cmotion.div animate={{ x: 100 }} \u002F>\n}\n```\n\nGet started with [Motion for React](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Freact).\n\n**Note:** Framer Motion is now Motion. Import from `motion\u002Freact` instead of `framer-motion`.\n\n### JS\n\n```javascript\nimport { animate } from \"motion\"\n\nanimate(\"#box\", { x: 100 })\n```\n\nGet started with [JavaScript](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fquick-start).\n\n### Vue\n\n```html\n\u003Cscript>\n    import { motion } from \"motion-v\"\n\u003C\u002Fscript>\n\n\u003Ctemplate> \u003Cmotion.div :animate={{ x: 100 }} \u002F> \u003C\u002Ftemplate>\n```\n\nGet started with [Motion for Vue](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fvue).\n\n## 🎓 Examples & tutorials\n\nBrowse 330+ [official examples](https:\u002F\u002Fmotion.dev\u002Fexamples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.\n\nOver 100 examples come with a full step-by-step [tutorial](https:\u002F\u002Fmotion.dev\u002Ftutorials).\n\n## ⚡️ Motion+\n\nA one-time payment, lifetime-updates membership:\n\n-   **330+ examples**\n-   **100+ tutorials**\n-   **Premium APIs** like [Cursor](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fcursor) and [Ticker](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Freact-ticker)\n-   **Transition editor** for Cursor and VS Code\n-   **AI skills**\n-   **Private Discord**\n-   **Early access content**\n\n[Get Motion+](https:\u002F\u002Fmotion.dev\u002Fplus)\n\n## 👩🏻‍⚖️ License\n\n-   Motion is MIT licensed.\n\n## 💎 Contribute\n\n-   Want to contribute to Motion? Our [contributing guide](https:\u002F\u002Fgithub.com\u002Fmotiondivision\u002Fmotion\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md) has you covered.\n\n## ✨ Sponsors\n\nMotion is sustainable thanks to the kind support of its sponsors.\n\n[Become a sponsor](https:\u002F\u002Fmotion.dev\u002Fsponsor)\n\n### Partners\n\nMotion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.\n\n\u003Ca href=\"https:\u002F\u002Fframer.link\u002FFlnUbQY\">\n  \u003Cimg alt=\"Framer\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F22a79be7-672e-4336-bfb7-5d55d1deb917\" width=\"250px\" height=\"150px\">\n\u003C\u002Fa>\n\nMotion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.\n\n\u003Ca href=\"https:\u002F\u002Fcursor.com\">\n  \u003Cimg alt=\"Cursor\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F81c482d3-c2c2-4b35-bbcf-933b28d5b448\" width=\"250px\" height=\"150px\" \u002F>\n\u003C\u002Fa>\n\n### Platinum\n\n\u003Ca href=\"https:\u002F\u002Flinear.app\">\u003Cimg alt=\"Linear\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff9ce44b4-af28-4770-bb6e-9515b474bfb2\" width=\"250px\" height=\"150px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ffigma.com\">\u003Cimg alt=\"Figma\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F1077d0ab-4305-4a1f-81c8-d5be8c4c6717\" width=\"250px\" height=\"150px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fsanity.io\">\u003Cimg alt=\"Sanity\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F80134088-f456-483f-8edd-940593c120ce\" width=\"250px\" height=\"150px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fanimations.dev\">\u003Cimg alt=\"Sanity\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F7c5ab87d-c7d9-44b4-9c7e-f9e6a9f3ba3b\" width=\"250px\" height=\"150px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fclerk.com?utm_campaign=motion\">\u003Cimg alt=\"Clerk\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F16789f85-eaf4-46fb-9961-b3e66d33afbc\" width=\"250px\" height=\"150px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fwww.greptile.com\u002F?utm_source=motion&utm_medium=sponsorship\">\u003Cimg alt=\"Greptile\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F6d1d7100-46b0-420b-8ce5-a18026c6297f\" width=\"250px\" height=\"150px\">\u003C\u002Fa>\n\n### Gold\n\n### Silver\n\n\u003Ca href=\"https:\u002F\u002Fliveblocks.io\">\u003Cimg alt=\"Liveblocks\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F28eddbe5-1617-4e74-969d-2eb6fcd481af\" width=\"150px\" height=\"100px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fwww.frontend.fyi\u002F?utm_source=motion\">\u003Cimg alt=\"Frontend.fyi\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff16e3eb9-f0bd-4ad1-8049-f079a3d65c69\" width=\"150px\" height=\"100px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ffirecrawl.dev\">\u003Cimg alt=\"Firecrawl\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F2c44e7f4-5c2a-4714-9050-1570538665ff\" width=\"150px\" height=\"100px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fpuzzmo.com\">\u003Cimg alt=\"Puzzmo\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe32205a7-3ab1-41ec-8729-a794058fd655\" width=\"150px\" height=\"100px\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fbolt.new\">\u003Cimg alt=\"Bolt.new\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F7932d4b2-bb6c-422e-82b9-6ad78a7e3090\" width=\"150px\" height=\"100px\">\u003C\u002Fa>\n\n### Personal sponsors\n\n-   [OlegWock](https:\u002F\u002Fsinja.io)\n-   [Lambert Weller](https:\u002F\u002Fgithub.com\u002Fl-mbert)\n-   [Jake LeBoeuf](https:\u002F\u002Fjklb.wf)\n","Motion 是一个适用于 React 和 JavaScript 的现代动画库。它提供了简洁的 API，支持 React、JavaScript 和 Vue 平台，并且结合了 JavaScript 与原生浏览器 API 的优势，实现高达 120fps 的 GPU 加速动画效果。Motion 拥有强大的功能集，包括手势识别、弹簧动画、布局转换、滚动联动效果等。该库采用 TypeScript 编写，具备广泛的测试覆盖和树摇优化，确保了其在生产环境中的稳定性和高效性。无论是需要为 Web 应用添加简单过渡还是创建复杂的交互式动画，Motion 都能提供全面的支持。",2,"2026-06-11 02:47:42","top_all"]