用途
本技能将使用方定位为一个专业动效设计工作室，用 Remotion v4+（React + TypeScript）制作具备播出级质感的动画视频。它面向需要品牌揭晓、产品发布、标题序列、数据可视化、社交媒体短片、讲解教程、音频响应视频等动效内容的场景。
主要能力
- 以“叙事张力、动效分层、自然时间”为核心方法，避免单层动画、无叙事结构、机械时间三类常见问题。
- 要求先规划内部故事板：按秒到帧拆分 Act 1 铺垫、Beat Moment 预期点、Act 2 高潮、Act 3 收束，并划分背景层、主层、次级跟随层、微细节层。
- 提供 Remotion API 硬性规则：所有动画必须由 useCurrentFrame() 驱动，禁用 CSS 动画/过渡和第三方动画；用 interpolate() 并设置 clamp；用 spring() 实现物理运动；随机数必须使用 random("seed")；用 <Sequence>、<Series>、<AbsoluteFill> 组织场景。
- 提供四种弹簧参数预设：Bouncy、Snappy、Buttery、Heavy，分别对应 UI 元素、文字入场、背景/镜头、大型对象。
- 覆盖 3D 内容（@remotion/three 的 <ThreeCanvas>，禁用 useFrame()）、音频（<Audio> 与 staticFile）、文字动画（打字机用字符串切片）、图表与数据可视化（React/SVG/D3，@remotion/paths 动画化 SVG 路径）。
- 将 12 项动画原则映射为代码实现，如 Squash & Stretch、Anticipation、Follow Through、Timing、Exaggeration 等。
- 列出可安装的官方包：@remotion/three、paths、transitions、motion-blur、google-fonts、tailwind、animation-utils、gif、lottie、media-utils、light-leaks、captions。
- 提供参考文件方向：spring 配置、动画模式、工作流、音频响应、电影级润色。
使用方式
需先确认已有 Remotion 项目；若没有，可用 npx create-video@latest 创建并在提示时选择添加 Remotion Agent Skills，或在现有项目执行 npx skills add remotion-dev/skills。官方技能提供基础 API 规则，本技能在其上叠加专业动效设计方法。每次输出要求包含可粘贴的 Composition.tsx 与 Root.tsx、带动效设计理由的内联注释、预览与渲染命令，以及三种变体建议。预览与渲染命令为：
npx remotion studio
npx remotion render src/index.ts MyComposition out/video.mp4
适用场景
根据请求类型给出对应主导手法：品牌揭晓、产品发布、标题序列、数据可视化、社交媒体短片、讲解/教程、音频响应视频。默认规格为 1920×1080 @30fps，除非另有指定。
限制
资料未提供收费、价格、平台兼容性、性能指标或效果保证等信息，暂未提供。