remotion-video-enhancer

Remotion Video Enhancement Tool

Task Objective

This Skill is used to: add Remotion-style transitions and animation effects to PPT content and videos
Capabilities include: advanced video transitions, Framer Motion interactive animations, animation sequence planning, multimedia enhancement
Trigger conditions: the user needs to enhance video transition effects, add interactive animations, or collaborate with other PPT Skills

Prerequisites

Dependency description: dependency packages required by the scripts
```
moviepy>=1.0.3
pillow>=9.0.0
```
System dependency: FFmpeg (required, used for video transition processing)
```
# Ubuntu/Debian
sudo apt-get install ffmpeg
```

macOS

brew install ffmpeg


## 操作步骤

### 标准流程（完整动画增强）

#### 步骤 1：接收输入数据
根据协同模式，接收不同输入：
- **来自 ppt-generator**：JSON 格式的 PPT 数据
- **来自 nanobanana-ppt-visualizer**：图片文件或 HTML 播放器
- **来自 ppt-roadshow-generator**：已合成的视频文件
- **用户直接提供**：图片序列、视频文件或 JSON 数据

#### 步骤 2：动画规划与配置
1. 分析输入内容，确定动画类型：
 - 视频转场增强（使用 FFmpeg）
 - HTML 交互式动画（使用 Framer Motion）
 - 混合模式（视频 + HTML）
