作品集展示视频

作品集展示视频（模板："skill 2"）

本技能根据单个配置文件 promo.json 制作一段约30秒的完整介绍视频。画布场景在无头 Chrome 中逐帧绘制，并在卡片中播放用户的视频片段。不使用任何素材库、AI 视频或模板服务。其结构模仿参考视频 skill2.MP4（一个 TikTok 创作者的介绍视频）的节奏。仅借鉴其技巧，绝不使用其中的镜头、文字、姓名、用户名或水印。

时间（3个部分）	场景
0-2.3 秒	芥末黄渐变，两个大软圆滑入；hook[0] 逐字打出，然后 hook[1] 大而粗体地弹出
2.3-2.9 秒	白色圆圈从底部擦除向上；头像以小黄色圆盘形式弹出
2.9-6.4 秒	白色背景上的个人资料页：头像放大为大圆（带黄色环或黄色双色调），然后出现带星标的轮廓 badge 药丸标签、逐字出现的 hello、由细条分隔的 roles，以及带 ↑ 的黑色 button 药丸标签。箭头向上射出，页面滚动
6.4-20.5 秒	每个部分一个页面（每个4.6秒），浅灰色背景带柔和窗光阴影：渐变标题，然后1-3个圆角卡片跟随滚动并浮动。视频播放，图片缓慢缩放。竖版卡片高耸，横版卡片宽展，混合排列交错
20.5-24.4 秒	黄色光从左下角绽放回渐变；cta[0]，然后 cta[1]，逐字出现
24.4-30.3 秒	黑色个人资料卡片从小点弹出（头像或 logo、handle、name、最多3个计数 stats、两个按钮）。光标点击第一个按钮，按钮变灰并显示 clicked，然后卡片以3D效果翻转到其 back

视频时长约30秒，包含3个部分，每个部分约4.6秒，文字较长时略长。

两种用户界面："ui": "classic"（默认）或 "app"

app 保持相同的时间线和文案，但每个场景都是动态网格渐变背景上的现代应用界面：

时间	app 场景
钩子	玻璃搜索栏逐字键入 hook[0] hook[1]；下拉结果列表显示人物（头像、姓名、角色）和前两个部分；光标点击人物
个人资料页	点击的结果放大成 Bento 仪表盘，包含玻璃磁贴：一个高大的照片磁贴（姓名和用户名）、问候磁贴（徽章、带荧光笔高亮的 hello、角色标签）、统计磁贴（统计 profile.stats）、光标可点击的 button 磁贴，以及列出各部分的磁贴
作品部分	水平轮播，每个部分一张幻灯片：一个大数字、标题、“n 个工作”、顶部的进度条。作品在设备模拟框中显示：横版片段在浏览器窗口中（交通灯、地址栏 site/section-title），竖版片段在手机中，层层叠叠分布在右侧
行动号召	聊天屏幕：输入中点点点，然后 cta[0] 和 cta[1] 作为人物发送的消息气泡出现（最后一条使用强调色）
卡片	个人资料卡片带渐变封面横幅、重叠的头像、用户名、姓名、计数统计和两个药丸按钮；光标点击“关注”（五彩纸屑效果），然后翻转到二维码（profile.qr / profile.back，在安装 qrencode 时生成），地址显示在下方

site（可选）设置浏览器模拟框中显示的地址，默认为 profile.back。两种UI中所有样式和效果均生效（在 app 中，orbit 和 ticker 不使用）。

样式和效果

"style" 选择色彩主题。深色样式会使用带微弱网格的深色页面和发光卡片，代替窗光阴影。

样式	外观
mustard（默认）	模板样式：芥末黄渐变、白色个人资料页、浅灰色页面、黑色药丸标签、蓝色按钮
midnight	靛蓝到黑色、霓虹青和紫色、深色页面、发光卡片
sunset	桃色到粉色、暖白色页面、珊瑚色标题和按钮
amber	金色在近黑色背景上（适合开发者或作品集）、深色页面、琥珀色药丸标签和按钮
mint	薄荷绿到青绿色、白色页面、绿色标题

"colors" 可覆盖样式中的任何单个颜色。

所有效果默认开启。使用 "effects": {"ticker": false} 关闭某个效果，或使用 "effects": false 关闭所有效果以还原到纯模板外观：

