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

项目地址

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

截图或演示视频