remotion-asset-coordinator

Remotion Asset Coordinator

Streamlines the asset preparation workflow from motion design specs to production-ready files. Identifies requirements, recommends sources, guides optimization, and generates proper import code.

What This Skill Does

Coordinates the complete asset lifecycle:

1. Requirement extraction — Parse specs for all asset needs
2. Source recommendations — Suggest free/paid asset sources
3. Format guidance — Recommend optimal formats for each asset type
4. Preparation workflows — Step-by-step asset prep instructions
5. Import code generation — Create validated staticFile imports
6. Quality validation — Verify assets meet production standards

Input/Output Formats

Input Format: VIDEO_SPEC.md OR CODE_SCAFFOLD.md

This skill accepts either:

Option 1: VIDEO_SPEC.md (from /motion-designer)

# Video Title

## Assets Required

### Images
- Logo (800x800, transparent background)
- Product photo (1920x1080)

### Audio
- Background music (full duration, 0.4 volume)
- Whoosh sound effect (5s mark, 0.6 volume)

### Fonts
- Inter (weights: 400, 600, 700)

Option 2: CODE_SCAFFOLD.md (from /remotion-spec-translator)

## TODO Markers

- [ ] **Assets Required**
  - [ ] Add `public/logo.png` (800x800)
  - [ ] Add `public/audio/background.mp3`
  - [ ] Add `public/audio/whoosh.mp3`

Output Format: ASSET_MANIFEST.md

Generates a comprehensive asset preparation manifest:

# Asset Manifest: [Video Title]

## Status Overview
- 🔴 Not Started: 3 assets
- 🟡 In Progress: 0 assets
- 🟢 Ready: 0 assets

**Progress:** 0/3 assets ready

## Required Assets

### Images (2 required)

#### 1. Logo
- **Status:** 🔴 Not Started
- **File Path:** `public/images/logo.png`
- **Specifications:**
  - Format: PNG (transparency required)
  - Dimensions: 800x800 pixels (2x for retina)
  - Display size: 400x400px
  - File size target: < 200KB

- **Source Recommendations:**
  - Option 1: Export from Figma/design tool
  - Option 2: Create in Photoshop/Illustrator
  - Optimization: Use pngquant or tinypng.com

- **Preparation Steps:**
  1. Export at 800x800 resolution
  2. Ensure transparent background
  3. Optimize with `pngquant --quality=80-95 logo.png`
  4. Verify file size < 200KB
  5. Save to `public/images/logo.png`

- **Import Code:**
  ```typescript
  import { Img, staticFile } from 'remotion';

  <Img
    src={staticFile('images/logo.png')}
    alt="Logo"
    style={{
      width: 400,
      height: 400,
    }}
  />
  ```

#### 2. Product Photo
- **Status:** 🔴 Not Started
- **File Path:** `public/images/product.jpg`
- **Specifications:**
  - Format: JPEG (no transparency needed)
  - Dimensions: 1920x1080 pixels
  - Quality: 85-90%
  - File size target: < 500KB

- **Source Recommendations:**
  - Option 1: Unsplash (free, high-quality) - https://unsplash.com
  - Option 2: Pexels (free) - https://pexels.com
  - Option 3: Custom photography

- **Preparation Steps:**
  1. Download or shoot at 1920x1080+
  2. Edit/crop to exact 1920x1080
  3. Export as JPEG 85-90% quality
  4. Verify file size < 500KB
  5. Save to `public/images/product.jpg`

- **Import Code:**
  ```typescript
  import { Img, staticFile } from 'remotion';

  <Img
    src={staticFile('images/product.jpg')}
    style={{
      width: '100%',
      height: '100%',
      objectFit: 'cover',
    }}
  />
  ```

### Audio (2 required)

#### 3. Background Music
- **Status:** 🔴 Not Started
- **File Path:** `public/audio/music/background.mp3`
- **Specifications:**
  - Format: MP3
  - Duration: 30 seconds
  - Bitrate: 192-256 kbps
  - Sample rate: 44.1 kHz or 48 kHz
  - Channels: Stereo

- **Source Recommendations:**
  - Option 1: YouTube Audio Library (free) - https://studio.youtube.com
  - Option 2: Incompetech (free, attribution) - https://incompetech.com
  - Option 3: Epidemic Sound (paid) - https://epidemicsound.com

