proceed-video

UI 交互视频动效解析 (proceed-video)

本技能专为高保真复刻 UI 设计师网页效果打造。通过将录屏视频解析为切片网格与历史残影图，结合多模态视觉直读，精准捕捉微交互中的速度曲线、回弹物理学与光标细节。

---

一、 输入约束与要求 (Input Constraints)

1. 必须为“原子步骤”视频：
   • 录屏必须只包含单一阶段的微交互动效，例如：
     • 【鼠标从外部移入组件上】（Hover 触发）
     • 【鼠标已经在组件上，进行一次点击】（Click 响应）
     • 【鼠标拖拽组件松手回弹】（Drag & Release）
   • 严禁输入长流程或复合多步骤视频（例如“移入卡片 -> 弹出菜单 -> 点击子项 -> 跳转页面”），复合视频会使切片与残影混合混乱，无法精确定量分析。
2. 格式支持：MP4, MOV, WebM 等标准视频格式。

---

二、 核心处理流程 (Execution Workflow)

收到用户的视频路径后，严格按照以下步骤执行：

第一步：运行脚本生成视觉产物

使用内置脚本 proceed_video.py 对视频进行解析与切片处理：

# 自动运动检测模式（推荐常规原子视频使用）
python3 "<skill_dir>/scripts/proceed_video.py" "<video_path>" -o "<output_dir>"

# 若用户明确指定了动效区间或视频较长（例如 2.5s 开始，持续 0.8s）
python3 "<skill_dir>/scripts/proceed_video.py" "<video_path>" -o "<output_dir>" -s 2.5 -d 0.8 --fps 30 --rows 4 --cols 4

脚本将默认生成两类核心产物并保存至输出目录：

1. grid_slice.png（4×4 网格切片图）：
   • 类似电影胶片分镜，按时间序列展开 16 个关键切片，用于横向对比各帧的加速度变化与回弹超调。
2. ghost_sbs.png（左右对比残影图）：
   • 左侧：正常的清晰静态基准帧（便于了解组件真实外观）；
   • 右侧：越早越淡、层次清晰的历史残影图（展现运动轨迹、连贯性与位移幅度）。

---

第二步：多模态直读与双重视图交叉验证

1. 直读原视频：
   • 优先使用多模态文件查看工具（如 view_file）直接读取原始视频，从全局动态视角把握交互质感与流畅度。
2. 查验切片产物：
   • 查看生成的 grid_slice.png 与 ghost_sbs.png，在静态维度下核实微小的时间差（毫秒级）和几何变化（位移像素、旋转角度）。

---

第三步：输出结构化复刻分析报告

完成观察后，用清晰专业的自然语言输出详细报告，报告必须涵盖以下核心模块：

1. 组件视觉层级与初始态 (Visual Hierarchy)

• 描述背景颜色、主组件尺寸、边框风格（Border）、圆角大小（Border Radius）。
• 描述多图层上下层级关系（如前置主卡片与后置隐藏卡片的 Z-index 结构）。

2. 光标特殊形态与变换细节 (Cursor Morphing)

• 鼠标指针在进入组件前后是否有特殊形态变换（例如：常态图标是什么、取得焦点后是否变成特定图标、透镜、放大镜或磨砂玻璃光圈）。
• 光标是否有自定义尺寸、模糊滤镜（backdrop-filter）或背景透射效果。

3. 触发机制与交互时机 (Trigger Mechanism)

• 明确是无需点击（纯 Hover 触发）还是点击触发（Click）。
• 碰撞盒判定边界（进入边缘即触发，还是有延迟防抖）。

4. 动效物理学与运动曲线 (Motion Physics)

• 过渡总时长：以毫秒（ms）为单位（例如 300ms ~ 350ms）。
• 位移与旋转：X 轴与 Y 轴的具体位移幅度（px）、旋转方向与角度（deg）。
• 回弹与物理曲线 (Spring / Overshoot)：
  • 是否存在弹簧超调回弹（在何时达到最大形变，随后回弹多少像素）。
  • 是否为加速弹出后缓动停靠。
• 移出或反向动效 (Exit / Retract)：光标离开后的收回速度与曲线。

5. 推荐技术栈与高保真复现方案 (Tech Stack Recommendation)

• 动效库选择：
  • 强烈倾向使用成熟动效库（如 React 环境下的 Framer Motion，使用 type: "spring" 配置 stiffness 与 damping 参数）。
  • 避免手动手搓复杂的三次贝塞尔曲线（cubic-bezier）。
• 特殊视觉效果实现：
  • 针对磨砂玻璃、高斯模糊等效果，倾向使用原生 CSS 属性（如 backdrop-filter: blur(...)）或现成组件库，避免手搓 WebGL 着色器。
  • 提供具体的参考代码片段（TypeScript / React / CSS）。