效果	作用
bokeh	柔和光粒在渐变场景中向上漂浮
shine	光扫过大问题、按钮和个人资料卡片，圆形擦除时带回声环，按钮上带脉冲环
marker	荧光笔在名字下方划过（text.highlight 选择单词，或第二个单词之后的所有内容）
orbit	虚线环上带三个点，绕头像旋转
blur	页面滚动时的垂直运动模糊
labels	每个部分标题上方显示“01 / 03”，并带一条逐渐画出的下划线
glare	每个作品卡片落地后，对角光线扫过
ticker	大号轮廓标签在结束语后滚动（text.tags，否则是角色和部分标题）
confetti	按钮被点击时，以样式的颜色爆发五彩纸屑
grain	胶片颗粒和柔和暗角覆盖整个画面

为了让用户选择，在完整渲染之前，先以每种样式渲染相同的4个瞬间（“样式板”）。使用 render.mjs --times 对仅 style 不同的 promo.json 副本进行操作。

依赖：ffmpeg、Node 22+、Google Chrome 或 Chromium（CHROME_PATH）、以及带有 numpy 和 scipy 的 Python（PROMO_PY；promo.sh 会自动查找）。

工作流程

1. 收集视频所需内容

• 头像： 一张肖像照，包含面部和肩膀。提供 crop: [x, y, size]（像素），使面部位于圆圈中央，并检查预览。如果背景杂乱或过亮，使用 "avatarStyle": "duotone" 可以在黄色背景上生成深色人物，如同模板所示。
• 作品部分（1-4个）： 每个部分一个简短标题（2-4个单词）和1-3个片段：视频（{"file", "at"}，从 at 开始播放5.5秒）或图片。使用用户最好的作品，并混合竖版和横版以增加变化。
• 文案： 保持简短。
  • hook：一行小字和一个1-2个单词的大问题。
  • badge：一句口号，最多约50个字符。
  • hello：“你好，我是……”。
  • roles：2-4个简短角色。
  • button：按钮标签。
  • cta：两行结束语。
• 个人资料卡片： handle、name、最多3个 stats、buttons、clicked 和 back。仅使用真实数字（来自用户、他们的网站或个人资料）。字符串值（如 "2023"）会直接显示，不进行计数。
• 语言： 对于高棉语，设置 "lang": "km" 并编写自然的高棉语。已捆绑 Kantumruy Pro 字体。
• 可选： style、effects、logo（在卡片的圆圈内）、colors、text.highlight、text.tags、music（+ musicStart）、sfxDir。

2. 编写项目

创建一个项目文件夹，将 examples/creator-reel.json 复制为项目文件夹中的 promo.json，然后进行编辑。每个键的描述见 references/config.md。路径相对于项目文件夹。

3. 预览（约10秒）

<skill>/scripts/promo.sh <project>/promo.json --preview

这将裁剪片段并渲染约13张静态图到 out/<name>-preview.png。检查并确认：

• 头像裁剪是否正确；
• 没有一行文字被压缩（长文本会自动缩小）；
• 每个部分的卡片显示良好的帧：更改 at；
• 个人资料卡片的数字。

4. 渲染（约2分钟；在后台运行）

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

各阶段按此顺序运行：assets、plan、render、mix、encode。--from mix 可重新混音而不重新渲染帧。

输出：out/<name>-1080p60.mp4 和 out/<name>-contact.png。

5. 交付前检查

• 阅读联系表。
• ffprobe 应显示与 build/cues.json 给出的时长一致。混音标准化至 -14 LUFS / -1 dBTP。
• 您无法听到结果，因此请告知用户您检查了哪些内容，并请他们试听。

调优

• 时序： 在 scripts/scene.mjs 中的 plan() 函数。SEC 是一个部分的时长，SCROLL 是页面滚动的时长。buildCues() 中的提示点会自动跟随。
• 外观：
  • 主题位于 scene.mjs 中的 STYLES，效果位于 EFFECTS；颜色也可以来自 colors。
  • 卡片布局由 layout() 处理。
  • 窗光阴影由 buildShade() 生成。
  • 翻转效果由 drawFlip() 绘制，使用带透视的条带。
• 音效： scripts/audio.py 中的 SFX 列出了在 sfxDir 中尝试的文件名。make_bed() 生成低保真节奏。