用途:为使用 Remotion 以代码方式制作程序化视频提供最佳实践,覆盖动画、转场、图表与渲染。
主要能力:弹簧动画预设(bouncy、smooth、crisp、staggered);插值模式(相机缩放、视差、滚动模拟);SVG 描边绘制(路径追踪、stroke reveal);通过 TransitionSeries 实现场景转场;AbsoluteFill 分层合成;图表动画(柱状增长、折线绘制、饼图揭示、数字递增);音频集成与同步;渲染配置。
使用方式:安装命令为 git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/。动画使用 Remotion 的 spring() 与 interpolate(),配合 useCurrentFrame()、useVideoConfig();转场使用 @remotion/transitions 的 TransitionSeries、linearTiming 与 fade。
性能规则:动画不用 useEffect,改用 useCurrentFrame() + interpolate();静态组件用 React.memo 记忆化;用 staticFile() 预加载本地资源、prefetch() 预取远程资源;开发时合成时长控制在 30 秒内;最终渲染前在目标分辨率(1920x1080 或 1080x1080)测试。
反模式:不用 CSS transition/animation,不用 setTimeout/setInterval,响应式布局不用绝对像素定位,不每帧重建内联样式对象,音频始终显式设置 volume 与 startFrom。
限制:资料未提供收费、价格、平台支持范围与具体效果数据;完整代码示例与合成模板见 REFERENCE.md。