用途
Video Coder 是 outscal/video-generator 技能库中的一个技能，定位为“面向教育内容的专家级 React 视频场景组件创建器”。它用于构建生产级、视觉风格鲜明的视频场景组件，动画基于 framer-motion 实现。
主要能力
该技能围绕 React 视频场景组件的编写规范展开，核心能力包括：
- 组件结构规范：规定场景组件以
export default Scene{N};形式导出，其中{N}为场景编号（如Scene0、Scene1、Scene2）。currentTime是相对于视频开始的全局时间值。 - 父 div 与 motion.div 的职责划分：父 div 负责定位、静态变换（旋转、翻转）与 z-index；motion.div 只负责动画（透明度、缩放、位移）。示例中父 div 使用
className设置top、left、z-index，用style.transform设置rotate、scaleX(-1)；motion.div 使用initial、animate、transition处理opacity、scale等。 - 子组件性能要求：所有子组件必须使用
React.memo，并定义在模块层级（主 Scene 组件之外）。原因是视频组件随currentTime变化每秒重渲染约 60 次，若不用React.memo，子组件会不必要地重渲染，导致动画抖动；模块级定义可保证引用稳定。 - 模块级定义内容：子组件（始终用
React.memo包裹）、用于定位的 wrapper div、动画变体（variants）、静态数据（位置、配置）。 - 状态更新节流：建议用
Math.floor(currentTime / 42)作为依赖，每 42ms 更新一次状态，避免过度重渲染，同时匹配 24fps 视频输出。 - 显式 props 传递：所有依赖需作为显式 props 传入，
React.memo才能正确工作。 - 坐标与定位约定：形状/文字/图标的位置始终指元素中心点；路径的所有坐标是绝对屏幕位置，无需 position/size 字段。旋转约定为 0° 朝上、90° 朝右、180° 朝下、270° 朝左，正值顺时针，负值逆时针。示例视口为 1920×1080，屏幕中心 x=960、y=540。
- 过渡与缓动：涵盖 tween（基于时长、精确计时）、spring（基于物理、弹跳/弹性）、inertia（基于动量减速）三种过渡类型；transition 可配置 duration、ease、delay、repeat、repeatType、times 等。缓动函数包括 linear、easeIn、easeOut、easeInOut、circIn/Out/InOut、backIn、backOut、backInOut、anticipate、steps(n) 等。spring 可配置 stiffness、damping，注意不能将 bounce 与 stiffness/damping/mass 混用。
- 旋转与翻转：静态朝向（资源面向某方向）用 wrapper div 处理；动画旋转用 motion.div 的
rotate，支持连续旋转（repeat: Infinity）、自定义轴心（transformOrigin）。 - 路径动画：沿 SVG 路径动画有专门文档（path-following.md）；当路径同时有 path-draw 和 follow-path 动画时，需对两者应用相同缓动以保持同步。
使用方式
该技能以规范与代码模式的形式提供，供开发者在编写 React 视频场景组件时遵循。资料中未提供安装命令或调用方式，暂未提供。
适用场景
适用于制作教育类视频内容中的 React 场景组件，尤其是需要 framer-motion 动画、且对渲染性能与动画稳定性有要求的场景。
限制
资料未说明收费、价格、平台支持范围等信息，暂未提供。