Communitygithub.com

vitozev/phone-portal-reel

用于制作竖屏产品广告(如Instagram Reels、TikTok、YouTube Shorts),展现手滑手机后每个产品从屏幕掉入真实场景的效果,也适用于任何“手机传送门”、“滑动掉落”或“摔出屏幕”类广告,尤其适合无实拍画面、需要完全生成场景、手部和产品的情况。

phone-portal-reel 是什么?

该技能(Phone-portal reel)专门用于生成9:16竖屏产品广告视频,核心创意是“手机传送门”效果:一只手握住手机,另一只手滑动屏幕,每次滑动都会让一个3D产品从手机屏幕“掉落”到真实场景中的货架上。整个广告时长9秒,分为三个节拍:产品掉落、定格动画切换和Logo展示。技能完全基于代码生成,无需实拍。它使用OpenAI的gpt-image-2生成场景和手部的静态图像,然后将其分层(场景、握手机的手、滑动的手),再结合Three.js 3D引擎与产品的真实3D模型进行动画渲染,使产品在穿过手机屏幕时保持统一的3D对象感。技能支持任意品牌的定制,但要求最终效果能“以假乱真”。它包含完整的构建流程(从生成场景、到3D相机匹配、再到音效混音),以及一系列严格的检查脚本(音效同步、响度、峰值等)和避免常见幻觉破坏的规则列表(如产品延迟、手部穿模、静止感等)。其主要使用平台是Claude Code(或其他AI Agent),通过命令行脚本和Python/Shell工具驱动。

兼容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/vitozev/claude-skills/tree/HEAD/skills/phone-portal-reel

在你喜欢的 AI 中提问

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

文档

手机传送门式竖屏广告

概述

一个9秒长的9:16产品广告,用单个固定三脚架镜头拍摄,分为三个节拍:

  1. 传送门掉落(约4.3秒)。 一只手握住手机。另一只手滑动屏幕,每次滑动将一个产品从屏幕中掉落到下方的货架上,并与节拍对齐。主打产品在音乐短暂停顿后,最后一个掉落。
  2. 定格动画切换(约2.7秒)。 硬切移除手和手机。产品以16分音符为间隔依次切换姿态,每4拍停一帧。
  3. Logo展示(约2秒)。 文字标志在6到8帧内淡入并静止。仅保留音乐,无旁白。

没有实拍画面。一张生成的图片被切割成图层(场景、手机和握手机的手、滑动的手),并通过代码动画化。产品是真实的3D模型,由同一相机在手机内和房间中渲染,因此它作为一个物体跨越屏幕界限。

标准: 它必须能冒充实拍。我们遇到的所有失败都是连续性破绽,有人只在一帧中就能发现。请以全尺寸检查交付文件中每一个接触瞬间。

你需要

需求用途
OPENAI_API_KEY用于生成场景和主画面的gpt-image-2;用于需保留照片的编辑(input_fidelity: high)的gpt-image-1.5
ELEVENLABS_API_KEY用于背景音乐(music_v2_5)和音效
HyperFrames CLI (npx hyperframes),three.js r169帧引擎和渲染
ffmpeg;Python 3 及 numpy opencv-python-headless pillow openai脚本

脚本从环境变量读取密钥,或从工作目录或其上级目录中的 .env 文件读取。它们绝不会打印密钥。请报告每次运行的支出:OpenAI费用(脚本会记录估算值)和ElevenLabs配额。

如果有人能实拍一只手在三脚架上滑动手机,请用该素材作为手部画面。这是最难伪造的部分。

关卡:每步需确认通过才能继续

  1. 简报和节拍表。 品牌、4到6个产品(主打产品最后一个,颜色与场景互补)、场景,以及一个节拍为整数帧的节奏。在30fps下,112.5 BPM对应16帧,120 BPM对应15帧,90 BPM对应20帧。确保每个落点都落在音乐的网格上(节拍或半拍),绝不能放在节拍之间。关于掉落次数,请参阅 references/build.md 第1节。
  2. 视觉效果。 场景原画、主画面(手和手机)、在匹配相机中首次渲染的3D产品、以及至少3种字体配对的结尾卡片,所有这些展示在一张图表上。
  3. 动态测试。 一次滑动和一次掉落,以交付质量渲染并逐帧检查。大多数失败都在这里暴露。
  4. 构建,然后音效,最后定稿。

