mcpField
R
remotion-image-video-masking

remotion-image-video-masking

github.com/composio-community创意与媒体1450 次安装23 周前更新
代码仓库

关于 remotion-image-video-masking

面向 Claude 的 Remotion 技能，用于制作文字、图像和视频相互遮挡的分层动画。它以逐帧动画和图层规划构建景深、遮罩效果与电影感转场。

主要功能

  1. 01图像与视频遮罩
  2. 02分层文字遮挡效果
  3. 03逐帧动画与景深模拟
  4. 04同步场景节奏并检查渲染

适用场景

  1. 01制作产品素材与动态文字交错的发布视频
  2. 02为社交媒体内容设计分层动效
  3. 03构建电影感转场和景深场景

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/composio-community/opencode-skills --skill remotion-image-video-masking

安装后在 Claude Code 中输入/remotion-image-video-masking确认已加载。

详细介绍

Remotion 图像与视频遮罩

概述

这项技能可让 Claude 在 Remotion 中通过基于合成的遮罩技术，创建高级遮罩和分层效果，使文本、图像和视频能够动态交互。

工作流重点包括：

  • 图像遮罩
  • 视频遮罩
  • 分层合成
  • 文本遮挡效果
  • 深度模拟
  • 电影感转场
  • 基于帧的遮罩动画

目标是创建视觉上引人入胜的场景，让元素呈现自然的层叠效果，例如文本移到前景物体后方，或视频通过动画遮罩无缝融合。

设置

开始前：

  1. 安装 Node.js： https://nodejs.org

  2. 验证安装：

node -v
npm -v
  1. 创建 Remotion 项目：
npm init video
  1. 启动开发服务器：
npm run dev
  1. 在 VS Code 中打开项目。

推荐工具：

  • VS Code
  • Remotion Preview
  • React 知识
  • 图像编辑软件（可选）
  • 带透明度的 PNG 素材

推荐扩展：

  • ES7 React snippets
  • Prettier

所需输入

  • 前景图像或视频
  • 背景素材
  • 文字叠加层
  • 视频片段
  • 动画时间信息

可选：

  • 透明 PNG 素材
  • Alpha 遮罩
  • 品牌素材
  • 动效参考

何时使用这项技能

在以下情况下使用这项技能：

  • 创建电影感动态图形
  • 制作初创公司发布视频
  • 设计分层文本动画
  • 模拟场景深度
  • 创建具有高级质感的转场
  • 开发社交媒体动态内容
  • 制作视觉效果丰富的合成画面

何时不使用

以下情况请勿使用这项技能：

  • 静态平面设计
  • 简单字幕叠加
  • 非动画合成
  • 基础幻灯片工作流
  • 没有分层视觉交互的项目

示例用例

制作一段初创公司发布视频，让动画文本移到产品截图和视频图层后方。

Claude 应：

  1. 分离前景层和背景层
  2. 将带遮罩的图像素材放置在文本上方
  3. 逐帧制作文本动画
  4. 保持清晰的深度错觉
  5. 让遮罩效果与场景时间同步
  6. 确保渲染效果稳定流畅

最终效果应：

  • 具有电影感
  • 营造逼真的深度
  • 保持运动流畅
  • 保证可读性
  • 在各帧之间保持一致的渲染效果

遮罩核心原则

1. 图层顺序决定深度

Remotion 中的遮罩效果很大程度上取决于视觉图层的顺序。

前景层应：

  • 位于文本上方
  • 保持遮挡错觉
  • 营造深度层次

典型结构：

Background
↓
Animated Text
↓
Foreground Image/Video

正确的图层顺序可营造：

  • 电影感深度
  • 逼真的遮挡效果
  • 更鲜明的视觉层次

2. 尽可能使用透明素材

带透明度的 PNG 素材能提升遮罩的灵活性。

适用场景：

  • 产品抠图
  • 角色渲染图
  • 前景物体
  • 独立的 UI 元素

透明素材能让以下操作更简单：

  • 局部隐藏文本
  • 模拟深度
  • 创建平滑转场

3. 所有动画都按帧制作

