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:

  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:

  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:

  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:

  npm install @remotion/google-fonts
  

• Import Code:

  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:**
- Product photos
- Background images
- Textures and patterns
- Icons and illustrations
- Logos and brand assets

**Optimal Formats:**
- **PNG**: Logos, icons, text overlays (transparency needed)
- **JPEG**: Photos, backgrounds (no transparency)
- **SVG**: Simple graphics, icons (scalable, small file size)
- **WebP**: Modern alternative, smaller file sizes

**Recommendations:**
```typescript
// Logo (transparency required)
Format: PNG
Resolution: 2x intended display size (retina)
Example: 400x400 element → 800x800 PNG

// Product photo
Format: JPEG (85-90% quality)
Resolution: Exact or slightly larger than display
Example: 1920x1080 display → 1920x1080 or 2560x1440 JPEG

// Icon
Format: SVG (preferred) or PNG
Resolution: 2x display size if PNG

Videos

Types:

• Background footage
• Product demos
• Screen recordings
• Transitions

Optimal Formats:

• MP4 (H.264): Best compatibility
• WebM: Modern, smaller files
• ProRes: High quality source footage

Recommendations:

// Background video
Format: MP4 (H.264)
Codec: H.264, High profile
Resolution: Match composition (1920x1080)
Bitrate: 5-10 Mbps
Frame rate: Match composition (30fps)

// Product demo
Format: MP4 (H.264)
Resolution: 1920x1080 or 3840x2160 (4K)
Bitrate: 10-20 Mbps
Alpha channel: Use ProRes 4444 if transparency needed

Audio

Types:

• Background music
• Sound effects (SFX)
• Voiceover
• Ambient texture

Optimal Formats:

• MP3: Compressed, good compatibility
• WAV: Uncompressed, best quality
• AAC: Modern, better compression than MP3

Recommendations:

// Background music
Format: MP3 or AAC
Bitrate: 192-320 kbps
Sample rate: 44.1 kHz or 48 kHz
Channels: Stereo

// Sound effects
Format: WAV (for editing) → MP3 (for production)
Bitrate: 192 kbps (MP3)
Sample rate: 44.1 kHz
Channels: Stereo or Mono
Duration: Trim to exact needed length

// Voiceover
Format: WAV or MP3
Bitrate: 256-320 kbps
Sample rate: 48 kHz
Channels: Mono (sufficient for voice)

Fonts

Types:

• Google Fonts (free, web-safe)
• Custom fonts (brand-specific)
• System fonts (fallbacks)

Recommendations:

// Google Fonts (preferred)
Method: Import via @remotion/google-fonts
Weights: Only import needed weights
Example: 400 (regular), 600 (semibold), 700 (bold)

// Custom fonts
Format: WOFF2 (best), WOFF, TTF
Location: /public/fonts/
Import: Via CSS @font-face

Asset Source Recommendations

Free Sources

Images & Illustrations:

• Unsplash — High-quality photos (free, no attribution required)
• Pexels — Photos and videos (free)
• Pixabay — Photos, vectors, videos (free)
• unDraw — Customizable illustrations (free, SVG)
• Heroicons — Beautiful hand-crafted SVG icons (free)

Audio:

• Freesound — Sound effects library (Creative Commons)
• YouTube Audio Library — Music and SFX (free for commercial use)
• Incompetech — Royalty-free music (attribution required)
• Zapsplat — Free sound effects (attribution)

Fonts:

• Google Fonts — 1400+ free fonts (web-safe)
• Font Squirrel — Free fonts for commercial use

Paid/Premium Sources

Images:

• Adobe Stock — Professional quality
• Shutterstock — Massive library
• Getty Images — Premium content

Audio:

• Epidemic Sound — High-quality music library
• Artlist — Unlimited music licensing
• AudioJungle — Individual tracks, affordable

Fonts:

• Adobe Fonts — Included with Creative Cloud
• MyFonts — Massive font marketplace

Asset Preparation Workflows

Image Preparation

# 1. Resize to appropriate dimensions
magick input.png -resize 1920x1080 output.png

# 2. Optimize PNG
pngquant --quality=80-95 input.png -o optimized.png

# 3. Convert to JPEG (if no transparency)
magick input.png -quality 90 output.jpg

# 4. Generate WebP (modern format)
magick input.png -quality 85 output.webp

Manual workflow:

1. Open in Photoshop/GIMP/Figma
2. Resize to exact or 2x display dimensions
3. Export at appropriate quality
4. Verify file size (< 1MB for most images)

Video Preparation

# Convert to H.264 MP4
ffmpeg -i input.mov -c:v libx264 -preset slow -crf 20 -c:a aac -b:a 192k output.mp4

# Resize video
ffmpeg -i input.mp4 -vf scale=1920:1080 -c:v libx264 -crf 20 output.mp4

# Extract clip segment
ffmpeg -i input.mp4 -ss 00:00:10 -t 00:00:05 -c copy output.mp4

# Compress video
ffmpeg -i input.mp4 -c:v libx264 -crf 28 -c:a aac -b:a 128k compressed.mp4

Audio Preparation

# Convert to MP3
ffmpeg -i input.wav -codec:a libmp3lame -b:a 192k output.mp3

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:05 -t 00:00:10 -c copy trimmed.mp3

# Adjust volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" louder.mp3

# Fade in/out
ffmpeg -i input.mp3 -af "afade=t=in:st=0:d=2,afade=t=out:st=28:d=2" faded.mp3

Import Code Generation

Images

Spec requirement: "Logo.png (800x800)"

Generated code:

import { Img, staticFile } from 'remotion';

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

Videos

Spec requirement: "Background video (1920x1080, 30fps)"

Generated code:

import { Video, staticFile } from 'remotion';

<Video
  src={staticFile('background-video.mp4')}
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  }}
/>

Audio

Spec requirement: "Background music (full duration)"

Generated code:

import { Audio, staticFile, useVideoConfig } from 'remotion';

// In component
const { durationInFrames } = useVideoConfig();

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

Fonts

Spec requirement: "Inter font (400, 600, 700)"

Generated code:

import { loadFont } from '@remotion/google-fonts/Inter';

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

// In component
<div style={{
  fontFamily,
  fontWeight: 700,
}}>
  Text content
</div>

Asset Organization

Directory Structure

project/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   ├── product.jpg
│   │   └── background.webp
│   ├── videos/
│   │   ├── intro.mp4
│   │   └── demo.mp4
│   ├── audio/
│   │   ├── music/
│   │   │   └── background.mp3
│   │   └── sfx/
│   │       ├── whoosh.mp3
│   │       ├── pop.mp3
│   │       └── ding.mp3
│   └── fonts/
│       └── CustomFont.woff2
└── src/
    └── remotion/
        └── compositions/

Naming Conventions

// Good naming
logo.png              // Clear, simple
product-hero.jpg      // Descriptive
background-gradient.webp
whoosh-transition.mp3
background-music.mp3

// Bad naming
IMG_1234.jpg         // Not descriptive
final-FINAL-v2.png   // Confusing versions
my image.png         // Spaces (use hyphens)

Quality Validation Checklist

Before using assets in production:

Images:

• Correct dimensions (2x for retina if needed)
• Appropriate format (PNG for transparency, JPEG for photos)
• Optimized file size (< 500KB ideal, < 1MB maximum)
• No artifacts or compression issues
• Transparent background if required

Videos:

• Correct resolution (matches composition)
• Correct frame rate (matches composition)
• Appropriate codec (H.264)
• Reasonable file size (< 50MB ideal)
• No dropped frames
• Audio included if needed

Audio:

• Correct format (MP3 or WAV)
• Appropriate bitrate (192-320 kbps)
• Trimmed to exact duration
• Normalized volume levels
• No clipping or distortion
• Fade in/out applied if needed

Fonts:

• Legal license for commercial use
• All required weights available
• Proper format (WOFF2 preferred)
• Loaded correctly in composition

Integration with Other Skills

Works with:

• /motion-designer — Extracts asset requirements from specs
• /remotion-spec-translator — Generates asset import code during translation
• /remotion-video-reviewer — Validates asset quality during review

Rules Directory

For detailed asset guidance:

• rules/image-assets.md — Image preparation and optimization
• rules/video-assets.md — Video encoding and preparation
• rules/audio-assets.md — Audio processing and integration
• rules/font-assets.md — Font loading and management

This skill ensures all assets are properly sourced, prepared, and integrated for production-ready Remotion videos.