贴纸视频生成

使用 Remotion 生成带 Alpha 透明通道的贴纸动画视频。每个贴纸时长为 1–2 秒，背景为透明。多个贴纸通过 串联方式打包至单个输出视频中。默认导出 ProRes 4444（含 Alpha）；如需兼容性保障，可选用绿幕（#00FF00）H.264 格式作为备选方案。

快速开始

当用户提出生成贴纸视频需求时，请按以下流程执行：

1. 理解用户需求 —— 将每个请求的贴纸解析为「内容（emoji/图标/文字）+ 动画类型 + 可选时长」的组合。
2. 将各请求映射至 references/sticker-catalog.md 中定义的动画预设。若映射存在歧义，须向用户确认。
3. 按如下结构搭建 Remotion 项目（或复用已有项目）。
4. 将配套模板文件复制到 src/components/ 目录下：animations.tsx、stickers.tsx、greenscreen.tsx、effects.tsx、aspect.tsx，以及可选的 audio.tsx。
5. 使用 EmojiSticker、TextSticker 或 ComboSticker 组件，并指定所选动画预设，逐个构建贴纸。
6. 使用 并配合递进式游标偏移（参见 references/packing-guide.md），将贴纸打包进单一合成（Composition）。
7. 启用 Alpha 通道渲染（默认）：

   npx remotion render src/index.ts StickerPack out/stickers.mov --codec=prores --prores-profile=4444
   

   若用户需 H.264 兼容性，可切换至绿幕模式（参见 references/greenscreen-guide.md）。
8. 在最终交付前，运行 references/render-quality.md 中定义的 QA 检查项。

用户输入示例

"4 个贴纸：爱心弹跳、'SALE'弹出、星星旋转、'NEW'滑入"
"生成一个点赞的脉冲贴纸和'关注我'的弹跳文字"
"一个警告符号抖动 + '限时优惠'弹出，打包成方形视频"

AI 应将上述输入解析为明确的贴纸规格：

1. ❤️ bounce     → EmojiSticker emoji="❤️" animation="bounce" duration=55
2. SALE pop       → TextSticker text="SALE" animation="pop" duration=45
3. ⭐ spin        → EmojiSticker emoji="⭐" animation="spin" duration=45
4. NEW slideRight → TextSticker text="NEW" animation="slideInRight" duration=45

项目结构

src/
├── index.ts               # 入口文件：调用 registerRoot(Root)
├── Root.tsx               # 合成定义（StickerPack）
├── StickerPack.tsx         # 主合成：Sequence 布局 + 透明背景
└── components/
    ├── animations.tsx      # 动画预设引擎（共 13 种预设）
    ├── stickers.tsx        # EmojiSticker、TextSticker、ComboSticker
    ├── greenscreen.tsx     # GreenScreenBackground、导出配置
    ├── effects.tsx         # getSpringConfig、ProgressBar
    ├── aspect.tsx          # STICKER_PROFILE、responsiveFont
    └── audio.tsx           # 可选：BackgroundMusic（用于音效短片）
public/
└── audio/                  # 可选：短音效文件

分辨率与时间参数

贴纸视频默认规格：

• 默认分辨率： 1080×1080（1:1 正方形）
• FPS： 30
• 单个贴纸时长： 每个贴纸 1–2 秒（即 30–60 帧）
• 整体打包时长： 所有贴纸时长之和（例如：4 个贴纸 × ~2s ≈ 8 秒 = 240 帧）
• 播放方式： 贴纸按顺序依次播放，贴纸间为硬切（无交叉淡入淡出）
• 背景： 默认为透明（Alpha 通道）；绿幕 #00FF00 为可选备选方案

Alpha 通道（默认）与绿幕（备选）

两种互斥导出模式。Alpha 通道为默认模式 —— 贴纸渲染于透明背景之上，可直接叠加至任意内容，无需键控（keying）。

Alpha 通道模式（默认）

不引入 GreenScreenBackground。合成背景保持透明。请使用支持 Alpha 的编码器导出：

# ProRes 4444 —— 最高质量，适用于 Mac / Adobe 工作流，文件体积较大
npx remotion render src/index.ts StickerPack out/stickers.mov --codec=prores --prores-profile=4444

# VP9 WebM —— 文件更小，适用于网页 / 浏览器 / OBS 叠加层
npx remotion render src/index.ts StickerPack out/stickers.webm --codec=vp9

# PNG 序列 —— 帧级 Alpha 支持，通用兼容性最佳
npx remotion render src/index.ts StickerPack out/stickers/ --sequence --image-format=png

绿幕模式（备选）

当用户工作流要求标准 H.264 并依赖色度键控（chroma key）时启用。以 GreenScreenBackground 作为根图层进行渲染：

npx remotion render src/index.ts StickerPack out/stickers.mp4 --crf 10

编辑软件中将精确抠出 #00FF00 背景。建议使用较低 CRF 值（5–10）以在 H.264 色度抽样过程中保留颜色精度。

详见 references/greenscreen-guide.md 获取完整导出指南、键控设置说明及编解码器对比。

动画预设

将 assets/templates/animations.tsx 复制到项目中。该文件导出纯函数 getAnimationValues(frame, fps, config)，返回 React.CSSProperties。可用动画类型如下：

