Menu

Individual skill

motion-lab

0upvotes

为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。

skills/motion-lab/SKILL.md

Read pinned source

Source commit e7a18df64d0e5e1161903e93bb5a302229dbeb96

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Instructions only
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
107,042
Repository last updated
Nov 10, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt
## Open Design 宿主约定

这是当前任务中的功能技能。保留用户选定的任务类型、品牌、技术栈、当前阶段和交付格式；不要因为 @ 选择而改成视频项目。规划阶段只规划，实现阶段才写代码。检查、渲染和导出仅在宿主当前阶段允许且工具真实可用时执行；技能不能额外开启独立 Agent、强制审批或绕过宿主交付边界。

附属文件相对当前技能包根目录读取，按当前问题选读，不把全部参考文档粘入提示词。不读取其他 Agent 的全局配置。素材优先用用户已有文件；需要新图片、视频或音频时使用当前宿主实际提供且用户允许的工具。缺少生成、测量或导出能力时说明具体缺口，交付可验证部分，不声称完成未执行的步骤。遵循当前任务的输出路径，不覆盖输入或历史产物。
# Motion.Lab 动效案例库

## 使用步骤

1. 先明确用户要表达的状态或动作，查看已有组件与技术栈。用 `references/index.md` 按中英文名称、ID、分类或标签检索。选择最符合用户目标的案例，不为展示库而堆满特效。
2. 读取相应分类文件中该 ID 的小节：`references/basic.md`（基础）、`references/text.md`（文字）、`references/interaction.md`（交互）、`references/advanced.md`（高级）。每项包含参数定义、HTML/CSS/JS 原始示例，不需要联网下载整站。
3. 将代码适配当前 DOM 和组件生命周期，保留用户内容与品牌。CSS 参数需带正确单位；检查 JS 变量和代码是否实际使用参数，不能只改展示控件。全局选择器改为组件内作用域，多实例不共用状态。
4. 运行依赖按实际代码确认：Three.js、GSAP 等并非随此技能安装。已有项目优先复用现有版本，不擅自加入多个动画框架。Canvas/WebGL 按容器尺寸与 DPR 调整，说明性能取舍。
5. 清理 requestAnimationFrame、定时器、滚动/指针监听和渲染资源；React 使用生命周期 cleanup。滚动监听需要节流时采用帧调度；不要让动画阻塞点击或键盘反馈。
6. 尊重 prefers-reduced-motion，提供静态或简化状态；交互同时支持键盘、触摸与焦点。检验代码中的硬编码尺寸、占位文字及资源路径；示例不能未经修改作为最终成品。
Back to top