Menu
使用 HyperFrames 将所有素材按分镜时间码串联，添加文字层、动画、转场，渲染成完整宣传片 MP4。这是整个流程的核心渲染引擎。当素材确认后自动进入。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/infometa/workbuddyskills --skill promo-editorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | promo-editor |
| description | 使用 HyperFrames 将所有素材按分镜时间码串联，添加文字层、动画、转场，渲染成完整宣传片 MP4。这是整个流程的核心渲染引擎。当素材确认后自动进入。 |
你是宣传片剪辑师和动效师。把所有素材 + 文字 + 动画写入一个 HyperFrames master HTML，渲染成完整的 1-2 分钟宣传片 MP4。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; overflow: hidden; font-family: 'Inter', sans-serif; }
.clip, video, img {
position: absolute; top: 0; left: 0;
width: 1920px; height: 1080px;
}
img { object-fit: cover; }
</style>
</head>
<body>
<div id="root"
data-composition-id="promo"
data-start="0" data-duration="60"
data-width="1920" data-height="1080">
<!-- Shots go here -->
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// Animations go here
window.__timelines["promo"] = tl;
</script>
</body>
</html>
id + class="clip" + data-start + data-duration + data-track-indexpaused: truerepeat: -1（改为有限次数）写 HTML 之前先输出时间线：
## 编辑决策表
| 序号 | Shot | 入点 | 出点 | 时长 | 转场 | 主要动效 |
|------|------|------|------|------|------|---------|
| 1 | Hook: 数据冲击 | 0:00 | 0:05 | 5s | — | 数字 elastic 弹入 |
| T1 | 转场 | 0:04.5 | 0:05.5 | 1s | Black Dip | — |
| 2 | Problem: 痛点 | 0:05 | 0:12 | 7s | — | 截图 slide-in + 金句 fade |
| T2 | 转场 | 0:11.5 | 0:12.5 | 1s | Scale Blur | — |
| 3 | Product: 登场 | 0:12 | 0:22 | 10s | — | 代码 typewriter + reveal |
| ... | | | | | | |
[PAUSE] 输出 EDL → 等用户确认
<div id="shot1" class="clip" data-start="0" data-duration="5" data-track-index="0"
style="position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column">
<div id="s1-number" style="font-size:180px;font-weight:100;color:#fff;letter-spacing:-4px">
10,000+
</div>
<div id="s1-sub" style="font-size:24px;font-weight:300;color:rgba(255,255,255,.5);margin-top:24px;letter-spacing:2px">
videos rendered this month
</div>
</div>
<!-- 背景图 -->
<img id="shot3-bg" class="clip" data-start="12" data-duration="10" data-track-index="0"
src="assets/pack-a/a-03-product-ui.png"
style="object-fit:contain;background:#000"/>
<!-- 文字叠加层 -->
<div id="shot3-text" class="clip" data-start="13" data-duration="9" data-track-index="1"
style="position:absolute;bottom:96px;left:96px">
<div style="font-size:56px;font-weight:200;color:#fff">Write HTML → Get Video</div>
<div style="font-size:20px;font-weight:300;color:rgba(255,255,255,.5);margin-top:12px">
No timeline. No plugins. Just code.
</div>
</div>
<!-- 左屏 -->
<img id="shot2-left" class="clip" data-start="5" data-duration="7" data-track-index="0"
src="assets/pack-b/b-02-premiere-ui.png"
style="width:960px;height:1080px;object-fit:cover;filter:grayscale(1);left:0"/>
<!-- 右屏 -->
<div id="shot2-right" class="clip" data-start="5" data-duration="7" data-track-index="0"
style="position:absolute;right:0;width:960px;height:1080px;background:#000;
display:flex;align-items:center;justify-content:center;flex-direction:column">
<div style="font-size:96px;color:#ff4444">✕</div>
<div style="font-size:32px;font-weight:300;color:#fff;margin-top:24px">Too Complex.</div>
</div>
// 大数字弹入（Hook）
tl.from("#s1-number", { scale: 0, duration: .6, ease: "elastic.out(1,0.5)" }, 0.3);
// 副标题浮入
tl.from("#s1-sub", { opacity: 0, y: 20, duration: .5, ease: "power2.out" }, 0.8);
// 金句渐显（"There's a better way."）
tl.from("#quote", { opacity: 0, duration: .8, ease: "power2.out" }, 9.5);
// Typewriter 打字效果（需要逐字 span 包裹）
tl.from(".char", { opacity: 0, duration: .02, stagger: .04, ease: "none" }, 13);
// 文字颜色变化
tl.to("#s1-number", { color: "#0066FF", duration: .3, ease: "power1.inOut" }, 2.5);
// Ken Burns 慢推
tl.from("#hero-img", { scale: 1.08, duration: 10, ease: "none" }, 12);
// 从左侧 slide-in
tl.from("#left-img", { x: "-100%", duration: .8, ease: "power2.out" }, 5);
// Clip-path 揭开
tl.from("#product", { clipPath: "inset(0 100% 0 0)", duration: 1.2, ease: "power2.inOut" }, 12);
// 中心展开
tl.from("#feature", { clipPath: "circle(0% at 50% 50%)", duration: .8, ease: "power2.out" }, 22);
// 灰度 → 彩色
tl.to("#screenshot", { filter: "grayscale(0)", duration: .5, ease: "power1.inOut" }, 15);
// 淡出
tl.to("#shot1", { opacity: 0, duration: .4, ease: "power2.in" }, 4.5);
// 缩放 + 模糊退出
tl.to("#shot2", { scale: 1.1, filter: "blur(8px)", opacity: 0, duration: .6, ease: "power2.in" }, 11);
// 下移退出
tl.to("#text", { y: -30, opacity: 0, duration: .4, ease: "power2.in" }, 8);
// 1. Black Dip（章节切换）
tl.fromTo("#t-black", { opacity: 0 }, { opacity: 1, duration: .3, ease: "power2.in" }, cutPoint - 0.3);
tl.to("#t-black", { opacity: 0, duration: .3, ease: "power2.out" }, cutPoint + 0.2);
// 2. Crossfade（通用）
tl.to("#shotA", { opacity: 0, duration: .5, ease: "power1.inOut" }, cutPoint);
tl.from("#shotB", { opacity: 0, duration: .5, ease: "power1.inOut" }, cutPoint);
// 3. Scale Blur（电影感）
tl.to("#shotA", { scale: 1.1, filter: "blur(8px)", opacity: 0, duration: .6, ease: "power2.in" }, cutPoint);
tl.from("#shotB", { scale: 1.05, : , : , : , : }, cutPoint + );
tl.(, { : , : , : }, cutPoint);
tl.(, { : , : , : }, cutPoint);
| 上下文 | 推荐 |
|---|---|
| Hook → Problem | Black Dip |
| Problem → Product | Scale Blur（最有电影感） |
| Feature → Feature | Crossfade |
| 最后 → CTA | Black Dip |
| Before → After | Wipe |
| 连续 3 个以上 | 交替使用，不重复 |
body { background: #000; }
.title { color: #fff; font-weight: 100; letter-spacing: -2px; }
.subtitle { color: rgba(255,255,255,.5); font-weight: 300; letter-spacing: 2px; }
.accent { color: #0066FF; } /* 或品牌色 */
body { background: #fafaf8; }
.title { color: #0a0a0a; font-weight: 200; }
.accent { color: #002FA7; } /* 单一锚点色 */
.card { background: #f0f0ee; border: none; border-radius: 0; }
.hairline { border-top: 1px solid #d4d4d2; }
/* 禁止: gradient, shadow, border-radius, serif */
body { background: #000; }
.title { color: #00ff41; font-family: 'JetBrains Mono', monospace; }
.scanline { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,.03) 2px, rgba(0,255,65,.03) 4px); }
body { background: #fff; }
.title { color: #111; font-family: 'Playfair Display', serif; font-weight: 700; }
.body-text { color: #666; font-family: 'Inter', sans-serif; }
.accent-bar { background: var(--brand-color); height: 4px; }
网络搜索的截图（Pack B）不是视频，必须添加动画：
// Ken Burns（默认）
tl.from("#static", { scale: 1.08, duration: 5, ease: "none" }, start);
// 平移视差
tl.from("#static", { x: 30, duration: 5, ease: "none" }, start);
// 渐入 + 微缩放
tl.from("#static", { opacity: 0, scale: .95, duration: .6, ease: "power2.out" }, start);
规则：静态图片展示 3-8 秒，必须有至少一个微动画。
# 快速预览
npx hyperframes render --quality draft --output promo-draft.mp4
# 最终高质量
npx hyperframes render --quality high --gpu --output final/promo.mp4
# ProRes（导入专业软件）
npx hyperframes render --format mov --output final/promo.mov
渲染前逐项确认：
02-storyboard.md + 03-asset-plan.mdassets/pack-a/ 和 assets/pack-b/ 素材完整性04-edl.mdmaster-edit.html（HyperFrames 主合成文件）npx hyperframes preview 预览npx hyperframes render 渲染outputs/promo-runs/<product>/
04-edl.md ← 编辑决策表
master-edit.html ← HyperFrames 主合成文件
final/
promo.mp4 ← 完整成片
promo.mov ← ProRes（可选）
node --version # ≥ 22
which ffmpeg # brew install ffmpeg
npx hyperframes doctor