构建

遵循 references/build.md。它包含每一步,以及已验证可行的参数。按顺序:

  1. 生成场景原画(空场景),然后生成主画面:在原画基础上编辑,添加双手和空白手机。主画面是基础帧。 所有干净的场景图层都从它提取。
  2. 从主画面切割图层,并测量屏幕角落、屏幕底边、指尖和手腕。
  3. 将3D相机匹配到货架边缘。
  4. 构建引擎。复制 example/studio/(参考构建:一个茶品牌,五个盒子),并根据你的场景重新测量其中的常量。它只包含代码:需要自己准备图片、字体、标签图和three.js文件。如果产品不是纸盒(比如罐子、瓶子、易拉罐、玻璃制品),请先阅读 build.md 中的“其他产品”部分。
  5. 先制作音乐并测量其节拍。然后将落点锁定到网格,添加音效并混音。
  6. 渲染,然后运行以下检查。

破坏幻觉的常见问题及修复

问题表现修复方法
产品在手机下方延迟几帧出现它是一个穿过屏幕的3D对象。每个滑动都从其落点帧反向求解:从产品最低点到达屏幕边缘的那一帧开始,使其以滚动速度在重力作用下掉落
产品掉落到手后面在屏幕底边下方,将产品绘制在手机边框和手指前面
产品在手机下悬停几帧从屏幕边缘开始即受重力控制。不要让它继续跟随页面滑动
滑动看起来像照片滑动用手腕发力,保持前臂僵硬。求解手腕角度,使指尖与页面移动一致。避免两次滑动相同
画面看起来像静止图片握手机的手有1.5到2像素的微漂移,并在每次按压时略微下沉。墙壁永远不动
手机屏幕上有暗线移动信息流中不要有页面分隔线。保持任何鬼影效果很低
手腕上有手表或珠宝滑动要求在主体画面中手腕裸露。如果出现,全部遮罩并用 scripts/blend-edit.py 移除
硬切变成了溶解过渡决定每个剪辑、替换和静止帧时,必须在整帧上进行,绝不在快门采样期间内操作
标签打印成多份副本产品掉落时使用48个子帧,其他时候使用10个子帧,快门设置为0.38帧
生成式编辑移动了遮罩外的内容遮罩编辑不被尊重。注册编辑后,仅取遮罩内的结果
撞击声在盒子到达前响起将每个音效片段修剪到其最强攻击点前4毫秒,然后对齐到该攻击点

完整列表及原因在 references/lessons.md 中。

发送前检查

  • 交付文件中每个接触瞬间的全尺寸截图:每次滑动的第一帧、产品穿过屏幕边缘的帧、每个落点帧、切变帧以及手臂离开画面的帧。
  • python3 scripts/sync-sheet.py final.mp4 --audio sound/stems/sfx.wav:每个打击点都应在指定帧上。
  • bash scripts/check-final.sh final.mp4 1080x1920:-14 LUFS ±1,真实峰值不超过 -1 dBTP。

脚本

脚本功能
scripts/openai-image.py OUT.png "提示语" [--edit IN.png --mask M.png --fidelity high]生成或编辑一张图片,并记录token和预估费用
scripts/blend-edit.py crop / blend准备一个区域的遮罩编辑,然后注册结果并仅取遮罩内的部分
scripts/elevenlabs.py spec.json OUTDIR根据规格生成背景音乐和音效,缓存结果并记录消耗的配额
scripts/beats.py bed.mp3检测背景音乐的节奏、节拍网格和第一个强拍
scripts/sync-sheet.py VIDEO --audio sfx.wav 或 --cues cues.json在一张图中显示每个音效打击点附近的五帧画面
bash scripts/check-final.sh VIDEO [WxH]检查视频尺寸、帧率、时长、响度和真实峰值

每个脚本均可使用 --help 查看选项。example/README.md 提供了参考构建的说明。

相关技能