motion-lab

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Open Design 宿主约定

Open Design Host Conventions

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

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

This is a functional skill in the current task. Preserve the user-selected task type, brand, technology stack, current stage, and delivery format; do not switch to a video project because of an @ selection. During the planning stage, only plan; write code only during the implementation stage. Perform inspection, rendering, and export only when the host permits them at the current stage and the relevant tools are actually available. The skill must not launch an independent Agent, force approval, or bypass the host's delivery boundaries.

Read auxiliary files relative to the root of the current skill package and select them according to the current question; do not paste all reference documents into the prompt. Do not read other Agents' global configurations. Prioritize the user's existing files for assets. When new images, videos, or audio are needed, use tools actually provided by the current host and permitted by the user. If generation, measurement, or export capabilities are missing, explain the specific gaps, deliver verifiable portions, and do not claim that unexecuted steps are complete. Follow the output path of the current task and do not overwrite inputs or historical artifacts.

Motion.Lab 动效案例库

Motion.Lab Motion Example Library

使用步骤

Usage Steps

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

First clarify the state or action the user wants to convey, and inspect the existing components and technology stack. Use
```
references/index.md
```
to search by Chinese or English name, ID, category, or tag. Select the example that best matches the user's goal; do not fill the implementation with effects merely to showcase the library.
Read the section for the relevant ID in the corresponding category file:
```
references/basic.md
```
(basic),
```
references/text.md
```
(text),
```
references/interaction.md
```
(interaction), and
```
references/advanced.md
```
(advanced). Each entry includes parameter definitions and original HTML/CSS/JS examples, so there is no need to download the entire site from the internet.
Adapt the code to the current DOM and component lifecycle while preserving the user's content and brand. CSS parameters must use the correct units. Check that JavaScript variables and code actually use the parameters rather than merely updating the display controls. Convert global selectors to component-scoped selectors, and ensure that multiple instances do not share state.
Confirm runtime dependencies from the actual code: Three.js, GSAP, and similar libraries are not installed with this skill. Reuse the existing versions in the current project, and do not add multiple animation frameworks without justification. Adjust Canvas/WebGL rendering according to container dimensions and DPR, and explain the performance trade-offs.
Clean up requestAnimationFrame, timers, scroll and pointer listeners, and rendering resources; use React lifecycle cleanup where applicable. When scroll listeners require throttling, use frame scheduling. Do not let animations block clicks or keyboard feedback.
Respect
```
prefers-reduced-motion
```
and provide a static or simplified state. Interactions must support keyboard, touch, and focus. Check for hard-coded dimensions, placeholder text, and asset paths in the code; examples must not be delivered as final work without modification.
When permitted by the current stage, verify actual execution, triggering, stopping, unmounting, and repeated entry. Report the results actually observed. If only a static source inspection was performed, state that clearly; do not claim that all 160 examples passed browser acceptance testing.

常见需求

Common Requirements

按钮点击波纹：
```
click-ripple-material
```
。
标题打字：
```
text-typewriter
```
；多行版本
```
text-typewriter-multi
```
。
卡片翻面：
```
hover-flip-card
```
。
滚动进入：
```
scroll-reveal
```
。

粒子背景：根据目的在

particle-fountain

、

canvas-starfield

、

flow-field

和

particle-galaxy

中选型。

案例用于局部功能实现，本包不创建 Motion.Lab 网站、不包含它的应用界面或预览站点，也不将 160 个案例拆成 160 条 @ 列表项。

Button click ripple:
```
click-ripple-material
```
.
Title typewriter effect:
```
text-typewriter
```
; multiline version:
```
text-typewriter-multi
```
.
Card flip:
```
hover-flip-card
```
.
Scroll reveal:
```
scroll-reveal
```
.
Particle background: select from
```
particle-fountain
```
,
```
canvas-starfield
```
,
```
flow-field
```
, and
```
particle-galaxy
```
according to the intended purpose.

The examples are intended for implementing individual features. This package does not create a Motion.Lab website, include its application interface or preview site, or split the 160 examples into 160 @ list items.

许可随包保留

License Included with the Package

references/license.md

随会话包保留来源许可。复制参考代码到交付工程时保留上游署名及许可文本。

references/license.md

retains the source license within the session package. When copying reference code into a delivery project, preserve the upstream attribution and license text.