Communitygithub.com

carousel-mp4

创建 Instagram 轮播内容的动画 MP4,效果类似 After Effects:逐字文字、擦除、滑动转场、Ken Burns 效果,搭配多样音效和来自 Openverse 的无版权音乐。

carousel-mp4 是什么?

该技能扩充了 `instagram-carousel` 技能,将原本的 PNG 轮播输出转换为带有丰富动画效果的 MP4 视频。它完全复用 `instagram-carousel` 的预设流程(构思、视觉系统和 HTML 设计),但最终产出的不是静态图片,而是一段适合 Instagram 动态或 Reels 的视频。用户可通过指定 /carousel-mp4 或要求“作为视频”、“动画”、“MP4”、“用于 Reels”或“像 After Effects 那样”来触发。 核心工作流包括:先确定轮播方向(竖屏 9:16 或横屏 16:9)和风格(幻灯片自动转场或更动态的动效图形),再通过 HTML 中 `data-anim`/`data-delay` 属性精细控制动画节奏。视频渲染基于 Chrome 浏览器(GSAP + WebCodecs 编码),无需 ffmpeg,20–30 秒的视频大约 30–60 秒渲染完成。音效可选用内置效果(自动随机变调变长)、Openverse 音效(支持搜索“whoosh”、“pop”、“hit”等)或 Openverse 音乐,文件命名即决定用途。最终交付 H.264 + AAC 编码的 `carousel.mp4` 文件、配套的文案 `caption.txt` 以及渲染信息说明。该技能依赖 `instagram-carousel` 技能的绘图与渲染脚本,适合内容创作者和开发者快速生成社交媒体视频内容。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Yupzao/instagram-carousel-skill/tree/main/skills/carousel-mp4

在你喜欢的 AI 中提问

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

文档

轮播 → 动画 MP4

本技能复用了 instagram-carousel 技能(必须安装在 ~/.claude/skills/instagram-carousel;以下简称为 <ic>)。 最终输出为 MP4,而非 PNG。

工作流程

  1. 照常制作轮播:按照 <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、网站或屏幕。

      方向会改变整个画面构图(网格、尺寸、安全区域),因此切勿默认选择。横屏仅在动效图形模式下可用。

    • 同时询问风格:幻灯片(自动编排:每页之间的摄像机移动)或动效图形(动态排印和多样的过渡效果,使其不再像幻灯片)。如果用户说结果“看起来像幻灯片”或要求更动态的效果,则使用动效图形。请参阅 references/motion.md。

    • 以及音效:内置效果(默认)、Openverse 音效、Openverse 音乐、用户自己的文件,或无声。

  2. 阅读 <ic>/references/video.md:编排、使用 data-anim/data-delay 控制动画、音效和检查。
  3. 如有需要,在 HTML 中调整编排。动画是自动的,但 data-anim 和 data-delay 允许你微调关键的时刻。
  4. 在完整视频之前,使用静态截图进行快速检查:
    node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 --stills=0.6,1.5,3,4.2,6
    
    打开 <output>/carousel-stills/ 中的 JPEG 文件,确认每个入场结束时没有内容被截断、重叠或不可见。
  5. 音效(可选,详见 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,随机音调和时长)。
  6. 渲染 MP4:
    node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 [--reels] [--sfx=<output>/sounds] [--music=<output>/sounds/music.mp3]
    
    无需 ffmpeg:它使用 Chrome(GSAP + WebCodecs)。对于 20–30 秒的视频,大约需要 30–60 秒。如果渲染时间较长,可在后台运行。
  7. 交付:
    • carousel.mp4(H.264 + AAC,可直接用于 Instagram/Reels)
    • caption.txt(文案、标签、关键词)
    • 一条说明:时长、格式、使用的音效(及其来源,来自 sounds/sound-sources.txt)以及仍需替换的占位符

除非用户明确要求,否则不要交付 PNG。如果用户要求,则使用基础技能中的 render.mjs 进行渲染。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能