Remotion Thumbnail Generator

Generate professional YouTube thumbnails using your own expression cutouts and Remotion's powerful rendering engine.

What This Skill Does

This skill helps you create consistent, high-quality YouTube thumbnails by:

1. •Capturing your expressions - Guide you through 25 preset expressions
2. •Creating cutouts - Automatically remove backgrounds using AI
3. •Generating thumbnails - Render professional thumbnails with custom text, backgrounds, and styles

Quick Start

Prerequisites

• •Node.js 18 or higher
• •Replicate API key (for background removal) - Get one at https://replicate.com
• •A webcam or camera for capturing expressions

Installation

The skill files should be in your agent's skills directory. The renderer is a self-contained Remotion project.

# Install renderer dependencies
cd <skill-dir>/renderer
npm install

Set Up Your Environment

# Set your Replicate API key
export REPLICATE_API_TOKEN="your-api-key-here"

Workflow

Phase 1: Capture Expressions

Run the interactive capture script to photograph yourself in 25 different expressions:

node <skill-dir>/scripts/capture.js

What it does:

• •Shows you each expression to capture (e.g., "Happy/Smiling", "Shocked", "Pointing Up")
• •Tells you where to save each photo
• •Tracks which expressions you've captured
• •Saves metadata to storage/expressions_db.json

Tips:

• •Use good lighting (natural light from a window works great)
• •Keep the same framing/distance for all shots
• •Wear solid colors (avoid busy patterns)
• •Plain background makes cutout processing easier

Phase 2: Generate Cutouts

Process all your raw photos to create transparent-background cutouts:

node <skill-dir>/scripts/process_cutouts.js

What it does:

• •Reads all captured expressions from the database
• •Sends each photo to Replicate's background removal AI
• •Downloads and saves the cutout PNGs
• •Updates the database with cutout URLs

Time: ~30-60 seconds per expression

Phase 3: Generate Thumbnails

Once you have cutouts, generate thumbnails on demand:

npx remotion still Thumbnail <skill-dir>/renderer/out/thumbnail.png \
  --props='{
    "headline": "This Changed Everything",
    "emotionId": 5,
    "stylePreset": "bold",
    "cutoutUrl": "<skill-dir>/storage/cutouts/5_cutout.png",
    "bgUrl": "https://example.com/background.jpg"
  }'

Parameters:

• •headline (string): The main text to display
• •emotionId (number): Which expression to use (1-25)
• •stylePreset (string): Visual style - "bold", "dramatic", or "clean"
• •cutoutUrl (string): Path to your expression cutout
• •bgUrl (string): URL or path to background image

Output: High-res PNG thumbnail ready for YouTube

Expression Reference

See EXPRESSIONS.md for the full list of 25 expressions and usage tips.

Style Presets

"bold"

• •Vibrant colors
• •Strong contrast
• •Dynamic composition
• •Best for: Entertainment, gaming, reaction content

"dramatic"

• •Moody lighting
• •Cinematic feel
• •Subdued colors
• •Best for: Documentaries, serious topics, storytelling

"clean"

• •Minimal design
• •Soft colors
• •Professional look
• •Best for: Educational, business, tutorials

Advanced Usage

Custom Backgrounds

You can use:

• •Image URLs: Direct link to any image
• •Local files: File path to an image on disk
• •AI-generated: Use DALL-E, Midjourney, etc. and pass the URL
• •Solid colors: Pass a color code (implementation detail in renderer)

Batch Generation

Generate multiple thumbnails programmatically:

# See references/BATCH_GENERATION.md for examples

Customizing the Renderer

The Remotion renderer is a standard React/Remotion project. You can:

• •Modify styles in renderer/src/Thumbnail.tsx
• •Add new style presets
• •Adjust layout/composition
• •Add animations (for video thumbnails)

See Remotion docs for details.

Troubleshooting

"Expression not found"

• •Make sure you've run Phase 1 (capture) and Phase 2 (cutouts)
• •Check storage/expressions_db.json to see which expressions are ready

"Replicate API error"

• •Verify your REPLICATE_API_TOKEN is set correctly
• •Check your Replicate account has credits
• •See TROUBLESHOOTING.md for more

"Renderer not found"

• •Ensure you've run npm install in the renderer directory
• •Check that Node.js 18+ is installed

For more issues, see references/TROUBLESHOOTING.md

File Structure

remotion-thumbnail/
├── SKILL.md                    # This file
├── scripts/
│   ├── capture.js              # Interactive expression capture
│   └── process_cutouts.js      # Background removal pipeline
├── references/
│   ├── SETUP.md                # Detailed setup guide
│   ├── EXPRESSIONS.md          # Expression reference
│   ├── BATCH_GENERATION.md     # Batch processing examples
│   └── TROUBLESHOOTING.md      # Common issues & solutions
├── assets/
│   └── expressions.json        # Expression definitions
├── renderer/                   # Remotion project
│   ├── src/
│   │   └── Thumbnail.tsx       # Main thumbnail component
│   └── package.json
└── storage/                    # Generated at runtime
    ├── raw/                    # Your captured photos
    ├── cutouts/                # AI-processed cutouts
    └── expressions_db.json     # Expression metadata

Performance Tips

• •First run: Cutout generation takes time (~30-60s per expression)
• •Subsequent thumbnails: Instant once cutouts are ready
• •Caching: Cutouts are reusable forever - generate once, use unlimited times

License

MIT - See LICENSE file for details.

Credits

Created by Alternative Design
Powered by Remotion and Replicate

Support

• •Issues: https://github.com/alternative-design/remotion-thumbnail/issues
• •Discussions: https://github.com/alternative-design/remotion-thumbnail/discussions
• •Twitter: @alternativedesign

Pro tip: Once you have your expression library set up, you can generate unlimited thumbnail variations in seconds. Perfect for A/B testing or maintaining consistent branding across your channel!