[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":80,"blog-\u002Fblog\u002Fintroduction-to-framer-motion":589,"blog-author-\u002Fblog\u002Fintroduction-to-framer-motion":1004},{"id":4,"extension":5,"footer":6,"header":66,"meta":77,"stem":78,"__hash__":79},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":10,"legal":56},{"name":8,"tagline":9},"Pieces","The memory layer for modern work.",[11,26,41],{"title":12,"links":13},"Product",[14,17,21,24],{"label":15,"href":16},"Pieces Desktop","\u002Fdownloads",{"label":18,"href":19,"external":20},"Pieces MCP","url:docs.mcp.overview",true,{"label":22,"href":23,"external":20},"Pieces APIs","url:docs.api",{"label":25,"href":16},"Downloads",{"title":27,"links":28},"Resources",[29,32,35,38],{"label":30,"href":31,"external":20},"Documentation","url:docs.home",{"label":33,"href":34},"Blog","\u002Fblog",{"label":36,"href":37},"Changelog","\u002Fchangelog",{"label":39,"href":40,"external":20},"GitHub","url:github.org",{"title":42,"links":43},"Company",[44,47,50,53],{"label":45,"href":46},"About","\u002Fabout",{"label":48,"href":49},"Enterprise","\u002Fenterprise",{"label":51,"href":52,"external":20},"Discord","url:social.discord",{"label":54,"href":55,"external":20},"X \u002F Twitter","url:social.x",[57,60,63],{"label":58,"href":59,"external":20},"Privacy Policy","url:legal.privacyPolicy",{"label":61,"href":62,"external":20},"Refund Policy","url:legal.refundPolicy",{"label":64,"href":65,"external":20},"Terms of Service","url:legal.terms",{"links":67,"signIn":68,"contact":71,"cta":74},[],{"label":69,"href":70},"Sign in","url:portal.home",{"label":72,"href":73},"Contact sales","url:site.contact",{"label":75,"href":76},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","Ia8tCWWqcGvuaIro8jwZ3HH-MwI66yqJpWshASJdYQ0",{"id":81,"extension":5,"links":82,"meta":586,"stem":587,"__hash__":588},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203,207,211,215,219,223,227,231,235,238,242,246,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,369,373,377,381,385,389,393,396,400,404,408,412,416,420,423,426,429,432,436,440,444,448,452,456,460,464,468,472,476,480,484,488,492,495,499,503,507,511,515,519,523,527,531,534,538,542,546,550,553,557,561,565,568,571,575,579,582],{"key":84,"label":85,"href":86},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":88,"label":89,"href":90},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":92,"label":93,"href":94},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":96,"label":97,"href":98},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":100,"label":101,"href":102},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":104,"label":105,"href":106},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":108,"label":109,"href":110},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":112,"label":113,"href":114},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":116,"label":117,"href":118},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":120,"label":121,"href":122},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":124,"label":125,"href":126},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":128,"label":129,"href":130},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":132,"label":133,"href":134},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":136,"label":137,"href":138},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":140,"label":141,"href":142},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":144,"label":145,"href":146},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":148,"label":149,"href":150},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":152,"label":153,"href":154},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":156,"label":157,"href":158},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":160,"label":161,"href":162},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":164,"label":165,"href":166},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":168,"label":169,"href":170},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":172,"label":173,"href":174},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":176,"label":177,"href":178},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":180,"label":181,"href":182},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":184,"label":185,"href":186},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":188,"label":189,"href":190},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":192,"label":193,"href":194},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":196,"label":197,"href":198},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":200,"label":201,"href":202},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":204,"label":205,"href":206},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":208,"label":209,"href":210},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":212,"label":213,"href":214},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":216,"label":217,"href":218},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":220,"label":221,"href":222},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":224,"label":225,"href":226},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":228,"label":229,"href":230},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":232,"label":233,"href":234},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":236,"label":237,"href":86},"docs.desktop.download","Desktop download docs",{"key":239,"label":240,"href":241},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":243,"label":244,"href":245},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":247,"label":248,"href":154},"docs.piecesOS.install","PiecesOS install docs",{"key":250,"label":251,"href":252},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":254,"label":255,"href":256},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":258,"label":259,"href":260},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":262,"label":263,"href":264},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":266,"label":267,"href":268},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":270,"label":271,"href":272},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":274,"label":275,"href":276},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":278,"label":279,"href":280},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":282,"label":283,"href":284},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":286,"label":287,"href":288},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":290,"label":291,"href":292},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":294,"label":295,"href":296},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":298,"label":299,"href":300},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":302,"label":303,"href":304},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":306,"label":307,"href":308},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":310,"label":311,"href":312},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":314,"label":315,"href":316},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":318,"label":319,"href":320},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":322,"label":323,"href":324},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":326,"label":327,"href":328},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":330,"label":331,"href":332},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":334,"label":335,"href":336},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":338,"label":339,"href":340},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":342,"label":343,"href":344},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":346,"label":347,"href":348},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":350,"label":351,"href":352},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":354,"label":355,"href":356},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":358,"label":359,"href":360},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":362,"label":363,"href":364},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":366,"label":367,"href":368},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":370,"label":371,"href":372},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":374,"label":375,"href":376},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":378,"label":379,"href":380},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":382,"label":383,"href":384},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":386,"label":387,"href":388},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":390,"label":391,"href":392},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":394,"label":36,"href":395},"site.changelog","https:\u002F\u002Fpieces.app\u002Fchangelog",{"key":397,"label":398,"href":399},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":401,"label":402,"href":403},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":405,"label":406,"href":407},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":409,"label":410,"href":411},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":413,"label":414,"href":415},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":417,"label":418,"href":419},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":421,"label":33,"href":422},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":424,"label":51,"href":425},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":427,"label":54,"href":428},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":430,"label":431,"href":428},"social.twitter","Twitter",{"key":433,"label":434,"href":435},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":437,"label":438,"href":439},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":441,"label":442,"href":443},"social.linkedin","LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":445,"label":446,"href":447},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":449,"label":450,"href":451},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":453,"label":454,"href":455},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":457,"label":458,"href":459},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":461,"label":462,"href":463},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":465,"label":466,"href":467},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":469,"label":470,"href":471},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":473,"label":474,"href":475},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":477,"label":478,"href":479},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":481,"label":482,"href":483},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":485,"label":486,"href":487},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":489,"label":490,"href":491},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":493,"label":494,"href":194},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":496,"label":497,"href":498},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":500,"label":501,"href":502},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":504,"label":505,"href":506},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":508,"label":509,"href":510},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":512,"label":513,"href":514},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":516,"label":517,"href":518},"legal.privacyPolicy","Privacy policy","https:\u002F\u002Fpieces.app\u002Flegal\u002Fprivacy-policy",{"key":520,"label":521,"href":522},"legal.refundPolicy","Refund policy","https:\u002F\u002Fpieces.app\u002Flegal\u002Frefund-policy",{"key":524,"label":525,"href":526},"legal.terms","Terms","https:\u002F\u002Fpieces.app\u002Flegal\u002Fterms",{"key":528,"label":529,"href":530},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":532,"label":533,"href":447},"videos.youtubeChannel","YouTube channel",{"key":535,"label":536,"href":537},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":539,"label":540,"href":541},"videos.snippetDiscovery","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":543,"label":544,"href":545},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":547,"label":548,"href":549},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":551,"label":552,"href":463},"sales.feedback","Feedback discussions",{"key":554,"label":555,"href":556},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":558,"label":559,"href":560},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":562,"label":563,"href":564},"routes.home","Home route","\u002F",{"key":566,"label":567,"href":46},"routes.about","About route",{"key":569,"label":570,"href":16},"routes.downloads","Downloads route",{"key":572,"label":573,"href":574},"routes.pricing","Pricing route","\u002Fpricing",{"key":576,"label":577,"href":578},"routes.security","Security route","\u002Fsecurity",{"key":580,"label":581,"href":49},"routes.enterprise","Enterprise route",{"key":583,"label":584,"href":585},"routes.thankYou","Thank you \u002F download route","\u002Fthank-you",{},"data\u002Fshared\u002Furls","P27xKEauu8D-8sfyr0wR4giF0teFSaCuAQ8kgcICQdI",{"id":590,"title":591,"author":592,"authorPhoto":593,"authorPhotoAlt":594,"authorSlug":595,"body":596,"buttonText":594,"buttonUrl":594,"category":990,"date":991,"description":992,"draft":993,"editorsPick":993,"extension":994,"featured":993,"image":995,"imageAlt":996,"meta":997,"navigation":20,"ogImage":594,"ogImageAlt":594,"path":998,"seo":999,"stem":1000,"tags":1001,"__hash__":1003},"blog\u002Fblog\u002Fintroduction-to-framer-motion.md","Introduction to Framer Motion","The Pieces Team","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fannouncing-the-pieces-visual-studio-extension\u002Fauthor.png",null,"the-pieces-team",{"type":597,"value":598,"toc":981},"minimark",[599,617,620,626,629,654,659,662,665,671,674,685,688,691,697,700,706,709,715,718,721,725,734,737,743,746,752,761,767,770,774,777,785,788,792,801,804,812,815,827,830,836,839,845,848,854,857,863,866,872,875,883,886,892,895,917,920,926,929,932,938,941,952,956,959,970,973],[600,601,602,603,610,611,616],"p",{},"Building websites has become way easier with the libraries and packages that are available in the ",[604,605,609],"a",{"href":606,"rel":607},"https:\u002F\u002Fwww.builder.io\u002Fblog\u002Freact-js-in-2023",[608],"nofollow","React ecosystem",". But a touch of animation takes your website from dull and boring to rockstar status. In this blog post, we’re going to introduce ",[604,612,615],{"href":613,"rel":614},"https:\u002F\u002Fwww.framer.com\u002Fmotion\u002Fintroduction\u002F",[608],"a new animation library"," named Framer Motion. With the help of the Framer Motion library, we can make complex animation a breeze.",[600,618,619],{},"So without further ado, let's get started!",[600,621,622],{},[623,624,625],"strong",{},"Prerequisites",[600,627,628],{},"I highly recommend that you go through the below concepts so that you can follow along with this article:",[630,631,632,640,647],"ul",{},[633,634,635],"li",{},[604,636,639],{"href":637,"rel":638},"https:\u002F\u002Freactjs.org\u002Ftutorial\u002Ftutorial.html",[608],"Basics of React",[633,641,642],{},[604,643,646],{"href":644,"rel":645},"https:\u002F\u002Fstyled-components.com\u002F",[608],"Styled-components",[633,648,649],{},[604,650,653],{"href":651,"rel":652},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@keyframes",[608],"CSS Animation Keyframes",[655,656,658],"h2",{"id":657},"compare-basic-animation-with-framer-motion","Compare basic animation with Framer Motion",[600,660,661],{},"In this section of the blog post, we are going to compare basic animations with the animations built using react-motion. Let’s get started.",[600,663,664],{},"Suppose that you want to move a square div element along the x-axis of the viewport. Along with movement, you also need to fade the element when it reaches the right edge of the screen. A normal thing that we would do here is to do the following:",[666,667,668],"ol",{},[633,669,670],{},"Assign a class or an id to the DOM element. (Here, we’ll consider a div tag.)",[600,672,673],{},"Inside a .css file, we will add a height and width to the div element and provide some background color to it:",[675,676,681],"pre",{"className":677,"code":679,"language":680},[678],"language-text"," .square {\n   width: 30px;\n   height: 30px;\n   background-color: blue;\n}\n","text",[682,683,679],"code",{"__ignoreMap":684},"",[600,686,687],{},"This will help us to draw a blue square with a width and height of 30px.",[600,689,690],{},"If we need to manage the animation, then we need to create a keyframe animation for it. For each percentage of the animation, we’re going to provide what will be happening to the CSS property of the square div tag. We will name this animation moveToRight . Copy-paste the below code into your CSS file:",[675,692,695],{"className":693,"code":694,"language":680},[678],"  @keyframes moveToRight {\n0% {\n animation-timing-function: ease-in;\n opacity: 1;\n transform: translateX(0px);\n}\n25% {\n opacity: 0.8;\n}\n50% {\n opacity: 0.4;\n}\n75% {\n opacity: 0.1;\n}\n100% {\n opacity: 0;\n transform: translateX(1000px);\n }\n}\n",[682,696,694],{"__ignoreMap":684},[600,698,699],{},"We assign this animation to our square div tag’s CSS using the animation css property.",[675,701,704],{"className":702,"code":703,"language":680},[678],"  .square {\n     width: 30px;\n     height: 30px;\n     background-color: blue;\n     animation: moveToRight 3s ease 0s infinite; \u002F* Add this line*\u002F\n}\n",[682,705,703],{"__ignoreMap":684},[600,707,708],{},"Now, let’s create the same animation with the help of the Framer Motion library. Copy and paste the below code into your App.js file:",[675,710,713],{"className":711,"code":712,"language":680},[678]," className=\"square\"\n animate={{\n  x: [0, 1000],\n  opacity: [1, 0.8, 0.4, 0.1, 0],\n }}\n transition={{ ease: \"easeIn\", duration: 3, repeat: Infinity }}\n\u002F>;\n",[682,714,712],{"__ignoreMap":684},[600,716,717],{},"Voila! It’s as simple as adding a component. All of the properties related to animation are added using animate and Framer Motion transition props. We will dive deeper into these props in the coming sections of this blog post.",[600,719,720],{},"Before we build some examples, we’ll start off with the installation of our environment.",[655,722,724],{"id":723},"basic-setup","Basic setup",[600,726,727,728,733],{},"We’re going to build our examples in React. To set up the project, we’re going to make use of the utility ",[604,729,732],{"href":730,"rel":731},"https:\u002F\u002Fcreate-react-app.dev\u002F",[608],"create-react-app",". It’s a simple utility that helps you create an initial project structure with just one command. You won’t need to install this package. When using with npx, i.e., a node package, executing it will fetch the required package from the npm registry so that the package can be executed without local installation.",[600,735,736],{},"Now, let’s create our project. Copy and paste the below command in your terminal:",[675,738,741],{"className":739,"code":740,"language":680},[678],"npx create-react-app\n",[682,742,740],{"__ignoreMap":684},[600,744,745],{},"Where is the name of your react project that you are creating. Next, navigate to your project folder and start the project:",[675,747,750],{"className":748,"code":749,"language":680},[678],"cd npm start\n",[682,751,749],{"__ignoreMap":684},[600,753,754,755,760],{},"Once the server is started, you will be welcomed with the homepage of your React app. Now it’s time for us to install the ",[604,756,759],{"href":757,"rel":758},"https:\u002F\u002Fwww.framer.com\u002Fdocs\u002F",[608],"framer-motion"," library. Copy and paste the below command into your terminal:",[675,762,765],{"className":763,"code":764,"language":680},[678],"npm install framer-motion\n",[682,766,764],{"__ignoreMap":684},[600,768,769],{},"After we install Framer Motion, we’re ready to start building our examples!",[655,771,773],{"id":772},"use-cases","Use cases",[600,775,776],{},"Now that we know how easy it is to animate with the help of Framer Motion, we can use to build simple use cases:",[666,778,779,782],{},[633,780,781],{},"Animating in the viewport",[633,783,784],{},"Bouncing ball animation",[600,786,787],{},"Let’s get started.",[655,789,791],{"id":790},"animating-objects-in-the-viewport","Animating objects in the viewport",[600,793,794,795,800],{},"There are some really awesome websites, like ",[604,796,799],{"href":797,"rel":798},"http:\u002F\u002Fapple.com\u002F",[608],"apple.com",", that showcase cool animations when a particular object is inside the viewport. Examples of such animation include popping in some animated objects in the viewport or enlarging the text’s size to emphasize a message. These effects can be categorized as scroll based-animations and have some similarity with the parallax effect.",[600,802,803],{},"In this case, we’re going to do the following things:",[630,805,806,809],{},[633,807,808],{},"Once the object is in viewport, we’re going to scale and display the rotated object",[633,810,811],{},"When in viewport, we’re going to enlarge a paragraph",[600,813,814],{},"Let’s start by creating the basic structure of our example. This basic structure includes:",[630,816,817,824],{},[633,818,819],{},[604,820,823],{"href":821,"rel":822},"https:\u002F\u002Fiplocation.io\u002Florem-ipsum",[608],"Lorem Ipsum text",[633,825,826],{},"CSS to bring the text into the layout",[600,828,829],{},"Inside your App.js file, copy and paste the below lorem ipsum text in such a way that you have a page where the text overflows the page, thus enabling a scroll bar:",[675,831,834],{"className":832,"code":833,"language":680},[678],"\u003Ch1 className=\"question\">What is Lorem Ipsum?\u003C\u002Fh1>  Lorem Ipsum is simply dummy text of the printing and typesetting  industry. Lorem Ipsum has been the industry's standard dummy text ever  since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only  five centuries, but also the leap into electronic typesetting,  remaining essentially unchanged. It was popularized in the 1960s with  the release of Letraset sheets containing Lorem Ipsum passages, and  more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.\u003C\u002Fdiv>\n",[682,835,833],{"__ignoreMap":684},[600,837,838],{},"Once the text is placed, make sure your App.js file looks like below:",[675,840,843],{"className":841,"code":842,"language":680},[678],"import { motion } from \"framer-motion\";\nimport \".\u002Fstyles.css\";\nexport default function App() {\n return (\n     What is Lorem Ipsum?   Lorem Ipsum is simply dummy text of the printing and typesetting   industry. Lorem Ipsum has been the industry's standard dummy text ever   since the 1500s, when an unknown printer took a galley of type and   scrambled it to make a type specimen book. It has survived not only five   centuries, but also the leap into electronic typesetting, remaining   essentially unchanged. It was popularised in the 1960s with the release   of Letraset sheets containing Lorem Ipsum passages, and more recently   with desktop publishing software like Aldus PageMaker including versions   of Lorem Ipsum.    \u002F***  Lorem Ipsum text paragraphs*\u002F   Why do we use it? Contrary to popular It  is a long established fact that a reader will be distracted by the  readable content of a page when looking at its layout. The point of  using Lorem Ipsum is that it has a more-or-less normal distribution of  letters, as opposed to using 'Content here, content here', making it  look like readable English. Many desktop publishing packages and web  page editors now use Lorem Ipsum as their default model text, and a  search for 'lorem ipsum' will uncover many web sites still in their  infancy. Various versions have evolved over the years, sometimes by  accident, sometimes on purpose (injected humour and the like).   \n );\n}\n",[682,844,842],{"__ignoreMap":684},[600,846,847],{},"Now finally update the CSS of the App class:",[675,849,852],{"className":850,"code":851,"language":680},[678],".App {\n  font-family: sans-serif;\n  margin-left: 14rem;\n  margin-right: 14rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n",[682,853,851],{"__ignoreMap":684},[600,855,856],{},"To scale and animate an object when it’s in the viewport, simply place the object at the top of all of the Lorem Ipsum content and set the position attribute of the object to be absolute. Here’s what it will look like:",[675,858,861],{"className":859,"code":860,"language":680},[678],"import { motion } from \"framer-motion\";\nimport \".\u002Fstyles.css\";\nexport default function App() {\n return (\n{\u002F* Objects to animate *\u002F}     className=\"blob\"\u002F> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\u002F***  Lorem Ipsum text*\u002F Why do we use it? Contrary to popular It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). \n );\n}\n",[682,862,860],{"__ignoreMap":684},[600,864,865],{},"We’re going to add a new CSS rule inside our style.css file called “blob.” This will be the styles for the object that we need to animate. Copy and paste the below code in your style.css file:",[675,867,870],{"className":868,"code":869,"language":680},[678],".blob {\n  width: 100px;\n  height: 100px;\n  background-color: teal;\n  position: absolute; \u002F* set this *\u002F\n  top: 1200px;\n  left: -250px;\n  z-index: -999;\n  border-radius: 25px 50px 30px 50px;\n}\n",[682,871,869],{"__ignoreMap":684},[600,873,874],{},"The above CSS will also ensure the following things:",[630,876,877,880],{},[633,878,879],{},"The object will be out of the viewport with the help of top: 1200px.",[633,881,882],{},"It will not obstruct the text by overlapping on them. Instead it will be below the text with the help of z-index: -999.",[600,884,885],{},"Now to animate this, we just need to make little changes to our object’s div tag. Replace the previous object div tag with the below code:",[675,887,890],{"className":888,"code":889,"language":680},[678],"   className=\"blob\"\n   initial={{ opacity: 0.5 }}\n   whileInView={{ opacity: 0.5, scale: [1, 0.8, 1] }}\n   animate={{\n    rotate: [0, 150, 200, 150, 0]\n   }}\n   transition={{\n    type: \"spring\",\n    duration: 4,\n    repeat: Infinity\n   }}\n  \u002F\n",[682,891,889],{"__ignoreMap":684},[600,893,894],{},"Here is the explanation of the above code:",[630,896,897,900,903,911,914],{},[633,898,899],{},"We added the motion keyword to the div tag to animated it and make it accept props related to Framer Motion.",[633,901,902],{},"The initial attribute helps us set the enter animation of the object.",[633,904,905,906],{},"The animate prop will be used to animate the object to the values inside this prop. The animation follows some default standards.",[630,907,908],{},[633,909,910],{},"In this case, we update the rotate property of the object. We are passing an array to this property because the framer will consider an array of values to be keyframed. This is a really cool feature that the framer provides, since we don’t need to set up the new keyframe animation from scratch— it’s taken care of internally by the framer library.",[633,912,913],{},"The transition prop will help us to set the animation defaults. In this case, we set the animation to be performed an infinite number of times with a duration of 4 seconds.",[633,915,916],{},"The whileInview prop will help us to achieve what we wanted here in the first place— It will animate the object with the properties that are set in it.",[600,918,919],{},"To make this look cooler, I’ve added the same object again with some minor changes. Copy and paste it to replace your existing object animation code in the App.js file:",[675,921,924],{"className":922,"code":923,"language":680},[678],"   className=\"blob\"\n   initial={{ opacity: 0.5 }}\n   whileInView={{ opacity: 0.5, scale: [1, 0.8, 1] }}\n   animate={{\n    rotate: [0, 150, 200, 150, 0]\n   }}\n   transition={{\n    type: \"spring\",\n    duration: 4,\n    repeat: Infinity\n   }}\n  \u002F>\n  \n   className=\"blob\"\n   initial={{ scale: 1.5, opacity: 0.5 }}\n   whileInView={{ opacity: 0.5 }}\n   animate={{\n    rotate: [0, 150, 200, 150, 0]\n   }}\n   transition={{\n    type: \"spring\",\n    duration: 4,\n    repeat: Infinity\n   }}\n  \u002F>\n",[682,925,923],{"__ignoreMap":684},[655,927,784],{"id":928},"bouncing-ball-animation",[600,930,931],{},"Next, we have a bouncing ball animation. As the name of this section suggests, we’re going to make a bouncing ball. Create a new file called BouncingBall.js and copy-paste the following code:",[675,933,936],{"className":934,"code":935,"language":680},[678],"import \".\u002Fstyles.css\";\nimport { motion } from \"framer-motion\";\nexport default function App() {\n return (\n       height=\"400\"    width=\"400\"    style={{     border: \"1px solid black\"    }}   >         cx=\"50\"     cy=\"50\"     r=\"40\"     stroke=\"black\"     stroke-width=\"3\"     animate={{      cy: [310, 50]     }}     transition={{      ease: \"easeOut\",      duration: 0.9,      yoyo: Infinity     }}    \u002F>         \n );\n}\n",[682,937,935],{"__ignoreMap":684},[600,939,940],{},"In this code:",[630,942,943,946,949],{},[633,944,945],{},"We create an SVG with a height and width of 400px.",[633,947,948],{},"We create a circle with a center of (50, 50) with a radius of 40. As you may have observed, we’ve added a motion keyword to the circle tag. This will ensure that we can use framer animation props to a normal circle tag. Since we want a bouncing animation, we alter the y-coordinate of the circle’s center. We change the cy attribute of the circle from 310 to 50 in the animate prop. Finally, it’s time to change some default configurations for the animation with the help of a transition prop. A thing to note here is that the yoyo property has an infinity value. This makes sure that our animation will run for an infinite amount of time.",[633,950,951],{},"Finally, we add a line at the bottom to represent the ground.",[655,953,955],{"id":954},"summary","Summary",[600,957,958],{},"In this article, we covered:",[630,960,961,964,967],{},[633,962,963],{},"What is Framer Motion?",[633,965,966],{},"A comparison between a normal animation and a Framer Motion animation",[633,968,969],{},"Building two use cases of Framer Motion",[600,971,972],{},"Now you can use the Framer Motion library to build beautiful 60fps animations!",[600,974,975,976,980],{},"To learn more about creating animations with React, check out this ",[604,977,979],{"href":613,"rel":978},[608],"Particles.js alternative",".",{"title":684,"searchDepth":982,"depth":982,"links":983},2,[984,985,986,987,988,989],{"id":657,"depth":982,"text":658},{"id":723,"depth":982,"text":724},{"id":772,"depth":982,"text":773},{"id":790,"depth":982,"text":791},{"id":928,"depth":982,"text":784},{"id":954,"depth":982,"text":955},"AI & LLM","2022-12-15T00:00:00.000Z","A touch of animation takes your website from dull to rockstar status. Let's talk about the Framer Motion library that makes complex animation a breeze.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-framer-motion\u002Fhero.jpeg","decorative cover image that shows a long exposure image of a highway",{},"\u002Fblog\u002Fintroduction-to-framer-motion",{"title":591,"description":992},"blog\u002Fintroduction-to-framer-motion",[1002],"react-7; webdev","gBsv-jAOsq5OVse0P8w4foFfOmBfmKVSDNEUDskYTJE",{"id":1005,"title":592,"body":1006,"description":684,"draft":993,"extension":994,"meta":1010,"navigation":20,"path":1011,"photo":1012,"photoAlt":594,"seo":1013,"stem":1014,"__hash__":1015},"authors\u002Fauthors\u002Fthe-pieces-team.md",{"type":597,"value":1007,"toc":1008},[],{"title":684,"searchDepth":982,"depth":982,"links":1009},[],{},"\u002Fauthors\u002Fthe-pieces-team","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fthe-pieces-team.png",{"title":592,"description":684},"authors\u002Fthe-pieces-team","_2O_QA8d8RjXlBp0ck4PWDG6iA74zW1kN0R0gkn2Lls"]