贴纸视频生成

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:

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

| Preset | Visual | Good for | |--------|--------|----------| | bounce | Y-axis drop with 3 diminishing bounces | Fun, energetic stickers | | pop | Scale 0→1 with strong overshoot | Sale badges, emphasis | | slideInLeft | Slide from left with spring | Directional reveals | | slideInRight | Slide from right with spring | Directional reveals | | slideInUp | Slide from bottom with spring | Rising reveals | | slideInDown | Slide from top with spring | Dropping reveals | | spin | Scale-up + 360° rotation | Celebration, loading | | pulse | Continuous sin-scale oscillation | Notifications, heartbeat | | scaleUp | Smooth scale 0→1, no overshoot | Clean reveals | | shake | X-axis shake with decay envelope | Urgency, alerts | | flip | rotateY 3D flip from 180°→0° | Reveals, duality | | swing | Pendulum swing from top pivot | Playful, casual | | fadeIn | Pure opacity spring fade | Subtle, professional |

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 <Sequence> 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 <Sequence> (see Composition Wiring above). See references/packing-guide.md for alternative FFmpeg concat approach.