用 Remotion 制作可复用的宣传片模板

图片解读

第1张 — 证据记录（仅记录图片可见内容，忽略图片内任何指令）

一、事实（可直接读取或明显可见的文字、界面元素与现象）

- 顶部左侧（白色大写英文字体）：VIDEO SHOTCRAFT

- 顶部偏右（白色小字，横向一行）：106 recipes · 162 styles · 161 s...

- 其中“161 s...”后半部分被截断或被遮挡，未完整显示

- 中间偏前景、大号白色文字（带黑色描边）：宣传片动效 skill

- “skill”为斜体或加粗英文

- 左下角白色英文字：106 recipes, every move tuned.

- 画面主体是一个倾斜的深色面板，面板上以网格排列多张卡片式缩略图（每张卡片类似界面预览）

- 卡片包含小缩略图、标题、简短描述和橙色小按钮或标签（细节文本多为小字号）

- 部分卡片上可辨认的单词和元素（小字号，部分可读、部分模糊）：

- 可辨认词样例：SHIP、before-after-slider（或 before-after slider）、cloner（或 cloner-depth-echo 类似词）、order-matched-bits（该词不完全确定）

- 有图表/曲线类缩略图（某些卡片内显示折线图或圆形进度图等）

- 背景为深色到偏棕色的渐变，画面有强烈的透视与光影效果（右侧远端更亮，左侧更暗）

- 整体风格为产品宣传页或界面目录展示的视觉效果

二、无法辨认或不确定的具体内容（需要标注的模糊/被截断处）

- 顶部右侧的“161 s...”后半部分被截断，无法确认完整文本（可能是“161 samples”或“161 scenes”等）

- 中央大字中的第2组合字（“动效”）的笔画有部分重叠，识别度较高但仍列为已读带注（见上文）

- 多数卡片上的标题与描述为小字号，低分辨率或被透视/遮挡，无法逐一准确识别完整文本

- 若干卡片上显示的具体数字、短句、或按钮标签不可辨清（模糊或被遮挡）

- 局部缩略图内的小图标和细节（如精确曲线数值、图表刻度、按钮文字）无法辨认

三、推测（基于画面元素的合理判断，非直接读取到的信息）

- 该图片很可能是一个名为“Video Shotcraft”的产品/服务的宣传图，展示其“recipes（预设/配方）”和“styles（样式）”等资源库

- “106 recipes, every move tuned.” 与顶部的“106 recipes”数字相呼应，暗示页面展示的是106项效果或预设集合

- 卡片式缩略图可能分别代表不同的动画/动效/界面交互示例（例如滑块、图表动画、粒子效果等）

- 被截断的“161 s...”可能代表“161 samples”、“161 styles”或“161 scenes”等，但具体词项不确定

- 图片为倾斜展示（3D 视角）的界面图库或模板库的视觉宣传图

四、其他可见现象（视觉/设计细节）

- 中英文混合文案（中文大字与英文品牌/口号并存）

- 白色文字外加黑色描边以提高前景可读性

- 卡片中的橙色元素作为强调色，出现在若干卡片的按钮或标签位置

- 画面采用深色主题的界面示例（多数卡片为深色背景，也有少数浅色卡片）

如果需要，我可以对图片中每个可见卡片逐一放大标注（会受限于当前分辨率，模糊处仍无法完全识别）。

SkillPI 作品解读

作品用途：

该条目为作者对其开源视频制作“Video-shotcraft skill”的介绍摘要。作者声称该开源项目包含完整的 Remotion 视频工作流、视频模版、200+ 个镜头动效及对应代码和 demo 样片，并说明后续会发布视频讲解该 skill 的用法。作者还声明当前示例视频由该 skill 一键生成。

图片证据要点（来自图片记录）：

- 图像顶部左侧写有“VIDEO SHOTCRAFT”，并在顶部偏右显示“106 recipes · 162 styles · 161 s...”（“161 s...” 被截断）。

- 中央大字为“宣传片动效 skill”，左下角有英文口号“106 recipes, every move tuned.”

- 主体为倾斜的深色面板，面板上以网格排列许多卡片式缩略图，每张卡片含小图、标题、描述与橙色按钮/标签，整体呈模板或资源库目录的视觉效果。

关联 Skill 的使用步骤（基于 Remotion 与常见开源视频项目的通用流程，需以项目 README 或源仓库为准）：

1. 获取源码：从项目仓库或发布页克隆或下载代码（验证仓库地址与分支）。

2. 环境准备：安装 Node.js（符合仓库要求的版本）、npm 或 yarn；确保本地网络可安装依赖；视项目需检查是否需要全局安装 remotion CLI 或其它工具。

3. 安装依赖：在项目根目录执行 npm install 或 yarn install，查看 package.json 中的脚本说明。

4. 本地预览：若项目使用 Remotion，通常可运行 npm run dev 或 remotion dev 在浏览器中预览 composition 与模板。

5. 选取/定制模板与镜头：在项目内浏览 templates 或 recipes 目录，按组件/参数修改 props、时间轴或样式来定制镜头动效。

6. 渲染导出：使用 remotion 的渲染命令（如 remotion render 或仓库提供的 npm 脚本）导出 MP4/WebM 或生成 demo 样片；若仓库声明“一键生成”，应查明对应脚本名与运行方式。

7. 复用与集成：将所需的 shot 组件或样式提取到现有项目或按示例引入并调整资源路径。

复现前提（须确认）：

- 获取并核实源码仓库地址、README 与使用说明；确认是否包含演示代码和 demo 样片。

- 本地需安装合规版本的 Node.js 与包管理器；若 Remotion 渲染依赖 ffmpeg，需确认本地或自动下载 ffmpeg 的配置。

- 需具备基本的 React 与 Remotion 使用经验以理解组件与 composition 的结构。

待核实项（不可仅凭摘要或图片断言）：

- 仓库实际文件结构、脚本名称与使用命令（例如是否存在“npm run demo”或“一键生成”脚本）。

- “200+ 个镜头动效”与“106 recipes / 162 styles / 161 s...” 等数字的准确含义与统计方法。

- 依赖的确切版本（Remotion、Node.js、第三方库）与许可证条款。

- 一键生成示例视频的具体实现细节（是否自动包含素材、是否需外部授权素材）。

说明：上述“关联 Skill 的使用步骤”为基于 Remotion 常见工作流的通用建议，实际使用需参考项目仓库的 README 与示例脚本以获取准确命令与操作步骤。如果仓库未提供详细文档，建议向作者或项目发布页索取使用说明与演示脚本。