贴纸视频生成

Generate sticker animation videos with alpha transparency using Remotion. Each sticker is 1-2 seconds on a transparent background. Multiple stickers are packed into a single output video via Sequence concatenation. Exports ProRes 4444 with alpha by default; green screen (#00FF00) H.264 available as fallback.

Quick Start

When the user asks to create sticker videos, follow this sequence:

1. Understand the user's needs — parse each requested sticker as a combination of content (emoji/icon/text) + animation type + optional duration.
2. Map each request to an animation preset from references/sticker-catalog.md. Confirm with the user if the mapping is ambiguous.
3. Scaffold a Remotion project with the structure below (or use an existing one).
4. Copy the bundled templates into src/components/: animations.tsx, stickers.tsx, greenscreen.tsx, effects.tsx, aspect.tsx, and optionally audio.tsx.
5. Build each sticker using EmojiSticker, TextSticker, or ComboSticker with the chosen animation preset.
6. Pack stickers into a single composition using with running cursor offsets (see references/packing-guide.md).
7. Render with alpha channel (default):

```bash

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

```

Or switch to green screen mode if the user needs H.264 compatibility (see references/greenscreen-guide.md).

1. Run the QA checks in references/render-quality.md before considering the output done.

User Input Examples

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

The AI should parse these into concrete sticker specs:

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

Project Structure

src/
├── index.ts               # Entry: calls registerRoot(Root)
├── Root.tsx               # Composition definition (StickerPack)
├── StickerPack.tsx         # Master composition: Sequence layout, transparent background
└── components/
    ├── animations.tsx      # Animation preset engine (13 presets)
    ├── stickers.tsx        # EmojiSticker, TextSticker, ComboSticker
    ├── greenscreen.tsx     # GreenScreenBackground, export profiles
    ├── effects.tsx         # getSpringConfig, ProgressBar
    ├── aspect.tsx          # STICKER_PROFILE, responsiveFont
    └── audio.tsx           # Optional: BackgroundMusic for audio stings
public/
└── audio/                  # Optional: short audio sting files

Resolution & Timing

Default specs for sticker video:

• Default: 1080×1080 (1:1 square)
• FPS: 30
• Sticker duration: 1-2 seconds per sticker (30-60 frames)
• Pack duration: sum of all sticker durations (e.g., 4 stickers × ~2s ≈ 8 seconds = 240 frames)
• Stickers play sequentially with clean cuts (no crossfade overlap between stickers)
• Background: transparent (alpha channel) by default; green screen #00FF00 available as fallback

Alpha Channel (Default) & Green Screen (Fallback)

Two mutually exclusive export modes. Alpha channel is the default — stickers render on a transparent background and can be placed directly over any content without keying.

Alpha Channel Mode (default)

Omit GreenScreenBackground. The composition background is transparent. Export with an alpha-supporting codec:

# ProRes 4444 — best quality, Mac/Adobe workflow, large files
npx remotion render src/index.ts StickerPack out/stickers.mov --codec=prores --prores-profile=4444

# VP9 WebM — smaller file, web/browser/OBS overlays
npx remotion render src/index.ts StickerPack out/stickers.webm --codec=vp9

# PNG sequence — frame-by-frame with alpha, universal compatibility
npx remotion render src/index.ts StickerPack out/stickers/ --sequence --image-format=png

Green Screen Mode (fallback)

When the user's pipeline requires standard H.264 with chroma key. Render with GreenScreenBackground as the root layer:

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

The exact #00FF00 background is keyed out in editing software. Use lower CRF (5-10) to preserve color accuracy through H.264 chroma subsampling.

See references/greenscreen-guide.md for detailed export guidance, keying settings, and codec comparison.

Animation Presets

Copy assets/templates/animations.tsx into the project. It exports getAnimationValues(frame, fps, config) — a pure function returning React.CSSProperties. Available animation types:

Each preset accepts delay (frames) and intensity (0-1 multiplier).

Refer to references/sticker-catalog.md for detailed descriptions, timing guidance, and usage recommendations.

Sticker Components

Copy assets/templates/stickers.tsx into src/components/. Three component types:

EmojiSticker

<EmojiSticker
  emoji="❤️"
  animation="bounce"
  size={200}       // font-size in px
  delay={0}        // frames before animation starts
  intensity={1}    // 0-1 animation strength
/>

TextSticker

<TextSticker
  text="SALE"
  animation="pop"
  fontSize={80}
  color="#FFFFFF"
  fontFamily="Inter, system-ui, sans-serif"
  fontWeight={700}
  delay={0}
  intensity={1}
/>

ComboSticker

<ComboSticker
  emoji="🎉"
  text="恭喜"
  emojiAnimation="bounce"
  textAnimation="pop"
  layout="top"       // "top" | "bottom" | "left" | "right"
  emojiSize={140}
  textProps={{ fontSize: 64, color: "#FFD700" }}
  delay={0}
/>

Composition Wiring (StickerPack.tsx)

The master composition packs stickers using with a running cursor. Defaults to alpha mode:

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

type Props = {
  stickers: StickerSlot[];
  greenScreen?: boolean; // set true only for green screen fallback
};

export const StickerPack: React.FC<Props> = ({ stickers, greenScreen = false }) => (
  <AbsoluteFill style={{ backgroundColor: greenScreen ? undefined : "transparent" }}>
    {greenScreen && <GreenScreenBackground />}
    {stickers.reduce<{ cursor: number; elements: React.ReactNode[] }>(
      (acc, sticker, i) => {
        const from = acc.cursor;
        acc.cursor += sticker.durationInFrames;
        acc.elements.push(
          <Sequence key={i} from={from} durationInFrames={sticker.durationInFrames}>
            {sticker.component}
          </Sequence>
        );
        return acc;
      },
      { cursor: 0, elements: [] }
    ).elements}
  </AbsoluteFill>
);

Composition Definition (Root.tsx)

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

const exampleStickers: StickerSlot[] = [
  { component: <EmojiSticker emoji="❤️" animation="bounce" />, durationInFrames: 55 },
  { component: <TextSticker text="SALE" animation="pop" fontSize={100} />, durationInFrames: 45 },
  { component: <EmojiSticker emoji="⭐" animation="spin" />, durationInFrames: 45 },
  { component: <TextSticker text="NEW" animation="slideInRight" />, durationInFrames: 45 },
];

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

export const RemotionRoot = () => (
  <Composition
    id="StickerPack"
    component={StickerPack}
    durationInFrames={totalDuration}
    fps={30}
    width={1080}
    height={1080}
    defaultProps={{ stickers: exampleStickers }}
  />
);

Animation Patterns

Spring Configurations (from 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 };
  }
};

