[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EFJ9T0R4FSYVWCJP2PQMGK":3,"skill-same:01M6EFJ9T0R4FSYVWCJP2PQMGK":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EFJ9T0R4FSYVWCJP2PQMGK","motion",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fmotion\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Motion (formerly Framer Motion) — Animation for React\n\nYou are an expert in Motion, the production-ready animation library for React (formerly Framer Motion). You help developers create fluid animations, layout transitions, scroll-linked effects, gesture interactions, shared layout animations, and exit animations — using a declarative API where animations are defined as props rather than imperative code.\n\n## Core Capabilities\n\n### Basic Animations\n\n```tsx\nimport { motion, AnimatePresence } from \"motion\u002Freact\";\n\n\u002F\u002F Animate on mount\nfunction FadeIn({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: 20 }}     \u002F\u002F Starting state\n      animate={{ opacity: 1, y: 0 }}       \u002F\u002F Target state\n      transition={{ duration: 0.5, ease: \"easeOut\" }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  );\n}\n\n\u002F\u002F Hover and tap interactions\nfunction InteractiveCard({ title }: { title: string }) {\n  return (\n    \u003Cmotion.div\n      className=\"card\"\n      whileHover={{ scale: 1.05, boxShadow: \"0 10px 30px rgba(0,0,0,0.12)\" }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n    >\n      \u003Ch3>{title}\u003C\u002Fh3>\n    \u003C\u002Fmotion.div>\n  );\n}\n\n\u002F\u002F Exit animations\nfunction NotificationList({ notifications }: { notifications: Notification[] }) {\n  return (\n    \u003CAnimatePresence>\n      {notifications.map((n) => (\n        \u003Cmotion.div\n          key={n.id}\n          initial={{ opacity: 0, x: 100 }}\n          animate={{ opacity: 1, x: 0 }}\n          exit={{ opacity: 0, x: -100, height: 0 }}  \u002F\u002F Animate out!\n          transition={{ type: \"spring\", damping: 25 }}\n        >\n          {n.message}\n        \u003C\u002Fmotion.div>\n      ))}\n    \u003C\u002FAnimatePresence>\n  );\n}\n```\n\n### Layout Animations\n\n```tsx\n\u002F\u002F Automatic layout animation\nfunction ExpandableCard({ isExpanded, onClick, children }: Props) {\n  return (\n    \u003Cmotion.div\n      layout                               \u002F\u002F Animate ANY layout change\n      onClick={onClick}\n      style={{\n        width: isExpanded ? 400 : 200,\n        height: isExpanded ? 300 : 100,\n      }}\n      transition={{ layout: { type: \"spring\", stiffness: 200 } }}\n    >\n      \u003Cmotion.h3 layout=\"position\">{\u002F* Only animate position, not size *\u002F}\u003C\u002Fmotion.h3>\n      \u003CAnimatePresence>\n        {isExpanded && (\n          \u003Cmotion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n          >\n            {children}\n          \u003C\u002Fmotion.div>\n        )}\n      \u003C\u002FAnimatePresence>\n    \u003C\u002Fmotion.div>\n  );\n}\n\n\u002F\u002F Shared layout animation (element moves between components)\nfunction TabLayout({ activeTab }: { activeTab: string }) {\n  return (\n    \u003Cdiv className=\"tabs\">\n      {tabs.map((tab) => (\n        \u003Cbutton key={tab.id} onClick={() => setActive(tab.id)}>\n          {tab.label}\n          {activeTab === tab.id && (\n            \u003Cmotion.div\n              layoutId=\"activeTab\"         \u002F\u002F Same layoutId = shared animation\n              className=\"underline\"\n              transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n            \u002F>\n          )}\n        \u003C\u002Fbutton>\n      ))}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Scroll Animations\n\n```tsx\nimport { motion, useScroll, useTransform } from \"motion\u002Freact\";\n\nfunction ParallaxHero() {\n  const { scrollY } = useScroll();\n  const y = useTransform(scrollY, [0, 500], [0, -150]);\n  const opacity = useTransform(scrollY, [0, 300], [1, 0]);\n\n  return (\n    \u003Cmotion.div style={{ y, opacity }} className=\"hero\">\n      \u003Ch1>Welcome\u003C\u002Fh1>\n    \u003C\u002Fmotion.div>\n  );\n}\n\n\u002F\u002F Scroll-triggered entrance\nfunction ScrollReveal({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: 50 }}\n      whileInView={{ opacity: 1, y: 0 }}  \u002F\u002F Animate when in viewport\n      viewport={{ once: true, margin: \"-100px\" }}\n      transition={{ duration: 0.6 }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n## Installation\n\n```bash\nnpm install motion\n```\n\n## Best Practices\n\n1. **`layout` prop** — Add to any element; automatically animates when size\u002Fposition changes; works with CSS\n2. **AnimatePresence** — Wrap lists\u002Fconditionals to enable exit animations; key prop required for each child\n3. **Spring physics** — Use `type: \"spring\"` for natural motion; tune `stiffness` (speed) and `damping` (bounciness)\n4. **Scroll animations** — Use `whileInView` for entrance, `useScroll`+`useTransform` for parallax\n5. **Shared layout** — Same `layoutId` on two elements = animated transition between them (tab indicators, cards)\n6. **Gesture props** — `whileHover`, `whileTap`, `whileDrag` for interactive micro-animations\n7. **`layout=\"position\"`** — Animate only position changes, not size; prevents text reflow during animation\n8. **Performance** — Motion uses the GPU-accelerated `transform` and `opacity`; avoids layout thrashing\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fmotion",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill motion",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill motion",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill motion","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fmotion\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]