Back to Details

site-motion-excellence-director

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Site Motion Excellence Director

站点动效卓越总监

Use this skill before adding substantial motion to a website or app.
在为网站或应用添加大量动效之前使用此 skill。

Workflow

工作流

  1. Identify the brand, route, audience, and first user task.
  2. Define the first read before animation.
  3. Name the motion job: orient, reveal, explain, confirm, compare, express brand, or convert.
  4. Pass the still-frame gate.
  5. Write a beat sequence: setup, trigger, primary move, secondary support, hold, final state.
  6. Choose the lightest runtime that preserves the intent.
  7. Specify reduced motion in the same pass.
  8. Implement only after the spec is clear.
  9. Verify with browser screenshots, mobile, reduced motion, and video/frame proof.
  10. Score with the excellence gate.
  1. 确定品牌、路由、受众和用户首个任务。
  2. 定义动画开始前的首屏视觉重点。
  3. 明确动效任务：引导定位、揭示、解释、确认、对比、表达品牌或促成转化。
  4. 通过静帧关卡。
  5. 编写动作节拍序列：准备、触发、主要动作、辅助动作、停留、最终状态。
  6. 选择能够保留设计意图的最轻量运行时。
  7. 在同一轮中制定 reduced-motion 方案。
  8. 仅在规范清晰后开始实施。
  9. 通过浏览器截图、移动端、reduced-motion 以及视频/逐帧证据进行验证。
  10. 使用卓越度关卡评分。

Runtime Rules

运行时规则

  • Use CSS for simple state changes, hover/focus, skeletons, and low-risk reveals.
  • Use Motion for React for component choreography, layout transitions, presence, and React scroll work.
  • Use GSAP ScrollTrigger for pinned, scrubbed, snapped, SVG/canvas, or complex authored timelines.
  • Use Rive for interactive vector state machines.
  • Use Lottie/dotLottie for portable non-interactive vector loops.
  • Use Three.js only when 3D is central and visually verified.
  • Use Remotion for rendered video, social variants, product explainers, and exact text/layout in media.
  • Use Grok/imagegen/Veo/Sora/Luma/Runway/Higgsfield only as source generation, then finish and QA in context.
  • 对于简单的状态变化、hover/focus、骨架屏和低风险显现，使用 CSS。
  • 对于组件编排、布局过渡、presence 和 React 滚动处理，使用 Motion for React。
  • 对于 pinned、scrubbed、snapped、SVG/canvas 或复杂编排时间轴，使用 GSAP ScrollTrigger。
  • 对于交互式矢量状态机，使用 Rive。
  • 对于可移植的非交互式矢量循环，使用 Lottie/dotLottie。
  • 仅当 3D 是核心内容且经过视觉验证时，才使用 Three.js。
  • 对于渲染视频、社交媒体变体、产品讲解内容，以及媒体中的精确文案/布局，使用 Remotion。
  • 仅将 Grok/imagegen/Veo/Sora/Luma/Runway/Higgsfield 用作素材生成，然后在实际场景中完成制作和 QA。

Taste Rules

审美规则

  • Motion is hierarchy over time.
  • Do not animate a weak still frame.
  • Make one object the hero.
  • Use stillness as contrast.
  • Keep repeated task motion short and quiet.
  • Do not bake exact product text into generated images or videos.
  • Treat mobile as separate choreography.
  • Never ship meaningful motion without reduced-motion behavior.
  • 动效是随时间展开的层级关系。
  • 不要为薄弱的静帧添加动画。
  • 让一个对象成为视觉主角。
  • 运用静止形成对比。
  • 让重复任务中的动效短而克制。
  • 不要将精确的产品文案烘焙到生成的图像或视频中。
  • 将移动端视为独立的动效编排。
  • 没有 reduced-motion 行为时，绝不要上线具有关键意义的动效。

Required Spec

必需规范

Use 
templates/site-motion/SITE_MOTION_SPEC.md
for substantial site motion.
Use 
rubrics/site-motion-excellence-gate.md
before handoff.
对于大量站点动效，使用 
templates/site-motion/SITE_MOTION_SPEC.md
。
交付前使用 
rubrics/site-motion-excellence-gate.md
。

Output Shape

输出结构

Return: motion thesis, first-read diagnosis, still-frame verdict, motion map, runtime choice, reduced-motion plan, implementation tasks, QA proof required, and excellence score.
返回：动效主张、首屏视觉诊断、静帧评审结论、动效地图、运行时选择、reduced-motion 方案、实施任务、所需 QA 证据以及卓越度评分。