remotion

用途

本技能是 Remotion 视频制作工具包的扩展补充，专门整理项目内自定义的组件、转场和开发约定。核心 Remotion 框架知识（如钩子、动画、渲染 API 等）位于 .claude/skills/remotion-official/，本技能只覆盖工具包特定的模式，避免与官方知识重复。

主要能力

共享组件

lib/components/ 目录提供可复用视频组件，可在模板中通过相对路径导入，例如：

import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';

组件包括：

AnimatedBackground：浮动形状背景，变体有 subtle、tech、warm、dark。
SlideTransition：场景转场，支持 fade、zoom、slide-up、blur-fade。
Label：浮动标签徽章，可选 JIRA 引用。
Vignette：电影感边缘压暗叠加层。
LogoWatermark：角落 Logo 品牌水印。
SplitScreen：并排视频对比。
NarratorPiP：画中画讲解者叠加。
Envelope：带开盖动画的 3D 信封。
PointingHand：带动画和脉冲效果的手势表情。
MazeDecoration：角落动画等距网格装饰。

自定义转场

lib/transitions/ 提供官方 @remotion/transitions 包之外的场景切换效果。结合 TransitionSeries 使用，示例：

import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <TitleSlide />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={glitch({ intensity: 0.8 })}
    timing={linearTiming({ durationInFrames: 30 })}
  />
  <TransitionSeries.Sequence durationInFrames={120}>
    <ContentSlide />
  </TransitionSeries.Sequence>
</TransitionSeries>

可用自定义转场及参数：

glitch()：参数 intensity、slices、rgbShift，适合科技演示、赛博朋克风格。
rgbSplit()：参数 direction、displacement，适合现代科技感转场。
zoomBlur()：参数 direction、blurAmount，适合 CTA 和高能量瞬间。
lightLeak()：参数 temperature、direction，适合庆祝、胶片美学。
clockWipe()：参数 startAngle、direction、segments，适合时间相关内容。
pixelate()：参数 maxBlockSize、gridSize、scanlines、glitchArtifacts、randomness，适合复古或游戏风格。
checkerboard()：参数 gridSize、pattern、stagger、squareAnimation，支持 sequential、random、diagonal、alternating、spiral、rows、columns、center-out、corners-in 等图案。

转场时长参考

快速剪切：15–20 帧
标准：30–45 帧
戏剧化：50–60 帧
故障效果：20–30 帧，应显得突然
漏光：45–60 帧，需要时间扫过

可运行展示画廊预览所有转场：

cd showcase/transitions && npm run studio

工具包最佳实践

仅使用基于帧的动画，避免 CSS 过渡/动画，否则渲染时可能闪烁。
用 useVideoConfig() 的 fps 确保动画帧率无关。
插值使用 extrapolateRight: 'clamp' 防止数值失控。
复杂合成优先用 OffthreadVideo 而非 <Video>。
异步数据用 delayRender 阻塞渲染直到就绪。
资源用 staticFile 正确引用 public/ 目录文件。
所有项目使用 30fps，帧数 = 秒数 × 30。
playbackRate 必须恒定；需要变速时用 FFmpeg 预处理。

项目时长约定

标题：3–5 秒（90–150 帧），Logo + 标题。
概览：10–20 秒，3–5 个要点。
演示：10–30 秒，调整 playbackRate 适配。
数据：8–12 秒，3–4 张数据卡。
片尾：5–10 秒，快速淡出。

语速约 150 词/分钟，旁白驱动时长。

高级 API

所有钩子、组件、渲染器、Lambda 和 Player API 的详细文档见 reference.md。

使用方式

本技能主要供 AI 编码助手在涉及 Remotion 视频项目时参考，按需导入共享组件和自定义转场。转场展示可通过 npm run studio 运行。若要贡献或反馈，可提及“improve this skill”以更新 .claude/skills/remotion/SKILL.md，或向 github.com/digitalsamba/claude-code-video-toolkit 提交 PR。

适用场景

适用于基于 Remotion 框架的编程式视频制作项目，尤其是需要复用组件、自定义转场效果、遵循项目时长与渲染约定的团队。

限制

本技能不包含 Remotion 核心框架知识，需配合官方技能使用。
Remotion 有特殊许可证，公司商业使用可能需要获取许可，详见 https://remotion.dev/license。