Per-sticker Duration Guidance

• bounce: 50-60 frames (needs time for bounce sequence)
• pop: 35-50 frames
• Slide presets: 35-50 frames
• spin: 40-55 frames
• pulse: 45-60 frames (needs oscillation cycles)
• scaleUp: 30-45 frames
• shake: 35-50 frames
• flip: 40-55 frames
• swing: 40-55 frames
• fadeIn: 30-45 frames

Use getDefaultDuration(type) from animations.tsx for sensible defaults.

Color Scheme

Since the default output has a transparent background, sticker content can use any color freely — no need to avoid green or worry about chroma key bleed. For text stickers, default to white (#FFFFFF) and use bold, saturated colors (yellow #FFD700, cyan #06B6D4, magenta #EC4899, orange #F97316) for emphasis.

When switching to green screen mode, avoid green (#00FF00) and near-green colors in sticker content to prevent them from being keyed out.

Dependencies

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

Note: @remotion/transitions and zod from the original skill are not needed for sticker generation.

Render Commands

# Alpha channel ProRes 4444 (default, recommended)
npx remotion render src/index.ts StickerPack out/stickers.mov --codec=prores --prores-profile=4444

# Alpha channel VP9 WebM (web overlays)
npx remotion render src/index.ts StickerPack out/stickers.webm --codec=vp9

# Alpha channel PNG sequence (universal)
npx remotion render src/index.ts StickerPack out/stickers/ --sequence --image-format=png

# Green screen H.264 (fallback — set greenScreen={true} in props)
npx remotion render src/index.ts StickerPack out/stickers.mp4 --crf 10

After rendering, run quality checks:

# Verify alpha plane exists (ProRes)
ffprobe -v quiet -show_streams out/stickers.mov | grep -i alpha

For preview during development:

npx remotion studio

Render Stability

• For alpha mode (default), set the composition root AbsoluteFill background to "transparent".
• For green screen mode, put GreenScreenBackground at the StickerPack root so it persists across all Sequences.
• Calculate the total composition duration as the sum of all sticker frame counts; never hardcode.
• Stickers play sequentially without overlap — no crossfade transitions.
• Each sticker's Sequence from offset is computed via a running cursor.

Packing Strategies

Default strategy is Remotion (see Composition Wiring above). See references/packing-guide.md for alternative FFmpeg concat approach.