Skip to content
cccskills
FreePublished on GitHub

remotion-video-enhancer

Add animated transitions to presentation videos and interactive effects to HTML slideshows. Plan the sequence and timing of movement, apply effects such as fades or zooms, and produce an enhanced video or browser player.

OriginalShow the original description

影片与视频编辑及自媒体创作者在制作PPT或视频需要提升视觉表现力时,使用此技能可一键生成Remotion风格的高级转场与Framer Motion交互动画,自动规划动画序列,让内容呈现专业级动态效果。

See how to install

Good for

  • Adding transitions to an existing presentation video
  • Animating text and page changes in an HTML slideshow
  • Adjusting animation timing and direction
  • Applying the same animation settings to multiple videos

Files included (11)

  • SKILL.md12.5 KB
  • assets/animations/cinematic.json1.4 KB
  • assets/animations/dynamic.json1.6 KB
  • assets/animations/minimal.json1.5 KB
  • assets/animations/playful.json1.5 KB
  • assets/templates/enhanced_viewer.html8.3 KB
  • references/collaboration_guide.md15.3 KB
  • references/transition_guide.md10.3 KB
  • scripts/animation_planner.py11.5 KB
  • scripts/html_animations.py10.6 KB
  • scripts/video_transitions.py13.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Remotion 视频增强工具

任务目标

  • 本 Skill 用于:为 PPT 内容和视频添加 Remotion 风格的转场和动画效果
  • 能力包含:高级视频转场、Framer Motion 交互式动画、动画序列规划、多媒体增强
  • 触发条件:用户需要增强视频转场效果、添加交互式动画、或与其他 PPT Skill 协同

前置准备

  • 依赖说明:scripts 脚本所需的依赖包
    moviepy>=1.0.3
    pillow>=9.0.0
    
  • 系统依赖:FFmpeg(必需,用于视频转场处理)
    # 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:
    python scripts/animation_planner.py \
      --input ./input_data \
      --style dynamic \
      --output ./animation_plan.json
    
  3. 输出动画配置(animation_plan.json),包含:
    • 每个页面/片段的转场类型
    • 动画时长和缓动曲线
    • 元素入场/出场效果
    • 交互式触发条件

步骤 3:视频转场增强(FFmpeg)

  1. 调用 scripts/video_transitions.py:
    python scripts/video_transitions.py \
      --input ./video.mp4 \
      --transitions ./animation_plan.json \
      --output ./enhanced_video.mp4
    
  2. 支持的转场类型:
    • 淡入淡出 (Fade):经典淡入淡出效果
    • 滑动 (Slide):上下左右滑动
    • 缩放 (Zoom):推拉镜头效果
    • 翻转 (Flip):3D 翻转效果
    • 旋转 (Rotate):旋转过渡
    • 模糊 (Blur):模糊过渡
    • 溶解 (Dissolve):像素溶解效果
    • 弹性 (Elastic):弹性动画
  3. 每种转场支持自定义:
    • 转场时长(默认 1-2 秒)
    • 缓动曲线(linear, ease-in, ease-out, ease-in-out, bounce, elastic)
    • 方向(上下左右)

步骤 4:HTML 动画增强(Framer Motion)

  1. 调用 scripts/html_animations.py:
    python scripts/html_animations.py \
      --input ./ppt_data.json \
      --template enhanced_viewer.html \
      --output ./animated_viewer.html
    
  2. Framer Motion 动画效果:
    • 页面过渡:流畅的页面切换动画
    • 元素入场:标题、内容逐个进场
    • 悬停效果:鼠标悬停时的反馈动画
    • 点击效果:点击时的涟漪或缩放效果
    • 滚动效果:滚动时的视差动画
  3. 交互式特性:
    • 键盘导航动画
    • 触摸手势支持
    • 全屏过渡动画
    • 进度条动画

步骤 5:输出增强内容

  1. 视频增强输出:enhanced_video.mp4
  2. HTML 动画输出:animated_viewer.html
  3. 动画配置:animation_plan.json

与其他 Skill 协同

与 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                          │
└─────────────────────────────────────────────────────────┘

与 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                           │
└─────────────────────────────────────────────────────────┘

与 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                   │
└─────────────────────────────────────────────────────────┘

独立使用模式

模式 A:仅生成动画配置

python scripts/animation_planner.py \
  --input ./ppt_data.json \
  --style dynamic \
  --output ./animation_plan.json
  • 适用于:用户希望手动调整动画参数
  • 输出:animation_plan.json

模式 B:仅增强视频转场

python scripts/video_transitions.py \
  --input ./video.mp4 \
  --transitions ./animation_plan.json \
  --output ./enhanced_video.mp4
  • 适用于:已有视频,需要增强转场效果
  • 输出:enhanced_video.mp4

模式 C:仅生成 HTML 动画

