SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场motion-video-styles

motion-video-styles

设计与创作

查看项目

更新于 10-21 05:41

技能介绍

用途

motion-video-styles 帮助用户搭建一套自己的视频工具包（一个文件夹），并用它制作竖屏（9:16）或横屏（16:9）的动态图形视频，典型用途包括 reels、shorts、产品讲解等。整个流程不需要摄像机，也不需要视频剪辑软件：场景是 HTML 页面，由 GSAP 驱动动画，每个动画与配音中的词对齐，视频由 Playwright 逐帧捕获，再用 ffmpeg 合成。

上手配置（每个用户一次）

先简要询问并保存以下信息到 brand.json（模板：engine/brand.example.json）：

  • 品牌名、账号标识、logo 文件（PNG/SVG）、2–4 个品牌色（或由系统推导）。
  • 画幅：竖屏 1080×1920（reels/shorts/TikTok）或横屏 1920×1080（YouTube），或两者都要。
  • 语言：每种语言一条配音轨；若可配音，不建议只做字幕翻译。
  • 配音：推荐 QVox（本地 Qwen3-TTS，免费，可用 25–40 秒录音克隆自己的声音；安装命令 npm i -g qwen3-tts-api）。备选：OpenAI、ElevenLabs、Piper，或无配音（音乐加屏幕文字）。每种语言一个声音。配置见 references/voice.md。
  • 风格：展示下列 7 种风格（README 中有每种风格的截图），由用户自行选择，不可代为决定。也支持混搭（例如 desktop 场景加 notebook 手绘标记）。

随后创建工具包：

cp -R <this-skill>/engine my-video-kit && cd my-video-kit
npm i && npx playwright install chromium     # 一次
pip install faster-whisper                    # 词级时间戳（本地免费）

应用所选风格：把 references/styles/<style>.md 中的 tokens、字体与组件复制进 scenes.html，替换中性的初始 CSS，并替换为品牌配色与字体。在工具包中保存 STYLE.md，记录已定事项（风格、颜色、字体、字幕外观、配音、音乐）。

每个视频的流程

  1. 脚本 → script.json：每句或每个节拍一个 segment（id、cap，可选 say 用于 TTS 音标修正，场景切换处 gap 约 0.6 秒）。可用结构：钩子问题 → 转折（“错误的问题”）→ 每个想法一段 → 硬数据 → 回顾 → CTA。保持肯定语气，时长 20–60 秒。
  2. 配音 → python3 tts.py（每个 segment 一个 wav，默认 QVox；见 references/voice.md）。再对每个 segment 运行 python3 transcribe.py audio/<id>.wav words/<id>.json <lang> 得到词级时间。阅读转写文本：若某个词发音错误，改写 say（音标拼写）或更改 SEED= 后重新生成该 id。
  3. 时间轴 → python3 build_timings.py（写出 timings.js 和 voice.wav）。
  4. 场景 → 在 scenes.html 中编写 STYLE.build(tl, h)。用 h.W('s02','question') 方式对齐所有动画。各风格配方在 references/styles/，引擎 API 在 references/engine.md。
  5. 检查 → node render.mjs --stills=2,8,15 [--w=1920 --h=1080]，只查看这少数几张图（图片消耗 token，建议渲染 2–4 张静帧检查，不要看大量帧）。
  6. 渲染 → MUSIC=path/to/bed.mp3 bash make.sh out/video-en.mp4 [--lang en] [--w 1920 --h 1080]。
  7. 封面 → node render.mjs --stills=<hook time> --nocap --prefix=cover-（首帧常为空，平台需要显式封面）。
  8. 字幕文件（可选）→ python3 make_srt.py timings.js out/video.srt，用于自带字幕显示的平台，需配合 --nocap 渲染。
  9. 第二语言：为每个 segment 增加 cap_en（及 say_en），生成 audio_en/ 与 words_en/，运行 python3 build_timings.py --lang en，并在 scenes.html 中加载 timings-en.js（见 engine.md）。

7 种风格

  • pastel：柔和杂志光感，奶油色页面、飘动粉色云朵、衬线标题配斜体强调词、白色卡片、实时 UI 模型、浅色到深色面板擦除；适合高端感的产品讲解与对比。
  • stamp：新粗野主义亮色，骨白纸张网格、超大 grotesk 字体、粗黑边框加硬偏移阴影、2 个高饱和强调色、跑马灯；适合对比、发布、高能量内容。
  • notebook：方格纸上的胶带贴纸、手写体、自绘圆圈/划线和箭头、荧光笔；适合友好讲解、技巧、“我是怎么做的”。
  • desktop：把产品当作操作系统，亮色桌面、菜单栏、Dock、可打开拖动的窗口、通知、对话框、光标、安装器；适合软件演示、应用、SaaS。
  • neon-night：深色，近黑背景、一个带辉光的霓虹强调色、压缩展示字体、等宽标签、3D 卡片翻转、故障效果；适合暗色信息流中的品牌形象、科技内容。
  • poster：每场切换的全出血饱和色块、从遮罩中升起的展示字体、包豪斯形状；适合强钩子、打破信息流单调。
  • blueprint：技术制图风，蓝色网格、全部以白线绘制、尺寸标注、注释、示意图、批准印章；适合建筑、内部原理讲解。

字幕

默认开启烧录式卡拉 OK 字幕（多数观众静音观看）：文字来自 cap，时间来自配音，当前词高亮，外观由风格定义，并保持在底部平台 UI 之上。关于字幕的分块、类名、各风格外观、尺寸、位置、.srt 导出，详见 references/captions.md。

音乐

建议从 Pixabay Music 选择免版税配乐（免费许可、无需署名；不要再分发文件本身），见 references/music.md。配乐电平 −35 LUFS，人声 −16 LUFS。

规则与限制

  • 确定性：仅通过 GSAP 时间轴或 frame(t) 做动画。禁用 CSS 动画、Date、Math.random（用 h.hsh(i)）、video/SVG SMIL（从 logo 中移除 <animate>）。
  • 文字保持在安全区内：竖屏视频顶部约 12%、底部约 18% 会被平台 UI 遮挡。
  • 长渲染在后台运行（nohup … &）；60 秒视频约 2–4 分钟。
  • 字体本地加载（@fontsource/* 包），渲染时不得从 CDN 取字体。
  • 截图和模型稿中不得使用真实个人数据，使用虚构的人名与公司。