motion-lab

Open Design host conventions

This is a functional skill within the current task. Preserve the user's chosen task type, brand, tech stack, current stage, and delivery format; do not change it into a video project because of an @ selection. In the planning stage, only plan; write code only in the implementation stage. Checks, rendering, and export are performed only when the host's current stage allows it and the tools are actually available; the skill cannot additionally spawn independent Agents, force approvals, or bypass the host's delivery boundaries.

Auxiliary files are read relative to the current skill package root directory, selected as needed for the current problem; do not paste all reference documents into the prompt. Do not read other Agents' global configurations. For assets, prefer the user's existing files; when new images, videos, or audio are needed, use the tools actually provided by the current host and permitted by the user. When generation, measurement, or export capabilities are missing, state the specific gap, deliver the verifiable parts, and do not claim to have completed steps that were not executed. Follow the current task's output path and do not overwrite inputs or historical artifacts.

Motion.Lab Motion Case Library

Usage Steps

1. First clarify the state or action the user wants to express, and review existing components and the tech stack. Use references/index.md to search by Chinese or English name, ID, category, or tag. Choose the case that best matches the user's goal; do not pile on effects just to showcase the library.
2. Read the section for that ID in the corresponding category file:references/basic.md(basic),references/text.md(text),references/interaction.md(interactive),references/advanced.md(advanced). Each item includes parameter definitions and the original HTML/CSS/JS examples; there is no need to download the entire site online.
3. Adapt the code to the current DOM and component lifecycle, preserving the user's content and brand. CSS parameters must carry correct units; check whether JS variables and code actually use the parameters, and do not only change display controls. Change global selectors to component-scoped ones so multiple instances do not share state.
4. Confirm runtime dependencies based on the actual code: Three.js, GSAP, etc. are not installed with this skill. For existing projects, prefer reusing existing versions, and do not add multiple animation frameworks without authorization. Adjust Canvas/WebGL according to container size and DPR, and explain performance trade-offs.
5. Clean up requestAnimationFrame, timers, scroll/pointer listeners, and rendering resources; in React, use lifecycle cleanup. When scroll listeners need throttling, use frame scheduling; do not let animations block click or keyboard feedback.
6. Respect prefers-reduced-motion and provide a static or simplified state; interactions should also support keyboard, touch, and focus. Check the code for hardcoded dimensions, placeholder text, and asset paths; examples must not be used as final products without modification.
7. When the current stage allows, verify real execution, triggering, stopping, unmounting, and repeated entry; report actual observed results. When only static source code inspection is done, state that clearly and do not claim that all 160 cases have passed browser acceptance.

Common Needs

• Button click ripple:click-ripple-material。
• Heading typewriter:text-typewriter; multiline version text-typewriter-multi。
• Card flip:hover-flip-card。
• Scroll into view:scroll-reveal。
• Particle background: choose between particle-fountain、canvas-starfield、flow-field and particle-galaxy according to the purpose.

The cases are for implementing local features; this package does not create a Motion.Lab website, does not include its application interface or preview site, and does not split the 160 cases into 160 @ list items.

The license is retained with the package.

references/license.md Retain the source license with the session package. When copying reference code into the delivery project, retain the upstream attribution and license text.