ryan-yang125/motion-lexicon · 2026 年收录

[开源推荐] 可直接安装的 React 动效组件与基础动作库

可直接安装的 React 动效组件与基础动作库 Motion Lexicon 是一个面向真实产品交互的开源 React 动效库。开发者可以在线预览 48 个完整组件和 44 个原子动效，查看行为规则与源码，调整参数，并通过 shadcn R

https://github.com/ryan-yang125/motion-lexicon

被谁收录过

• [开源推荐] 可直接安装的 React 动效组件与基础动作库 2026-08-12

投稿原文（节选）

项目地址 https://github.com/Ryan-yang125/motion-lexicon 类别 JS 项目标题 可直接安装的 React 动效组件与基础动作库 项目描述 Motion Lexicon 是一个面向真实产品交互的开源 React 动效库。开发者可以在线预览 48 个完整组件和 44 个原子动效，查看行为规则与源码，调整参数，并通过 shadcn Registry 把选中的实现直接安装进项目。它还提供 Agent Skill，帮助编码智能体完成动效选择、页面构建和质量审查。 亮点 组件围绕复制、加载、审批、表单、导航、3D 展示等真实产品场景设计，每个条目都能在线操作。 48 个完整组件覆盖 Motion、GSAP、Three.js、原生 WebGL、SVG 和 CSS；44 个原子动效中有 40 个可直接运行和安装。 预览、源码展示与 Registry 发布共用同一份实现，安装后得到带 TypeScript 类型和真实依赖的组件源码。 每个可安装条目都包含 prefers-reduced-motion 方案，方便在产品中保持无障碍体验。 自带 Agent Skill，可以根据产品任务构建页面、推荐和编排动效、生成实现并执行动效审查。 提供中英文静态站点，应用与组件代码采用 MIT 许可证。 示例代码 # 安装一个完整产品组件 npx shadcn@latest add https://motion-lexicon.pages.dev/r/copy-button.json # 安装一个原子动效 npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-slide-in.json # 安装 Agent Skill npx skills add Ryan-yang125/motion-lexicon --skill motion-lexicon 截图或演示视频

← 看全部项目