ncklrs/startup-os-skills/remotion-asset-coordinator

# 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)

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

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

 
## Quick Reference: Optimization Commands
 
### Images

 
### Audio

 
## 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

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

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

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

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

# 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