所有遮罩运动都应基于：

  • useCurrentFrame()
  • 插值
  • 弹簧系统

避免使用：

  • CSS 过渡
  • 浏览器动画系统
  • 不受控制的运动

推荐 API：

  • useCurrentFrame()
  • spring()
  • interpolate()

4. 保持布局稳定

如果动画过程中尺寸发生变化，遮罩效果往往会导致布局不稳定。

Claude 应主动避免：

  • 文本跳动
  • 元素缩放
  • 图层位置不稳定
  • 裁切瑕疵

推荐策略：

  • 固定容器
  • 稳定定位
  • 受控变换
  • 独立的动画图层

5. 利用运动增强深度

运动应强化分层效果。

示例：

  • 前景移动速度慢于背景
  • 文本滑到物体下方
  • 遮罩元素逐渐显现
  • 分层视差效果

良好的动效设计能提升：

  • 视觉清晰度
  • 电影感
  • 场景吸引力

工作流

1. 规划场景景深

首先确定：

  • 前景元素
  • 背景层
  • 动画文本区域
  • 遮罩交互

定义：

  • 哪些对象应遮挡文本
  • 景深过渡发生的位置
  • 动效如何辅助分层

2. 组织合成结构

清晰地分离各层：

结构示例：

components/
  Background.tsx
  Foreground.tsx
  AnimatedText.tsx

优点：

  • 更易调试
  • 遮罩逻辑可复用
  • 动画结构更清晰

3. 创建前景遮罩

使用：

  • 透明 PNG
  • 裁剪后的视频层
  • 分离出的前景元素

将前景层放置在动画文本上方。

这样可以实现：

  • 文本隐藏效果
  • 景深模拟
  • 电影感分层

4. 为文本和图层添加动画

使用：

  • useCurrentFrame()
  • spring()
  • 插值

动画目标示例：

  • 文本滑到物体后方
  • 分层显现
  • 电影感转场
  • 增强景深的动效

推荐的动效风格：

  • 流畅
  • 克制
  • 确定性

避免：

  • 突然跳变
  • 不受控的缓动
  • 依赖浏览器的转场

5. 同步场景时序

确保：

  • 遮罩与动效对齐
  • 转场保持清晰易读
  • 视觉层级清晰

字幕时序与遮罩时序应逐帧保持同步。

6. 验证渲染质量

导出前，验证：

  • 遮罩对齐
  • 图层顺序
  • 文本可读性
  • 动效流畅度
  • 布局稳定性

逐帧检查：

  • 裁切问题
  • 位置不稳定
  • 视觉瑕疵

7. 渲染最终视频

渲染输出：

npm run build

或：

npx remotion render

推荐导出格式：

  • MP4
  • 遮罩较多的场景使用高比特率

输出要求

最终输出应包含：

  • 电影感遮罩效果
  • 流畅的分层动效
  • 稳定的构图
  • 逼真的景深模拟
  • 可用于生产的渲染视频

工作流本身应保持：

  • 可复用
  • 模块化
  • 渲染安全
  • 易于维护

执行策略（适用于 AI Agent）

Agent 应：

  1. 围绕视觉景深组织场景
  2. 保持清晰的图层层级
  3. 使用遮罩增强叙事效果
  4. 逐帧为所有动效添加动画
  5. 在转场期间保持布局稳定
  6. 导出前验证渲染一致性

工作流应针对以下方面进行优化：

  • 电影感
  • 视觉清晰度
  • 动效流畅度
  • 渲染一致性
  • 场景可读性

最佳实践

  • 保持前景层干净且彼此分离
  • 尽可能使用透明素材
  • 避免杂乱的遮罩构图
  • 逐帧验证场景
  • 保持动效流畅且有意图
  • 遮罩期间保持内容可读
  • 复用分层动画模式

备注

  • 图层顺序对逼真的遮罩效果至关重要
  • 透明素材能显著提高灵活性
  • 稳定的布局有助于提升电影感
  • 微妙的遮罩效果通常比强烈的效果更好
  • 动效设计会显著影响景深感知

评论

支持 Markdown