Fec motion interaction
Skill bovinphang/frontend-craft/localized/zh-CN/skills/fec-motion-interaction
frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
npx -y skills add bovinphang/frontend-craft --skill fec-motion-interactionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 19 stars19 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
用于设计、实现或审查前端交互动效、页面转场、滚动动画、Framer Motion、GSAP、Lottie、CSS 动画、动效强度、动画性能、减少动效行为或兼具表现力与可访问性的 UI 动效。不要用于仅 SVG 路径绘制、Canvas/WebGL 渲染或普通 hover 状态；中文触发词包括 动效设计、交互动效、页面转场、滚动动画、Framer Motion、GSAP。
SKILL.md
5.5 KB, as published. Nobody here has run it
交互动效
适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 motion-patterns.md。
用途
为前端界面选择合适动效工具、强度和质量门禁。
流程
-
判断动效职责
- 先写清动效服务的用户意图：定位、反馈、层级变化、状态确认、叙事引导或品牌记忆。
- 工具型界面默认克制，优先保障扫描效率；营销页和作品页可增加节奏，但不能遮挡主要信息。
- 若动效只装饰而不改善理解、反馈或品牌识别，应删掉或改成静态视觉处理。
- loading、skeleton、toast、错误提示和成功反馈属于状态沟通；动效只能增强反馈节奏，不能替代文本、语义或可见状态。
-
选择技术路线
- CSS transition/keyframes：hover、focus、toast、简单入场和小型状态反馈。
- Framer Motion：React 状态驱动、布局过渡、列表编排和可中断的组件级动画。
- GSAP：时间轴、滚动触发、复杂序列和跨元素精确编排。
- Lottie：设计工具输出的图标或空状态动画，按需懒加载。
- CSS scroll-driven animation：可接受渐进增强且无需旧浏览器一致性时使用。
-
定义强度等级
- Level 1-2：只用 150-250ms opacity/transform，适合后台、表单和高频工具。
- Level 3-4：加入短 stagger、局部 spring 和轻量 reveal，适合仪表盘、设置页和管理台。
- Level 5-6：加入视差、布局 morph、指针响应，适合产品展示和交互式首页。
- Level 7+：使用滚动叙事、固定段落或 3D/WebGL 配合，必须单独做移动端和 reduced-motion 降级。
- 场景默认值：公共服务、医疗、金融和强可访问性产品从 Level 1-2 起步；SaaS 工具和数据后台从 Level 2-3 起步；营销页、品牌页和作品集可从 Level 4-6 起步；实验性活动页或沉浸式叙事才考虑 Level 7+。
- 如果 UI 设计流程已经设定了动效强度拨盘，沿用该拨盘；不要因为引入了某个动效库就自动提高强度。
-
建立性能边界
- 只高频动画
transform、opacity，谨慎使用filter和clip-path。 - GSAP、Lottie、Three.js、重型动画组件必须动态导入或隔离在叶子组件。
- 持续动画需要暂停条件：不可见、标签页隐藏、用户关闭、低电量或 reduced motion。
- 不在滚动事件中同步读写布局；使用 IntersectionObserver、ScrollTimeline 或节流后的 rAF。
- 滚动叙事、stagger、spring、磁吸指针和视差效果必须各自有明确职责；同一屏不要同时堆叠多种高强度运动语言。
- 长页面中重复 reveal 动画要控制节奏，避免每个区块都以同一种延迟、方向和 easing 进入，造成模板感和滚动疲劳。
- 只高频动画
-
设计可访问降级
- 所有非必要动效读取
prefers-reduced-motion，降级为静态、淡入或即时状态。 - 自动播放或循环动效若超过 5 秒，应提供暂停方式或只在局部非关键区域运行。
- 不闪烁超过每秒 3 次；不要用动效作为唯一状态提示。
- focus ring、错误提示、成功反馈必须在无动效时同样清楚。
- 手势动画必须有点击、键盘或明确控件替代；拖拽、滑动和长按不能成为唯一操作路径。
- 所有非必要动效读取
-
验证交付
- 在 375px、768px、1440px 检查动效是否遮挡文案、按钮或表格内容。
- 检查首次加载 bundle 是否因动效库显著膨胀。
- 手动开启 reduced motion，确认动画被禁用或弱化。
- 用性能面板或实际设备确认滚动和关键交互没有明显掉帧。
- 检查动效强度是否匹配页面类型：工作台不应出现营销式滚动剧场，作品集也不应只有默认 hover 淡入。
- 对滚动触发序列确认用户可以快速到达内容，不因 pinned 区块、过长时间轴或不可中断过渡丢失上下文。
约束
- 不在同一个组件内混用 Framer Motion 和 GSAP 控制同一元素。
- 不用动效掩盖 loading、empty、error、disabled 等状态缺失。
- 不为普通后台表格、配置页和高频工作台默认加入大幅视差或滚动劫持。
- 不让所有区块使用相同 reveal 模板；动效节奏应随信息层级和用户任务变化。
- 不动画
width、height、top、left、margin、padding等会频繁触发布局的属性。 - 不把大型 Lottie JSON、GSAP 插件或 3D 场景放入首屏同步包。
- 不让动画改变阅读顺序、焦点顺序或键盘可达性。
- 不用 skeleton 长时间占位掩盖真实加载失败；超过预期时应转入可理解的 loading、retry 或 error 状态。
预期输出
输出应包含动效目的、技术选型、强度等级、降级策略、性能边界和验证结果。完成后交互动效应帮助用户理解状态和层级，在 reduced-motion 与低端设备上仍可用，并且不显著拖慢首屏或滚动体验。