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
|
|
| Engine | Tech Stack | Features |
|---|---|---|
| Browser 🌐 | Playwright + HTML/CSS/Anime.js | High quality, complex animations (Recommended) |
| PIL 🎨 | Python PIL | Pure Python, no browser required |
Method 1: One-Click Install (Recommended)
npx skills add https://github.com/op7418/Video-Wrapper-SkillsMethod 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 chromiumIn Claude Code
/video-wrapper interview.mp4 subtitles.srtClaude will:
- 📊 Analyze subtitles, identify key information
- 💡 Generate effect suggestions (lower thirds, key phrases, term cards, etc.)
- 📝 Present suggestions in Markdown for review
- ✅ 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💡 Visual effects showcase across different themes and components
| Notion Theme Warm Knowledge |
Cyberpunk Theme Neon Futuristic |
Apple Theme Minimalist Elegant |
Aurora Theme Gradient Flow |
| 🟡 Education/Knowledge | 💜 Tech/Innovation | ⚪ Business/Professional | 🌈 Creative/Artistic |
| 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" |
|
|
|
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 |
Expand to view full JSON config
{
"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 | 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.
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
Q: Playwright installation failed?
# 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 --versionQ: Processing too slow?
Optimization Tips:
- Use PIL renderer:
-r pil(simpler but 2-3x faster) - Lower video resolution (1080p → 720p)
- Process long videos in segments (5-10 min chunks)
- Reduce component count (keep only essentials)
Q: Out of memory?
Solutions:
- Close other applications to free memory
- Process long videos in segments
- Use lower resolution (720p or 480p)
- Reduce number of simultaneous components
- Use PIL renderer (smaller memory footprint)
Q: Font display issues?
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=zhQ: How to customize themes?
- Copy existing theme CSS file
- Modify CSS variables
- Specify new theme name in config
See ARCHITECTURE.md for details
| 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
Issues and Pull Requests are welcome!
Before submitting a PR, please ensure:
- ✅ Code style follows project conventions
- ✅ Added necessary tests
- ✅ Updated relevant documentation
Powered by Claude
If you find this useful, please give it a ⭐️ Star!