每个预设均支持 delay（帧数延迟）和 intensity（0–1 强度系数）参数。

详细描述、节奏建议及使用推荐请参阅 references/sticker-catalog.md。

贴纸组件

将 assets/templates/stickers.tsx 复制到 src/components/ 目录下。共提供三类组件：

EmojiSticker

TextSticker

ComboSticker

合成连接（StickerPack.tsx）

主合成通过带递进游标的 打包贴纸，默认启用 Alpha 模式：

import { AbsoluteFill, Sequence } from "remotion";
import { GreenScreenBackground } from "./components/greenscreen";
import { type StickerSlot } from "./components/stickers";

type Props = {
  stickers: StickerSlot[];
  greenScreen?: boolean; // 仅在启用绿幕备选方案时设为 true
};

export const StickerPack: React.FC = ({ stickers, greenScreen = false }) => (
  
    {greenScreen && }
    {stickers.reduce<{ cursor: number; elements: React.ReactNode[] }>(
      (acc, sticker, i) => {
        const from = acc.cursor;
        acc.cursor += sticker.durationInFrames;
        acc.elements.push(
          
            {sticker.component}
          
        );
        return acc;
      },
      { cursor: 0, elements: [] }
    ).elements}
  
);

合成定义（Root.tsx）

import { Composition } from "remotion";
import { StickerPack } from "./StickerPack";
import { EmojiSticker, TextSticker, type StickerSlot } from "./components/stickers";

const exampleStickers: StickerSlot[] = [
  { component: , durationInFrames: 55 },
  { component: , durationInFrames: 45 },
  { component: , durationInFrames: 45 },
  { component: , durationInFrames: 45 },
];

const totalDuration = exampleStickers.reduce((sum, s) => sum + s.durationInFrames, 0);

export const RemotionRoot = () => (
  
);

动画模式

弹簧配置（来自 effects.tsx）

const getSpringConfig = (type: "entrance" | "snappy" | "smooth") => {
  switch (type) {
    case "entrance": return { damping: 20, stiffness: 120, mass: 1 };
    case "snappy":  return { damping: 18, stiffness: 140, mass: 1 };
    case "smooth":  return { damping: 22, stiffness: 100, mass: 1 };
    default:        return { damping: 20, stiffness: 120, mass: 1 };
  }
};

单贴纸时长建议

• bounce：50–60 帧（需预留完整弹跳周期）
• pop：35–50 帧
• 滑入类预设（Slide）：35–50 帧
• spin：40–55 帧
• pulse：45–60 帧（需保证足够振荡周期）
• scaleUp：30–45 帧
• shake：35–50 帧
• flip：40–55 帧
• swing：40–55 帧
• fadeIn：30–45 帧

可调用 animations.tsx 中的 getDefaultDuration(type) 获取合理默认值。

配色方案

由于默认输出为透明背景，贴纸内容可自由使用任意颜色 —— 无需规避绿色，也无需担心色度键控溢出（chroma key bleed）。对于文字类贴纸，建议默认使用白色（#FFFFFF），并采用加粗、高饱和度色彩突出重点（如黄色 #FFD700、青色 #06B6D4、洋红色 #EC4899、橙色 #F97316）。

切换至绿幕模式时，需避免在贴纸内容中使用绿色（#00FF00）及其邻近色，以防被误抠除。

依赖项

{
  "@remotion/cli": "^4.0.0",
  "@remotion/google-fonts": "^4.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "remotion": "^4.0.0"
}

注意：@remotion/transitions 和原始技能中使用的 zod 在贴纸生成场景中非必需。

渲染命令

# Alpha 通道 ProRes 4444（默认，推荐）
npx remotion render src/index.ts StickerPack out/stickers.mov --codec=prores --prores-profile=4444

# Alpha 通道 VP9 WebM（适用于网页叠加层）
npx remotion render src/index.ts StickerPack out/stickers.webm --codec=vp9

# Alpha 通道 PNG 序列（通用兼容性最佳）
npx remotion render src/index.ts StickerPack out/stickers/ --sequence --image-format=png

# 绿幕 H.264（备选方案 —— 需在 props 中设置 greenScreen={true}）
npx remotion render src/index.ts StickerPack out/stickers.mp4 --crf 10

完成渲染后，请执行质量验证：

# 验证 Alpha 通道是否存在（ProRes）
ffprobe -v quiet -show_streams out/stickers.mov | grep -i alpha

开发阶段预览命令：

npx remotion studio

渲染稳定性

• Alpha 模式（默认）下，确保合成根节点 AbsoluteFill 的背景设为 "transparent"。
• 绿幕模式下，须将 GreenScreenBackground 置于 StickerPack 根层级，使其贯穿所有 。
• 合成总时长必须动态计算为所有贴纸帧数之和，禁止硬编码。
• 贴纸严格按顺序播放，彼此间无重叠 —— 不使用任何交叉淡入淡出过渡。
• 每个贴纸对应的 的 from 偏移量需通过递进式游标计算得出。

打包策略

默认策略为 Remotion （见上方「合成连接」章节）。替代方案（如 FFmpeg concat）详见 references/packing-guide.md。