2. 调用 `scripts/animation_planner.py`：
 ```bash
 python scripts/animation_planner.py \
   --input ./input_data \
   --style dynamic \
   --output ./animation_plan.json

Output animation configuration (animation_plan.json), including:
- Transition type for each page/clip
- Animation duration and easing curve
- Element entrance/exit effects
- Interactive trigger conditions

Step 3: Video transition enhancement (FFmpeg)

Call scripts/video_transitions.py：

python scripts/video_transitions.py \
  --input ./video.mp4 \
  --transitions ./animation_plan.json \
  --output ./enhanced_video.mp4

Supported transition types:
- Fade: classic fade-in and fade-out effect
- Slide: slide up, down, left, and right
- Zoom: push-pull camera effect
- Flip: 3D flip effect
- Rotate: rotational transition
- Blur: blur transition
- Dissolve: pixel dissolve effect
- Elastic: elastic animation
Each transition supports customization:
- Transition duration (default 1-2 seconds)
- Easing curve (linear, ease-in, ease-out, ease-in-out, bounce, elastic)
- Direction (up, down, left, right)

Step 4: HTML animation enhancement (Framer Motion)

Call scripts/html_animations.py：

python scripts/html_animations.py \
  --input ./ppt_data.json \
  --template enhanced_viewer.html \
  --output ./animated_viewer.html

Framer Motion animation effects:
- Page transitions: smooth page switching animations
- Element entrance: titles and content enter one by one
- Hover effects: feedback animation on mouse hover
- Click effects: ripple or scaling effect on click
- Scroll effects: parallax animation during scrolling
Interactive features:
- Keyboard navigation animation
- Touch gesture support
- Fullscreen transition animation
- Progress bar animation

Step 5: Output enhanced content

Video enhancement output:enhanced_video.mp4
HTML animation output:animated_viewer.html
Animation configuration:animation_plan.json

Collaboration with other Skills

Collaboration with ppt-generator Skill

用户请求："生成一个带高级转场的 PPT 视频"

┌─────────────────────────────────────────────────────────┐
│  ppt-generator Skill                                    │
├─────────────────────────────────────────────────────────┤
│  7 角色协作生成 JSON 数据                                │
│  输出：ppt_data.json                                    │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼ JSON 数据
┌─────────────────────────────────────────────────────────┐
│  remotion-video-enhancer Skill                         │
├─────────────────────────────────────────────────────────┤
│  1. 动画规划（animation_planner.py）                     │
│  2. HTML 动画增强（html_animations.py）                 │
│  3. 输出：animated_viewer.html                          │
└─────────────────────────────────────────────────────────┘

Collaboration with nanobanana-ppt-visualizer Skill

用户请求："为生成的播放器添加 Framer Motion 动画"

┌─────────────────────────────────────────────────────────┐
│  nanobanana-ppt-visualizer Skill                        │
├─────────────────────────────────────────────────────────┤
│  生成 HTML 播放器 + 图片                                  │
│  输出：viewer.html, slide-*.png                          │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼ HTML 文件
┌─────────────────────────────────────────────────────────┐
│  remotion-video-enhancer Skill                         │
├─────────────────────────────────────────────────────────┤
│  1. 使用 Framer Motion 增强 viewer.html                 │
│  2. 添加页面过渡、元素入场、交互效果                      │
│  3. 输出：animated_viewer.html                           │
└─────────────────────────────────────────────────────────┘

Collaboration with ppt-roadshow-generator Skill

用户请求："为路演视频添加高级转场效果"

┌─────────────────────────────────────────────────────────┐
│  ppt-roadshow-generator Skill                           │
├─────────────────────────────────────────────────────────┤
│  10 角色协作生成路演视频                                  │
│  输出：roadshow_video.mp4                                │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼ 视频文件
┌─────────────────────────────────────────────────────────┐
│  remotion-video-enhancer Skill                         │
├─────────────────────────────────────────────────────────┤
│  1. 动画规划（animation_planner.py）                     │
│  2. 视频转场增强（video_transitions.py）                 │
│  3. 应用 Remotion 风格转场                              │
│  4. 输出：enhanced_roadshow_video.mp4                   │
└─────────────────────────────────────────────────────────┘

Standalone usage mode

Mode A: Generate animation configuration only

python scripts/animation_planner.py \
  --input ./ppt_data.json \
  --style dynamic \
  --output ./animation_plan.json

Applicable to: Users who want to manually adjust animation parameters
Output: animation_plan.json

Mode B: Enhance video transitions only

python scripts/video_transitions.py \
  --input ./video.mp4 \
  --transitions ./animation_plan.json \
  --output ./enhanced_video.mp4

Applicable to: Existing videos that need enhanced transition effects
Output: enhanced_video.mp4

Mode C: Generate HTML animations only

python scripts/html_animations.py \
  --input ./ppt_data.json \
  --template enhanced_viewer.html \
  --output ./animated_viewer.html

Applicable to: Need an interactive animation player
Output: animated_viewer.html

Optional branches

Quick mode: Use the default animation configuration, skip animation planning
Custom mode: The user provides a custom animation configuration JSON
Batch processing: Process multiple videos or PPTs at once
Template mode: Use preset animation templates (see assets/animations/)

Resource index

Animation planning script: see scripts/animation_planner.py(Purpose: generate animation configuration)
Video transition script: see scripts/video_transitions.py(Purpose: FFmpeg video transitions)
HTML animation script: see scripts/html_animations.py(Purpose: Framer Motion animations)
Transition effects guide: see references/transition_guide.md(Purpose: detailed explanation of transition effects)
Animation templates: see assets/animations/(Optional: preset animation configurations)
HTML template: see assets/templates/enhanced_viewer.html(Framer Motion player)
Collaboration guide: see references/collaboration_guide.md(Collaborate with other Skills)

Notes

This Skill does not depend on any third-party AI API; all animations are implemented using FFmpeg and Framer Motion
Video transitions use FFmpeg; make sure it is installed
HTML animations use the Framer Motion CDN; no installation required
The animation configuration JSON format must comply with the specification (see references/transition_guide.md)
When collaborating with other Skills, make sure the input format is correct
Batch processing is supported, but it is recommended that a single video not exceed 100 pages
Framer Motion animations are only supported in modern browsers

Usage examples

Example 1: Collaborate with ppt-generator to generate an animation player

Function description: ppt-generator generates the content, remotion-video-enhancer adds animations
Execution method: ppt-generator → remotion-video-enhancer (Framer Motion)
User instruction: "Generate a product introduction PPT, using Framer Motion animations"
Output: animated_viewer.html

Example 2: Add advanced transitions to a roadshow video

Function description: Enhance the transition effects of an existing video
Execution method: ppt-roadshow-generator → remotion-video-enhancer (FFmpeg transitions)
User instruction: "Add Remotion-style transitions to the roadshow video"
Output: enhanced_roadshow_video.mp4

Example 3: Custom animation configuration

Function description: The user manually specifies the animation type and parameters
Execution method: The user provides animation_plan.json → video transitions

Configuration example:

{
  "transitions": [
    {"type": "slide", "direction": "right", "duration": 1.5},
    {"type": "zoom", "scale": 1.2, "duration": 1.0}
  ]
}

Output: A video enhanced according to the custom configuration

Example 4: Batch process multiple videos

Function description: Enhance multiple videos at once
Execution method: Script batch processing

Command:

python scripts/video_transitions.py \
  --input-dir ./videos/ \
  --transitions ./animation_plan.json \
  --output-dir ./enhanced_videos/

Output: Batch enhanced video files

About this skill

Task Objective

Prerequisites

Step 3: Video transition enhancement (FFmpeg)

Step 4: HTML animation enhancement (Framer Motion)

Step 5: Output enhanced content

Collaboration with other Skills

Collaboration with ppt-generator Skill

Collaboration with nanobanana-ppt-visualizer Skill

Collaboration with ppt-roadshow-generator Skill

Standalone usage mode

Mode A: Generate animation configuration only

Mode B: Enhance video transitions only

Mode C: Generate HTML animations only

Optional branches

Resource index

Notes

Usage examples

Example 1: Collaborate with ppt-generator to generate an animation player

Example 2: Add advanced transitions to a roadshow video

Example 3: Custom animation configuration

Example 4: Batch process multiple videos