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:**

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:

// 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.

Rule Sections

Asset Type Guides

• image-assets.md — Image formats, optimization, and best practices
• video-assets.md — Video encoding, formats, and preparation
• audio-assets.md — Audio processing, formats, and integration
• font-assets.md — Font loading, licensing, and management

Workflow Guides

• asset-sourcing.md — Finding and licensing assets from various sources
• asset-preparation.md — Step-by-step preparation workflows
• asset-optimization.md — File size and performance optimization
• asset-organization.md — Directory structure and naming conventions