A video effects processing tool based on Python + Playwright + MoviePy, using HTML/CSS/Anime.js to render high-quality visual effects.
Workflow
Step 1: Analyze Subtitle Content
When the user provides a video and subtitle file, first analyze the subtitle content and generate effect suggestions:
- Read the subtitle file (.srt)
- Analyze the content and identify:
- Guest information (for lower thirds)
- Topic transition points (for chapter titles)
- Keywords and terms (for fancy text)
- Technical terms (for term cards)
- Highlight viewpoints (for quote callouts)
- Numerical data (for animated stats)
- Key points (for bullet points)
- Generate a suggestion list and present it to the user for review
Step 2: User Review
Present the suggestions to the user in Markdown format:
## 视觉特效建议
**主题**: notion
### 1. 人物条 (Lower Third)
- **姓名**: Dario Amodei
- **职位**: CEO
- **公司**: Anthropic
- **出现时间**: 1000ms
### 2. 花字高亮 (Fancy Text)
1. **通用人工智能** (emphasis)
时间: 2630ms - 5500ms
原因: 核心概念首次提及
...
The user can:
- Confirm all suggestions
- Modify some suggestions
- Delete unwanted components
- Add new components
Step 3: Generate Configuration and Render
Generate config.json based on the user-approved suggestions, then render the video.
Available Components
| Component | Purpose | Configuration Fields |
|---|---|---|
| Lower Third (lower_third) | Display guest information | name, role, company, startMs, durationMs |
| Chapter Title (chapter_title) | Topic transition title | number, title, subtitle, startMs, durationMs |
| Fancy Text (fancy_text) | Summarize the current viewpoint | text, style, startMs, endMs, position |
| Term Card (term_card) | Explain terminology | chinese, english, description, firstAppearanceMs |
| Quote Callout (quote_callout) | Highlight brilliant viewpoints | text, author, startMs, durationMs, position |
| Animated Stats (animated_stats) | Display numbers | prefix, number, unit, label, startMs |
| Bullet Points (bullet_points) | Summarize key points | title, points[], startMs, durationMs |
| Social Bar (social_bar) | Follow prompt | platform, label, handle, startMs, durationMs |
Fancy Text Usage Guidelines
⚠️ Important: Fancy text must follow these guidelines:
-
Must be a phrase: Use a short sentence to summarize the speaker's viewpoint at that moment
- ✅ Correct: "AI development is a smooth curve" "Intelligence growth resembles Moore's Law"
- ❌ Incorrect: "Artificial Intelligence" "Moore's Law" (these are words and should use term cards)
-
Complementary to term cards：
- Fancy text: summarize the viewpoint (e.g., "Intelligence doubles every year")
- Term card: explain terminology (e.g., "Moore's Law: The number of transistors on integrated circuits doubles every 18-24 months")
-
Positioned above: By default displayed in the upper area of the screen (above the subtitles) to avoid blocking faces
Social Bar Usage Guidelines
- Default display duration: 8 seconds (longer than other components, giving users enough time to remember)
- Usually appears at the end of the video
- Supported platforms: twitter, weibo, youtube
Theme System
Supports 4 visual themes:
| Theme | Style | Use Case |
|---|---|---|
notion |
Warm Knowledge Style | Education, knowledge sharing |
cyberpunk |
Neon Futuristic | Technology, cutting-edge topics |
apple |
Minimalist Elegance | Business, professional interviews |
aurora |
Gradient Flowing Light | Creative, artistic content |
Configuration File Format
{
"theme": "notion",
"lowerThirds": [
{
"name": "Dario Amodei",
"role": "CEO",
"company": "Anthropic",
"startMs": 1000,
"durationMs": 5000
}
],
"chapterTitles": [
{
"number": "Part 1",
"title": "指数增长的本质",
"subtitle": "The Nature of Exponential Growth",
"startMs": 0,
"durationMs": 4000
}
],
"keyPhrases": [
{
"text": "通用人工智能",
"style": "emphasis",
"startMs": 2630,
"endMs": 5500
}
],
"termDefinitions": [
{
"chinese": "摩尔定律",
"english": "Moore's Law",
"description": "集成电路晶体管数量每18-24个月翻一番",
"firstAppearanceMs": 37550,
"displayDurationSeconds": 6
}
],
"quotes": [
{
"text": "AI 的发展是一个非常平滑的指数曲线",
"author": "— Dario Amodei",
"startMs": 30000,
"durationMs": 5000
}
],
"stats": [
{
"prefix": "增长率 ",
"number": 240,
"unit": "%",
"label": "计算能力年增长",
"startMs": 45000,
"durationMs": 4000
}
],
"bulletPoints": [
{
"title": "核心观点",
"points": [
"AI 发展是平滑的指数曲线",
"类似摩尔定律的智能增长",
"没有突然的奇点时刻"
],
"startMs": 50000,
"durationMs": 6000
}
]
}
Dependency Installation
# 进入虚拟环境
cd ~/.claude/skills/video-wrapper
source venv/bin/activate
# 安装依赖
pip install -r requirements.txt
# 安装 Playwright 浏览器
playwright install chromium
Command-Line Usage
# 使用浏览器渲染器（推荐）
python src/video_processor.py video.mp4 subs.srt config.json output.mp4
# 指定渲染器
python src/video_processor.py video.mp4 subs.srt config.json -r browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil
Technical Implementation
- Visual Rendering: HTML + CSS + Anime.js (screenshots via Playwright)
- Video Compositing: MoviePy
- Animation Engine: Anime.js (Spring physics animation)
- Fallback Rendering: Python PIL
File Structure
~/.claude/skills/video-wrapper/
├── src/
│ ├── video_processor.py # 主处理脚本
│ ├── browser_renderer.py # Playwright 渲染器
│ ├── content_analyzer.py # 内容分析器
│ ├── fancy_text.py # PIL 花字（备用）
│ └── term_card.py # PIL 卡片（备用）
├── templates/
│ ├── fancy-text.html # 花字模板
│ ├── term-card.html # 名词卡片模板
│ ├── lower-third.html # 人物条模板
│ ├── chapter-title.html # 章节标题模板
│ ├── quote-callout.html # 金句卡片模板
│ ├── animated-stats.html # 数据动画模板
│ └── bullet-points.html # 要点列表模板
├── static/
│ ├── css/
│ │ ├── effects.css # 基础效果
│ │ ├── theme-notion.css # Notion 主题
│ │ ├── theme-cyberpunk.css
│ │ ├── theme-apple.css
│ │ └── theme-aurora.css
│ └── js/
│ └── anime.min.js # Anime.js
└── requirements.txt
Notes
- Video processing takes a relatively long time, please be patient
- Make sure there is enough disk space to store the output video
- Playwright rendering works better, but requires installing Chromium
- If Playwright is unavailable, it will automatically fall back to PIL rendering