motion-lab

Original：🇨🇳 Chinese

Translated

Find, select, and adapt animations for the current webpage or component. Includes HTML/CSS/JS implementations, parameters, and bilingual indexes for 160 examples covering basic, text, interaction, and advanced motion effects.

3installs

Sourcenexu-io/open-design

Added on2026-10-24

NPX Install

npx skill4agent add nexu-io/open-design motion-lab

SKILL.md Content (Chinese)

View Translation Comparison →

Open Design Host Conventions

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 Example Library

Usage Steps

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

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

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