[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96191":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":15,"rankGlobal":8,"rankLanguage":8,"license":16,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":8,"pushedAt":8,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":14,"starSnapshotCount":14,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},96191,"motion-panels","letstri\u002Fmotion-panels","letstri",null,"motion-panels.letstri.dev","TypeScript",125,1,111,0,37.9,"MIT License",false,"main",true,[],"2026-09-20 04:01:32","# motion-panels\n\nResizable panels animated with [Motion](https:\u002F\u002Fmotion.dev). A framework-agnostic core with a React adapter, unstyled, and with no layout library underneath.\n\nThink `react-resizable-panels`, except the folding, collapsing and snapping are real animations — and the resizing engine is plain DOM, so other frameworks can sit on top of it.\n\n```sh\npnpm add motion-panels motion       # the core alone\npnpm add motion-panels motion react # with the React adapter\n```\n\nOr through shadcn, which writes a styled separator over the same components into `components\u002Fui\u002Fmotion-panels.tsx`:\n\n```sh\nnpx shadcn@latest add https:\u002F\u002Fmotion-panels.letstri.dev\u002Fr\u002Fmotion-panels.json\n```\n\n```tsx\nimport { Group, Panel, Separator } from 'motion-panels\u002Freact'\nimport { useState } from 'react'\n\nfunction Layout() {\n  const [size, setSize] = useState(280)\n\n  return (\n    \u003CGroup orientation=\"horizontal\">\n      \u003CPanel minSize={200} maxSize={480} size={size} onSizeChange={setSize}>\n        \u003CSidebar \u002F>\n      \u003C\u002FPanel>\n      \u003CSeparator \u002F>\n      \u003CPanel>\n        \u003CContent \u002F>\n      \u003C\u002FPanel>\n    \u003C\u002FGroup>\n  )\n}\n```\n\nSpace the panels with padding, a flex gap on the group (it opens on both sides of a separator), or not at all: the room a panel may take is measured, never assumed from the group extent. Every size is pixels or a percentage of the group — `useState\u003CSize>('30%')` gives a panel that follows the group as it resizes, and `onSizeChange` reports back in whichever form it was given.\n\nFolding, collapsing, pinning, nesting, separator intersections, keyboard and RTL support, plus the framework-agnostic core API — all with live demos:\n\n**[motion-panels.letstri.dev](https:\u002F\u002Fmotion-panels.letstri.dev)**\n\n## License\n\nMIT © Valerii Strilets\n","motion-panels 是一个轻量、框架无关的可拖拽面板布局库，专注于真实物理动画的折叠、收起、吸附与嵌套交互。核心基于原生 DOM 操作实现高精度尺寸计算，不依赖任何布局库；提供 React 适配器和无样式组件，支持像素\u002F百分比尺寸、键盘导航、RTL 和多分隔符交点处理。所有动画由 Motion 库驱动，确保流畅响应式体验。适用于需要高度定制化、动画增强型多栏布局的管理后台、IDE 界面、数据看板等 Web 应用场景。",2,"2026-09-12 02:30:03","CREATED_QUERY"]