- **Preparation Steps:**
  1. Download/purchase 30s music track
  2. Trim to exactly 30 seconds if needed
  3. Convert to MP3 if needed: `ffmpeg -i input.wav -b:a 192k output.mp3`
  4. Apply fade out at end if needed
  5. Save to `public/audio/music/background.mp3`

- **Import Code:**
  ```typescript
  import { Audio, staticFile, useVideoConfig } from 'remotion';

  const { durationInFrames } = useVideoConfig();

  <Audio
    src={staticFile('audio/music/background.mp3')}
    volume={0.4}
    startFrom={0}
    endAt={durationInFrames}
  />
  ```

#### 4. Whoosh Sound Effect
- **Status:** 🔴 Not Started
- **File Path:** `public/audio/sfx/whoosh.mp3`
- **Specifications:**
  - Format: MP3
  - Duration: 1-2 seconds
  - Bitrate: 192 kbps
  - Timing: Plays at 5s mark (frame 150 at 30fps)

- **Source Recommendations:**
  - Option 1: Freesound (free, Creative Commons) - https://freesound.org
  - Option 2: Zapsplat (free, attribution) - https://zapsplat.com
  - Option 3: AudioJungle (paid) - https://audiojungle.net

- **Preparation Steps:**
  1. Download whoosh/transition sound effect
  2. Trim to 1-2 seconds
  3. Normalize volume if needed
  4. Convert to MP3: `ffmpeg -i input.wav -b:a 192k whoosh.mp3`
  5. Save to `public/audio/sfx/whoosh.mp3`

- **Import Code:**
  ```typescript
  import { Audio, Sequence, staticFile } from 'remotion';

  <Sequence from={150} durationInFrames={60}>
    <Audio
      src={staticFile('audio/sfx/whoosh.mp3')}
      volume={0.6}
    />
  </Sequence>
  ```

### Fonts (1 required)

#### 5. Inter Font
- **Status:** 🟢 Ready (Google Font)
- **Weights Needed:** 400 (Regular), 600 (Semibold), 700 (Bold)
- **Source:** Google Fonts via @remotion/google-fonts

- **Installation:**
  ```bash
  npm install @remotion/google-fonts
  ```

- **Import Code:**
  ```typescript
  import { loadFont } from '@remotion/google-fonts/Inter';

  const { fontFamily } = loadFont({
    weights: ['400', '600', '700'],
  });

  <div style={{
    fontFamily,
    fontWeight: 600,
  }}>
    Text content
  </div>
  ```

## Directory Structure

Create this folder structure in your project:

public/ ├── images/ │ ├── logo.png # 🔴 Required │ └── product.jpg # 🔴 Required └── audio/ ├── music/ │ └── background.mp3 # 🔴 Required └── sfx/ └── whoosh.mp3 # 🔴 Required

## Quick Reference: Optimization Commands

### Images

Optimize PNG

pngquant --quality=80-95 input.png -o output.png

Convert to JPEG

magick input.png -quality 90 output.jpg

Resize image

magick input.png -resize 1920x1080 output.png

### Audio

Convert to MP3

ffmpeg -i input.wav -b:a 192k output.mp3

Trim audio

ffmpeg -i input.mp3 -ss 00:00:00 -t 00:00:30 -c copy output.mp3

Normalize volume

ffmpeg -i input.mp3 -filter:a "volume=1.5" output.mp3

## Quality Checklist

Before marking assets as ready:

- [ ] All files in correct directories
- [ ] File names match import paths exactly
- [ ] Image dimensions correct (2x for retina if needed)
- [ ] Image formats appropriate (PNG for transparency, JPEG for photos)
- [ ] Image file sizes optimized (< 500KB ideal)
- [ ] Audio files in MP3 format
- [ ] Audio durations correct
- [ ] Audio bitrates appropriate (192-256 kbps)
- [ ] Fonts installed and imported correctly
- [ ] All staticFile() paths tested

## Next Steps

1. **Gather assets** using source recommendations above
2. **Prepare assets** following preparation steps for each
3. **Validate quality** using the checklist
4. **Update status** to 🟢 Ready as assets are completed
5. **Implement code** using provided import snippets
6. **Run `/remotion-video-reviewer`** to verify asset integration

This document provides:

• Complete asset inventory with specifications
• Source recommendations (free and paid)
• Step-by-step preparation workflows
• Ready-to-use import code snippets
• Quality validation checklist
• Progress tracking (🔴 🟡 🟢)

Feeds into: Developer implementation → /remotion-video-reviewer for quality check

Asset Categories

Images

Types:

• P