python scripts/html_animations.py \
  --input ./ppt_data.json \
  --template enhanced_viewer.html \
  --output ./animated_viewer.html
  • 适用于:需要交互式动画播放器
  • 输出:animated_viewer.html

可选分支

  • 快速模式:使用默认动画配置,跳过动画规划
  • 自定义模式:用户提供自定义动画配置 JSON
  • 批量处理:一次性处理多个视频或 PPT
  • 模板模式:使用预设动画模板(见 assets/animations/)

资源索引

注意事项

  • 本 Skill 不依赖任何第三方 AI API,所有动画使用 FFmpeg 和 Framer Motion 实现
  • 视频转场使用 FFmpeg,确保已安装
  • HTML 动画使用 Framer Motion CDN,无需安装
  • 动画配置 JSON 格式必须符合规范(见 references/transition_guide.md)
  • 与其他 Skill 协同时,确保输入格式正确
  • 支持批量处理,但建议单个视频不超过 100 页
  • Framer Motion 动画仅在现代浏览器中支持

使用示例

示例 1:与 ppt-generator 协同生成动画播放器

  • 功能说明:ppt-generator 生成内容,remotion-video-enhancer 添加动画
  • 执行方式:ppt-generator → remotion-video-enhancer(Framer Motion)
  • 用户指令:"生成一个产品介绍 PPT,使用 Framer Motion 动画"
  • 输出:animated_viewer.html

示例 2:为路演视频添加高级转场

  • 功能说明:增强现有视频的转场效果
  • 执行方式:ppt-roadshow-generator → remotion-video-enhancer(FFmpeg 转场)
  • 用户指令:"为路演视频添加 Remotion 风格的转场"
  • 输出:enhanced_roadshow_video.mp4

示例 3:自定义动画配置

  • 功能说明:用户手动指定动画类型和参数
  • 执行方式:用户提供 animation_plan.json → 视频转场
  • 配置示例:
    {
      "transitions": [
        {"type": "slide", "direction": "right", "duration": 1.5},
        {"type": "zoom", "scale": 1.2, "duration": 1.0}
      ]
    }
    
  • 输出:按自定义配置增强的视频

示例 4:批量处理多个视频

  • 功能说明:一次性增强多个视频
  • 执行方式:脚本批量处理
  • 命令:
    python scripts/video_transitions.py \
      --input-dir ./videos/ \
      --transitions ./animation_plan.json \
      --output-dir ./enhanced_videos/
    
  • 输出:批量增强的视频文件

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agent-team

FreeSummary

Organize AI agents into execution, management, and review roles for complex projects. Choose preset or custom teams, share project context and decisions, and combine their discussions and work into meeting records, feasibility reports, or implementation outputs.

  • Reviewing a technical architecture from several perspectives
  • Discussing product pricing across market and cost considerations
  • Assessing a new product's feasibility
anbeime/skill8.3KUpdated Oct 18, 2026

Generate character images, backgrounds, synthetic speech, and music for product videos featuring 小省导购员, a digital shopping presenter. Coordinate these assets with InfiniteTalk to produce a 25-second vertical video made from five scenes.

  • Producing a 25-second vertical product presentation video
  • Generating reference images for the 小省导购员 character
  • Creating business setting backgrounds for a video
anbeime/skill8.3KUpdated Oct 18, 2026

Convert PDF, Word, and Excel documents into structured Markdown for search and knowledge bases. The skill tries three parsers in sequence when needed and returns metadata, a confidence score, and the parser used.

  • Prepare documents for retrieval-augmented generation
  • Structure documents for an internal knowledge base
  • Extract structured text from contracts
anbeime/skill8.3KUpdated Oct 18, 2026

Organize parsed documents into four color-coded cards covering facts, explanations, risks, and actions. Preserve source references and generation details so readers can review evidence, identify uncertainty, and consider next steps in research, financial, or legal analysis.

  • Separating facts from interpretations in financial reports
  • Organizing evidence and risks in legal documents
  • Turning research documents into evidence-linked analysis cards
anbeime/skill8.3KUpdated Oct 18, 2026

Record operations across multiple AI agents and connect events into a traceable history. Search records by tracking ID, time window, or responsible component to support audits and investigations, with local storage available when the vector database fails.

  • Trace task dispatch and execution across agents
  • Search audit records by time or responsible component
  • Keep recording events during vector database failures
anbeime/skill8.3KUpdated Oct 18, 2026

Screen documents and external URLs before they enter a processing workflow. Check blocked domains and document permissions, then produce a pass or reject decision, a risk report, and a tracking ID for later review.

  • Screening documents before adding them to a knowledge base
  • Checking external URLs against a domain blocklist
  • Reviewing document permissions before processing
anbeime/skill8.3KUpdated Oct 18, 2026

See all skills by anbeime

Report a problem with this skill