SuperAPI AI 工具集

motion-lab

前端与建站

查看项目

更新于 10-16 16:23

技能介绍

用途:在具体网页或组件中查找、选型和改造动效,先明确用户要表达的状态或动作,再匹配案例,不堆砌特效。

主要能力:库内含160个案例,提供HTML/CSS/JS原始示例、参数定义和中英文索引,按分类分为references/basic.md(基础)、references/text.md(文字)、references/interaction.md(交互)、references/advanced.md(高级),用references/index.md按名称、ID、分类或标签检索。

使用方式:先查看已有组件与技术栈,检索并选择最贴合目标的案例,读取对应ID小节;将代码适配当前DOM与组件生命周期,保留用户内容与品牌;CSS参数带正确单位;全局选择器改为组件内作用域;清理requestAnimationFrame、定时器、滚动/指针监听等资源,React用生命周期cleanup;滚动监听按需节流;尊重prefers-reduced-motion并提供静态或简化状态,交互兼顾键盘、触摸与焦点。常见案例包括click-ripple-material、text-typewriter、hover-flip-card、scroll-reveal及粒子类案例。

限制:Three.js、GSAP等依赖不随此技能安装,已有项目优先复用现有版本,不擅自加入多个动画框架;Canvas/WebGL需按容器尺寸与DPR调整并说明性能取舍;示例不能未经修改直接作为最终成品;本包不创建Motion.Lab网站、不含应用界面或预览站点;检查、渲染和导出仅在宿主当前阶段允许且工具可用时执行,缺少能力时需说明缺口,不得声称完成未执行的步骤;复制参考代码需保留上游署名与许可文本。平台、收费与价格信息暂未提供。