---
name: ad-video-creator
description: Create promotional video ads using Remotion (React-based video). Generates product showcases, testimonials, promos, and social media ads. Supports 9:16 (Stories/Reels), 16:9 (YouTube), 1:1 (Feed). Use when user asks for ad video, promo video, product video, social media video, or marketing video.
---

# Ad Video Creator

Create professional ad videos with Remotion + Chrome Devtools MCP for real-time preview.

## ⚠️ Asset Storage Policy (MANDATORY)

**NEVER save generated assets in workspace root.**

| Asset Type | Save To |
|------------|---------|
| Product video (has slug) | `/home/aria/products/<slug>/marketing/videos/` |
| Non-product video | `/home/aria/marketing-assets/uploads/videos/` |
| Remotion project source | `/home/aria/products/<slug>/marketing/remotion/` or `/home/aria/marketing-assets/remotion/<project>/` |

Create directories if they don't exist. This policy is enforced by Raven (CTO).

## Quick Start

### 1. Initialize Project

```bash
# Create new Remotion project
npx create-video@latest <project-name> --template blank
cd <project-name>
npm install
```

### 2. Configure MCP (for Claude Code)

Create `.mcp.json` in project root:
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-chrome-devtools@latest"]
    }
  }
}
```

### 3. Start Preview Server

```bash
npx remotion studio
```
Opens at http://localhost:3000 — use Devtools MCP to interact with preview.

## Ad Formats

| Format | Dimensions | FPS | Use Case |
|--------|------------|-----|----------|
| `vertical` | 1080×1920 | 30 | Stories, Reels, TikTok |
| `horizontal` | 1920×1080 | 30 | YouTube, TV, Web |
| `square` | 1080×1080 | 30 | Instagram Feed, Facebook |

## Composition Structure

Every ad video follows this structure:

```tsx
// src/Root.tsx
import {Composition} from 'remotion';
import {Ad} from './Ad';

export const RemotionRoot = () => (
  <>
    <Composition
      id="ProductAd"
      component={Ad}
      durationInFrames={300} // 10 seconds at 30fps
      fps={30}
      width={1080}
      height={1920}
      defaultProps={{
        brandColor: '#000000',
        productName: 'Product Name',
        tagline: 'Your tagline here',
        ctaText: 'Shop Now',
        logoUrl: '/logo.png',
        productImageUrl: '/product.png',
      }}
    />
  </>
);
```

## Ad Templates

Load specific template patterns from references:

- **Product Showcase**: See [references/product-showcase.md](references/product-showcase.md)
- **Testimonial**: See [references/testimonial.md](references/testimonial.md)
- **Promo/Sale**: See [references/promo-sale.md](references/promo-sale.md)
- **App Demo**: See [references/app-demo.md](references/app-demo.md)

## Animation Patterns

### Text Entrance (Fade + Slide Up)
```tsx
import {interpolate, useCurrentFrame} from 'remotion';

const TextReveal = ({text, delay = 0}: {text: string; delay?: number}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame - delay, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
  const y = interpolate(frame - delay, [0, 15], [30, 0], {extrapolateRight: 'clamp'});
  
  return (
    <div style={{opacity, transform: `translateY(${y}px)`}}>
      {text}
    </div>
  );
};
```

### Scale Pop (for CTAs, logos)
```tsx
const ScalePop = ({children, delay = 0}: {children: React.ReactNode; delay?: number}) => {
  const frame = useCurrentFrame();
  const scale = interpolate(frame - delay, [0, 10, 15], [0, 1.1, 1], {extrapolateRight: 'clamp'});
  
  return (
    <div style={{transform: `scale(${scale})`}}>
      {children}
    </div>
  );
};
```

### Sequence Timing
```tsx
import {Sequence} from 'remotion';

// Stack scenes with Sequence
<Sequence from={0} durationInFrames={90}>
  <IntroScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
  <ProductScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
  <CTAScene />
</Sequence>
```

## Brand Integration

### Load Brand Assets
```tsx
// Put assets in public/ folder
const Logo = () => <Img src="/logo.png" />;
const Product = () => <Img src="/product.png" />;

// Or use staticFile for type safety
import {staticFile} from 'remotion';
const logoSrc = staticFile('logo.png');
```

### Brand Colors as Props
```tsx
interface AdProps {
  brandColor: string;
  accentColor: string;
  backgroundColor: string;
}

export const Ad: React.FC<AdProps> = ({brandColor, accentColor, backgroundColor}) => (
  <AbsoluteFill style={{backgroundColor}}>
    <h1 style={{color: brandColor}}>Your Brand</h1>
    <button style={{backgroundColor: accentColor}}>Shop Now</button>
  </AbsoluteFill>
);
```

## Rendering

### Render to MP4
```bash
npx remotion render src/index.ts ProductAd out/ad.mp4
```

### Render Specific Format
```bash
# Vertical (Stories)
npx remotion render src/index.ts ProductAd out/ad-vertical.mp4 --height=1920 --width=1080

# Horizontal (YouTube)
npx remotion render src/index.ts ProductAd out/ad-horizontal.mp4 --height=1080 --width=1920

# Square (Feed)
npx remotion render src/index.ts ProductAd out/ad-square.mp4 --height=1080 --width=1080
```

### Render with Custom Props
```bash
npx remotion render src/index.ts ProductAd out/ad.mp4 --props='{"brandColor":"#ff0000","productName":"New Product"}'
```

## Audio

### Add Background Music
```tsx
import {Audio, staticFile} from 'remotion';

<Audio src={staticFile('music.mp3')} volume={0.3} />
```

### Add Voiceover
```tsx
<Sequence from={30}>
  <Audio src={staticFile('voiceover.mp3')} volume={1} />
</Sequence>
```

## Workflow with Devtools MCP

1. **Start studio**: `npx remotion studio`
2. **Open in browser**: http://localhost:3000
3. **Use MCP to preview**: Claude can take screenshots, interact with timeline
4. **Iterate**: Edit code → preview updates automatically
5. **Render when satisfied**: `npx remotion render ...`

## Example: 15-Second Product Ad

See [references/example-product-ad.md](references/example-product-ad.md) for complete implementation.

## Captions & Subtitles

For videos with text overlays or captions, see the Remotion skill: [../remotion/rules/subtitles.md](../remotion/rules/subtitles.md)

## FFmpeg Operations

For trimming source videos, extracting audio, or post-processing, see: [../remotion/rules/ffmpeg.md](../remotion/rules/ffmpeg.md)
