✨ Features

🛠️ Dual Rendering Engines

🚀 Quick Start

Installation

Method 1: One-Click Install (Recommended)

npx skills add https://github.com/op7418/Video-Wrapper-Skills

Method 2: Manual Install

# Clone to Claude Skills directory
cd ~/.claude/skills/
git clone https://github.com/op7418/Video-Wrapper-Skills.git video-wrapper
cd video-wrapper

# Install dependencies
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
playwright install chromium

Usage

In Claude Code

/video-wrapper interview.mp4 subtitles.srt

Claude will:

1. 📊 Analyze subtitles, identify key information
2. 💡 Generate effect suggestions (lower thirds, key phrases, term cards, etc.)
3. 📝 Present suggestions in Markdown for review
4. ✅ Auto-render output video after confirmation

Command Line

# Direct rendering with config file
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# Specify renderer
python src/video_processor.py video.mp4 subs.srt config.json -r browser  # Browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil      # PIL

🎥 Demo

💡 Visual effects showcase across different themes and components

Theme Comparison

Component Examples

📋 Use Cases

🎨 Theme System

Choose the right theme based on content style:

{
  "theme": "notion"  // or "cyberpunk", "apple", "aurora"
}

🧩 Component Configuration

Complete Configuration Example

{
  "theme": "notion",

  "lowerThirds": [
    {
      "name": "John Doe",
      "role": "Chief Scientist",
      "company": "AI Research Lab",
      "startMs": 1000,
      "durationMs": 5000
    }
  ],

  "chapterTitles": [
    {
      "number": "Part 1",
      "title": "The Journey of AI",
      "subtitle": "The History of AI Development",
      "startMs": 0,
      "durationMs": 4000
    }
  ],

  "keyPhrases": [
    {
      "text": "AI Development is Smooth Curve",
      "style": "emphasis",
      "startMs": 2630,
      "endMs": 5500
    }
  ],

  "termDefinitions": [
    {
      "chinese": "摩尔定律",
      "english": "Moore's Law",
      "description": "Number of transistors doubles every 18-24 months",
      "firstAppearanceMs": 37550,
      "displayDurationSeconds": 6
    }
  ],

  "quotes": [
    {
      "text": "AI development is a very smooth exponential curve",
      "author": "— John Doe",
      "startMs": 30000,
      "durationMs": 5000
    }
  ],

  "stats": [
    {
      "prefix": "Growth Rate ",
      "number": 240,
      "unit": "%",
      "label": "Annual Computing Power Growth",
      "startMs": 45000,
      "durationMs": 4000
    }
  ],

  "bulletPoints": [
    {
      "title": "Key Takeaways",
      "points": [
        "AI development is smooth exponential curve",
        "Similar to Moore's Law intelligence growth",
        "No sudden singularity moment"
      ],
      "startMs": 50000,
      "durationMs": 6000
    }
  ],

  "socialBars": [
    {
      "platform": "twitter",
      "label": "Follow us",
      "handle": "@ai_research",
      "startMs": 52000,
      "durationMs": 8000
    }
  ]
}

Component Parameters Quick Reference

⚠️ Key Phrase Usage: text must be a phrase (e.g., "AI Development is Smooth Curve"), not a single word (e.g., "Artificial Intelligence"). Use term cards for single words.

🗂️ Project Structure

video-wrapper/
├── 📄 SKILL.md                  # Claude Skill definition
├── 📄 README.md                 # This document (English)
├── 📄 README_CN.md              # Chinese documentation
├── 📄 ARCHITECTURE.md           # Detailed architecture
├── 📄 requirements.txt          # Python dependencies
├── 📁 src/                      # Source code
│   ├── video_processor.py       # Main processing flow
│   ├── browser_renderer.py      # Playwright renderer
│   ├── content_analyzer.py      # AI content analysis
│   ├── fancy_text.py            # PIL key phrase rendering
│   ├── term_card.py             # PIL card rendering
│   └── animations.py            # Animation functions
├── 📁 templates/                # HTML templates
│   ├── fancy-text.html
│   ├── term-card.html
│   ├── lower-third.html
│   ├── chapter-title.html
│   ├── quote-callout.html
│   ├── animated-stats.html
│   ├── bullet-points.html
│   ├── social-bar.html
│   └── video-config.json.template
└── 📁 static/                   # Static assets
    ├── css/                     # Theme styles
    │   ├── effects.css
    │   ├── theme-notion.css
    │   ├── theme-cyberpunk.css
    │   ├── theme-apple.css
    │   └── theme-aurora.css
    └── js/
        └── anime.min.js         # Animation engine

❓ FAQ

# Ensure Python version >= 3.8
pip install playwright
playwright install chromium

# macOS may need to remove quarantine flag
xattr -r -d com.apple.quarantine ~/.cache/ms-playwright

# Verify installation
playwright --version

# macOS - PingFang SC included
# No additional installation needed

# Ubuntu/Debian
sudo apt-get install fonts-noto-cjk

# CentOS/RHEL
sudo yum install google-noto-sans-cjk-fonts

# Verify fonts
fc-list :lang=zh

🔧 Tech Stack

Detailed architecture available in ARCHITECTURE.md

📚 Resources

• Claude Skills Documentation
• MoviePy Documentation
• Playwright Documentation
• Anime.js Documentation

🤝 Contributing

Issues and Pull Requests are welcome!

Before submitting a PR, please ensure:

• ✅ Code style follows project conventions
• ✅ Added necessary tests
• ✅ Updated relevant documentation

📄 License

MIT License