Design & media

Motion Interaction

Try it

Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, C

What it does

适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 motion-patterns.md。

The skill document

交互动效

适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 motion-patterns.md。

Purpose

为前端界面选择合适动效工具、强度和质量门禁。

Procedure

  1. 判断动效职责

    • 先写清动效服务的用户意图：定位、反馈、层级变化、状态确认、叙事引导或品牌记忆。
    • 工具型界面默认克制，优先保障扫描效率；营销页和作品页可增加节奏，但不能遮挡主要信息。
    • 若动效只装饰而不改善理解、反馈或品牌识别，应删掉或改成静态视觉处理。
    • loading、skeleton、toast、错误提示和成功反馈属于状态沟通；动效只能增强反馈节奏，不能替代文本、语义或可见状态。

  2. 选择技术路线

    • CSS transition/keyframes：hover、focus、toast、简单入场和小型状态反馈。
    • Framer Motion：React 状态驱动、布局过渡、列表编排和可中断的组件级动画。
    • GSAP：时间轴、滚动触发、复杂序列和跨元素精确编排。
    • Lottie：设计工具输出的图标或空状态动画，按需懒加载。
    • CSS scroll-driven animation：可接受渐进增强且无需旧浏览器一致性时使用。

  3. 定义强度等级

    • Level 1-2：只用 150-250ms opacity/transform，适合后台、表单和高频工具。
    • Level 3-4：加入短 stagger、局部 spring 和轻量 reveal，适合仪表盘、设置页和管理台。
    • Level 5-6：加入视差、布局 morph、指针响应，适合产品展示和交互式首页。
    • Level 7+：使用滚动叙事、固定段落或 3D/WebGL 配合，必须单独做移动端和 reduced-motion 降级。

  4. 建立性能边界

    • 只高频动画 transform、opacity，谨慎使用 filter 和 clip-path。
    • GSAP、Lottie、Three.js、重型动画组件必须动态导入或隔离在叶子组件。
    • 持续动画需要暂停条件：不可见、标签页隐藏、用户关闭、低电量或 reduced motion。
    • 不在滚动事件中同步读写布局；使用 IntersectionObserver、ScrollTimeline 或节流后的 rAF。

  5. 设计可访问降级

    • 所有非必要动效读取 prefers-reduced-motion，降级为静态、淡入或即时状态。
    • 自动播放或循环动效若超过 5 秒，应提供暂停方式或只在局部非关键区域运行。
    • 不闪烁超过每秒 3 次；不要用动效作为唯一状态提示。
    • focus ring、错误提示、成功反馈必须在无动效时同样清楚。
    • 手势动画必须有点击、键盘或明确控件替代；拖拽、滑动和长按不能成为唯一操作路径。

  6. 验证交付

    • 在 375px、768px、1440px 检查动效是否遮挡文案、按钮或表格内容。
    • 检查首次加载 bundle 是否因动效库显著膨胀。
    • 手动开启 reduced motion，确认动画被禁用或弱化。
    • 用性能面板或实际设备确认滚动和关键交互没有明显掉帧。

Constraints

  • 不在同一个组件内混用 Framer Motion 和 GSAP 控制同一元素。
  • 不用动效掩盖 loading、empty、error、disabled 等状态缺失。
  • 不为普通后台表格、配置页和高频工作台默认加入大幅视差或滚动劫持。
  • 不动画 width、height、top、left、margin、padding 等会频繁触发布局的属性。
  • 不把大型 Lottie JSON、GSAP 插件或 3D 场景放入首屏同步包。
  • 不让动画改变阅读顺序、焦点顺序或键盘可达性。
  • 不用 skeleton 长时间占位掩盖真实加载失败；超过预期时应转入可理解的 loading、retry 或 error 状态。

Expected Output

输出应包含动效目的、技术选型、强度等级、降级策略、性能边界和验证结果。完成后交互动效应帮助用户理解状态和层级，在 reduced-motion 与低端设备上仍可用，并且不显著拖慢首屏或滚动体验。

Related skills

diagram-generator

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars

AdMapix

Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.

by fly0pants4.3k installs296 stars

Memory

Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.

by Iván559 installs18 stars

Join meeting

Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.

by johnpatternai22 installs8 stars

Productivity

Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.

by Iván855 installs69 stars

More from bovinphang

Browse all skills

Image Generation

Generate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.

by bovinphang9 installs1 stars

Drawio Studio

Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo

by bovinphang5 installs

UI Design

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or

by bovinphang8 installs

Nextjs Project Standard

Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio

by bovinphang10 installs1 stars

Monorepo Project Standard

Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.

by bovinphang10 installs1 stars

Nuxt Project Standard

Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines

by bovinphang10 installs1 stars