Communitygithub.com

WEBGRS/reframe

将横屏素材重构为竖屏 (9:16)、方形或 4:5 影片——每一帧都裁切到画面核心(说话者、运动物体、镜头主题),裁剪框跟随穿越画面的主体,且素材无需重新编码。

reframe 是什么?

此技能(SKILL)用于将横屏视频素材智能裁切为竖屏(9:16)、方形或 4:5 等竖版格式,确保每一帧的画面都聚焦于最核心的内容(如说话者、运动物体或故事主题),而非无关背景或半张脸。其核心机制是先对每段镜头进行运动、细节、色彩对比和肤色检测(每秒10次,排除摄像机自身运动),生成一个固定窗口、分割窗口(多个位置不同的片段)或原始比例方案,并输出带 CSS 裁剪(`object-fit: cover` + `object-position` 或 `translate` 位移)的 `<video>` 标签,避免重新编码。该技能支持 Cursor、Claude Code 等 AI 编码助手,通过 Node.js 脚本 `reframe.mjs` 执行,生成裁剪预览图、CSS 关键帧动画(用于平滑跟随)、以及检查页面,同时提供自动校验工具 `reframe.mjs check` 以确保输出符合“静物固定窗口、主体完整、运动平滑跟随”等规则。最终输出为可直接嵌入 film.html 的 HTML+CSS 代码,无需修改原始视频文件。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/WEBGRS/openfilm-reframe/tree/HEAD/skills/reframe

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

重构横屏为竖屏

将他人的横屏素材制成一部看起来就像是专为竖屏或方形画幅拍摄的影片:每一刻观众看到的都是镜头的主题,而非旁边的墙壁,也不是半张脸。

核心理念

每个镜头都根据自身内容来构图。全片统一使用一个中心裁切不是本技能所为(无论它看起来多整齐),将整个横屏画面缩小并置于模糊黑条之间也同样不是。

必须满足的条件

  • 先测量,再用眼睛看。 每个裁剪窗口都来自测量结果,以及您自己对画面图像的审视。测量可能出错;最终由画面决定。
  • 主体保持完整。 面部、说话者、运动物体以及重要的文字信息都应保持在画面内,并留有适当空间。当两样重要内容无法同时容纳时,画面对准该时刻的主题(谁在说话、什么在运动、旁白在描述什么),观众会感知到被裁掉的内容。
  • 平稳的构图。 静止的主体在整个镜头中只有一个固定的窗口。窗口只在主体移动时才移动:在上一次移动至少一秒后进行一次硬性重定位,或进行平滑跟随;绝不允许漂移或抖动式的裁切。
  • 保持原始素材原样。 使用 #t= 对同一文件进行裁剪,并通过片段自身的 CSS 进行裁切(object-fit: cover 搭配 object-position,或通过 translate 移动画幅的盒子);不重新编码,不裁切成新文件,不改变速度。同一镜头的片段在帧与帧之间无缝衔接,因此镜头的音频持续播放不中断。

您将获得什么

node <此技能文件夹>/scripts/reframe.mjs <video> --aspect 9:16 --src assets/<file>(在影片所在文件夹中运行)会生成 reframe/<名称>.json、一个审查页面以及 reframe/<名称>-sheet.jpg。它会找出镜头,每秒十次权衡运动(排除摄像机自身运动)、细节、色彩对比度和肤色,并为每个镜头分配一个 fixed 窗口(一个片段)、一个 split 窗口(同一文件的多个片段,每个至少一秒,各有自己的位置)或 whole 窗口(素材原始比例),并准备好带有各自源时间戳的 <video> 行。

仔细阅读它打印的每一张预览图(look: … (Read it))。 每张图片对应一个时刻(每个片段的开始、其最弱时刻标记为 WEAST,每 1.5 秒一个):画面中裁剪框被描出且外部区域变暗、画面比例标尺(以画面百分比为单位)、以及影片实际显示的裁切结果。当主体位于窗口外或被窗口切割时,请自行设置 object-position;输出会给出计算公式。held 表示窗口与测量结果一致的频率,并非主体在其中的证明。标记为 ! 的行表示需要重点检查的位置。

平滑跟随(--follow):@keyframes follow-N 使用 translate 定义分裂镜头的路径,以及承载这些关键帧的单个 <video> 片段,同样位于 reframe/<名称>-follow.css 中。将关键帧放入 film.html 的 <style> 中。动画从片段的 at 时刻开始运行:一个被裁剪为从镜头开始后 a 秒开始的片段,其 animation-delay: -a s。该片段保留自己的音频。

修剪一个镜头 仅保留位于新 #t= 范围内的片段,外部的两个片段被裁剪到该范围,位置保持不变。

影片的检查方式: 在影片文件夹中运行 node <此技能文件夹>/scripts/reframe.mjs check,读取 film.html 中的自身裁剪信息,打印每个窗口、其移动时长、每次重定位、窗口保留测量结果最少部分的时刻,并将它们绘制在预览图中。它会用 ! 标记违反上述规则的部分。修复每一个 ! 标记的问题并再次运行。

影片的形状由其视口定义(<meta name="viewport" content="width=1080, height=1920">)。运行 npx openfilm look 查看裁剪后的影片。

与客户协作

以客户的要求为优先:画幅比例(当客户说竖屏时即为 9:16)、必须包含的镜头、任何必须保留在画面内的元素(产品、logo、第二位说话者)。在不耽误工作的前提下询问清楚。完成后,按镜头依次告知:held 值、每一个 ! 行、每个你移动窗口的原因,以及裁切所遗漏的内容。

相关技能