Remotion Thumbnail

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!