SuperAPI AI 工具集

motion-primitives

前端与建站

查看项目

更新于 10-29 04:36

技能介绍

用途

Motion Primitives 技能用于在 React Web 应用中检查、集成和适配 ibelick/motion-primitives 的组件。它的核心立场是遵循该库的“源码拷贝”约定,而不是假设存在可整体安装的 npm 运行时 API。技能版本为 1.0.0,其证据来自对锁定源码的审阅,而非实际执行。

主要能力

  • 绑定组件请求:明确组件名、宿主路由、状态所属方、目标交互以及允许的操作(源码审阅、项目集成或修复),并阅读选定的锁定源码与文档。
  • 厘清分发与依赖约定:根 package.json 为私有,描述的是文档应用而非可整体消费的库;组件需复制进应用。需要读取 components/core/<name>.tsx 及其在 scripts/registry-components.ts 中的条目,并携带必要的辅助文件与 Hook,核对导入,而不能只复制 JSX。
  • 使用选定 API:TextEffect 为命名导出,支持字符串子节点、per 取 word/char/line、preset 取 blur/fade-in-blur/scale/fade/slide,以及 trigger 与过渡控制;speedReveal 用于分摊交错时间,speedSegment 用于分摊时长,二者需保持正数且有限。per="line" 按换行分割,不按视觉换行。词/字符模式会提供 sr-only 字符串并对动画字形隐藏辅助技术,定制时应保留该结构。trigger=false 会通过 AnimatePresence 移除文本子树,而非仅暂停。InView 接受 hidden/visible 变体、transition、viewOptions、as 与 once;once 在动画后存储完成状态,viewOptions 也会传给 Motion 的观察 Hook,承诺重放语义前需同时检查两者。Dialog 暴露受控的 open/onOpenChange 与非受控的 defaultOpen,保持单一状态所有者,并使用其 trigger/content/title/description/close 组合;审阅的内容使用原生 motion.dialog、portal、模态命名 ID 与 showModal,并协调取消、退出动画、body 滚动类与关闭。
  • 动效、语义与资源把关:审阅的 TextEffect 与 InView 文件不含本地 reduced-motion 策略,需提供静态可读分支或宿主策略;保持焦点可见、支持键盘激活,并让仅指针效果成为可选装饰。对话框需验证可访问标题/描述、初始焦点、Tab 限制、Escape、背景关闭、触发焦点恢复及退出期间控件可用性;检查受控关闭/重开与多对话框情况。分割/动画文本需验证阅读顺序、换行、缩放、本地化与最终内容可读,避免对每个装饰帧做 live-region 播报;保留效果、监听器、观察器清理、滚动解锁与 portal 拆除。
  • 按实际验证层级核对:授权集成后,检查实际路由的交互、reduced-motion 模式、缩放/调整大小、路由重挂载、快速状态切换及相关键盘/触摸行为;性能请求需对比基线与改动后同一交互。仅源码工作需说明浏览器行为、编译、注册表可达性及新版 Motion 兼容性仍未验证。

使用方式

锁定文档给出两种获取路径(均未为本文执行):

npx motion-primitives@latest add text-effect
npx shadcn@latest add "https://motion-primitives.com/c/text-effect.json"

在线注册表与 @latest 可能不同于审阅提交,需先确定版本、审查负载与目标文件,并在写入前获得批准。也可在 MIT 许可下从审阅过的提交手动集成,保留版权与许可声明。不要为了匹配文档应用布局而重建可用的 Tailwind/shadcn 配置。

审阅的文档宿主使用 React ^18、Motion ^11.12.0、Next ^15.5.25、Tailwind ^4.0.0 与 TypeScript ^5,这些是观察到的宿主版本,并非通用消费要求。客户端组件从 motion/react 导入,在 SSR 宿主中需保持客户端边界。React/Vite 使用需相同的 DOM、样式、工具与别名适配,但未被运行。该源码审阅未确立对 Vue、React Native 或原生平台的支持。

适用场景

  • 在 React Web 应用中选择或定制确切的 ibelick/motion-primitives 组件。
  • 将文档示例与其注册表负载、辅助函数、导出或已安装源码进行核对。
  • 在应用集成前审阅该库的文本、进入视口或对话框行为。

若需与本库无关的自定义 motion/react 动画,应使用宿主项目的 motion 约定;对于 React Bits,应使用其独立目录的源码与 API;若存在已测量的泄漏或长会话变慢,应运行动画性能分析流程,而不是假定采用本库即可解决瓶颈。

限制

  • 仅含源码审阅证据;浏览器行为、编译结果、注册表可达性及与更新版 Motion 的兼容性均未验证。
  • 注册表依赖可能不完整:审阅的对话框除声明 motion 外,还导入 lucide-react、cn 与 usePreventScroll。
  • cn 辅助函数使用 clsx 与 tailwind-merge,需复用兼容的宿主辅助函数。
  • 文档规定使用 Tailwind、Motion、工具辅助函数与图标,但只应安装选定组件实际需要的内容,且包变更需获批准。