video-wrapper-skills

🎬 Video Wrapper

Add Variety Show Style Visual Effects to Interview/Podcast Videos

AI-powered subtitle analysis, automatic effect suggestions, one-click professional visual rendering

Quick Start • Features • Demo • Use Cases • Architecture

中文文档

---

✨ Features

🎨 8 Visual Components

• Key Phrases - Short phrases highlighting core ideas
• Lower Thirds - Display guest name and title
• Chapter Titles - Topic transition title cards
• Term Cards - Professional terminology explanations
• Quote Callouts - Highlight memorable quotes
• Animated Stats - Dynamic number displays
• Bullet Points - Core takeaways summary
• Social Bars - Follow call-to-action

🎭 4 Visual Themes

• Notion 🟡 - Warm knowledge style
• Cyberpunk 💜 - Neon futuristic
• Apple ⚪ - Minimalist business
• Aurora 🌈 - Gradient flowing

🤖 Smart Workflow

1. 📝 AI analyzes subtitle content
2. 💡 Auto-generates effect suggestions
3. ✅ User approves configuration
4. 🎬 One-click video rendering

🛠️ Dual Rendering Engines

Engine	Tech Stack	Features
Browser 🌐	Playwright + HTML/CSS/Anime.js	High quality, complex animations (Recommended)
PIL 🎨	Python PIL	Pure Python, no browser required

---

🚀 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

Component	Preview	Use Case
🏷️ Key Phrase	[Preview placeholder]	When guest mentions "Artificial General Intelligence", show "AI Development is Smooth Curve"
👤 Lower Third	[Preview placeholder]	Show "Dario Amodei · CEO · Anthropic" at video start
📖 Term Card	[Preview placeholder]	Auto popup explanation when "Moore's Law" first mentioned
💬 Quote	[Preview placeholder]	Highlight "AI development is a very smooth exponential curve"

---

📋 Use Cases

🎓 Educational Content

• Knowledge sharing videos
• Course recordings
• Online lectures
• Heavy terminology needs

🎙️ Interviews & Podcasts

• Personal interviews
• Panel discussions
• Industry dialogues
• Guest info display needs

📱 Social Media

• YouTube long-form
• B站 content
• Podcast shows
• Highlight clips needed

---

🎨 Theme System

Choose the right theme based on content style:

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

Theme	Color Scheme	Characteristics	Best For
Notion	Warm Yellow + Blue	Soft gradients, knowledge-focused	Education, knowledge sharing, courses
Cyberpunk	Neon Purple + Cyan	High contrast, tech-forward	Tech, sci-fi, innovation topics
Apple	Black/White/Gray	Minimal, professional	Business, corporate, formal interviews
Aurora	Rainbow Gradient	Flowing light, artistic	Creative, design, artistic content

---

🧩 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

Component	Required	Optional	Notes
Lower Third	name, role, company, startMs	durationMs (default 5s)	Guest information
Chapter Title	number, title, startMs	subtitle, durationMs	Topic segmentation
Key Phrase	text, startMs, endMs	style, position	text must be phrase
Term Card	chinese, english, firstAppearanceMs	description, displayDurationSeconds	Terminology explanation
Quote	text, author, startMs	durationMs, position	Memorable quotes
Stats	number, label, startMs	prefix, unit, durationMs	Number display
Bullet Points	title, points, startMs	durationMs	List summary
Social Bar	platform, handle, startMs	label, durationMs	Follow CTA

⚠️ 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

Optimization Tips:

1. Use PIL renderer: -r pil (simpler but 2-3x faster)
2. Lower video resolution (1080p → 720p)
3. Process long videos in segments (5-10 min chunks)
4. Reduce component count (keep only essentials)

Solutions:

1. Close other applications to free memory
2. Process long videos in segments
3. Use lower resolution (720p or 480p)
4. Reduce number of simultaneous components
5. Use PIL renderer (smaller memory footprint)

Ensure Chinese fonts are installed:

# 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

1. Copy existing theme CSS file
2. Modify CSS variables
3. Specify new theme name in config

See ARCHITECTURE.md for details

---

🔧 Tech Stack

Layer	Technology	Description
Visual Rendering	HTML + CSS + Anime.js	Screenshot via Playwright browser
Video Compositing	MoviePy	Python video editing library
Animation Engine	Anime.js	Spring physics animations
Fallback Rendering	Python PIL	Pure Python image processing
Content Analysis	AI Analysis	Auto-identify key information

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