轮播 → 动画 MP4
本技能复用了 instagram-carousel 技能(必须安装在 ~/.claude/skills/instagram-carousel;以下简称为 <ic>)。
最终输出为 MP4,而非 PNG。
工作流程
- 照常制作轮播:按照
<ic>/SKILL.md中的步骤 1 到 4(简报、原型、视觉系统、脚本和 HTML)。所有规则适用:各页之间的连续性、新字体、2+1 配色方案以及设计审查。-
在开始设计之前,始终先询问方向,即使请求中没有提及方向(单选问题):
- 竖屏:Reels/Stories 9:16(1080×1920,
--reels)或信息流 4:5(1080×1350,不带标记); - 横屏:16:9(1920×1080,
--landscape),用于 YouTube、网站或屏幕。
方向会改变整个画面构图(网格、尺寸、安全区域),因此切勿默认选择。横屏仅在动效图形模式下可用。
- 竖屏:Reels/Stories 9:16(1080×1920,
-
同时询问风格:幻灯片(自动编排:每页之间的摄像机移动)或动效图形(动态排印和多样的过渡效果,使其不再像幻灯片)。如果用户说结果“看起来像幻灯片”或要求更动态的效果,则使用动效图形。请参阅
references/motion.md。 -
以及音效:内置效果(默认)、Openverse 音效、Openverse 音乐、用户自己的文件,或无声。
-
- 阅读
<ic>/references/video.md:编排、使用data-anim/data-delay控制动画、音效和检查。 - 如有需要,在 HTML 中调整编排。动画是自动的,但
data-anim和data-delay允许你微调关键的时刻。 - 在完整视频之前,使用静态截图进行快速检查:
打开node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 --stills=0.6,1.5,3,4.2,6<output>/carousel-stills/中的 JPEG 文件,确认每个入场结束时没有内容被截断、重叠或不可见。 - 音效(可选,详见
video.md› 音效):- Openverse:
node <ic>/scripts/sounds.mjs search "whoosh" --type=sfx。向用户展示选项,并征得用户许可后运行node <ic>/scripts/sounds.mjs download <id> <output>/sounds/whoosh-1.mp3。 - 文件名称决定其用途:
whoosh*(过渡)、pop*(贴片/药丸)、hit*(标题)。每种类型使用多个文件(例如whoosh-1.mp3、whoosh-2.mp3……),这样过渡音效就不会总是相同;它们会循环播放且不会连续重复相同的音效。音乐则单独处理。 - 如果没有提供文件,内置效果会自动变化(5 种 whoosh、3 种 pop、3 种 hit,随机音调和时长)。
- Openverse:
- 渲染 MP4:
无需 ffmpeg:它使用 Chrome(GSAP + WebCodecs)。对于 20–30 秒的视频,大约需要 30–60 秒。如果渲染时间较长,可在后台运行。node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 [--reels] [--sfx=<output>/sounds] [--music=<output>/sounds/music.mp3] - 交付:
carousel.mp4(H.264 + AAC,可直接用于 Instagram/Reels)caption.txt(文案、标签、关键词)- 一条说明:时长、格式、使用的音效(及其来源,来自
sounds/sound-sources.txt)以及仍需替换的占位符
除非用户明确要求,否则不要交付 PNG。如果用户要求,则使用基础技能中的 render.mjs 进行渲染。