24fps-motion

24fps 动效库

复用预设或已发布的提示词，比重新生成成本更低；而提示词每次运行都会生成不同的视频。先搜索，再编写。

工作流

1. 搜索。 调用 search_editor_assets 搜索字幕、文字场景、钩子、转场、效果/调色、布局和字体组合。调用 search_clips 搜索完整动效（Logo 揭示、动态排版、发布视频、解说视频、数据可视化）。制作解说视频时，还要从 references/explainer-styles.md 中选择一种风格：共 40 种视觉风格（数学板书、扁平矢量科学、地图文章、纸艺拼贴、SaaS 发布等），每种都注明最适合使用的工具和入门提示词。
2. 获取。 get_editor_asset 会返回预设 JSON、agent_prompt 和引擎 URL。传入 format: "hyperframes" 或 "remotion" 可获取完整的入门文件。get_clip 会返回片段的提示词、模型、框架和创作者；只有片段采用开放许可时，get_source 才会返回代码仓库。
3. 调整。 保留预设结构，修改颜色、文案和时间。结合用户素材进行检查：如果文字被主体遮挡，或与素材颜色对比不足以清晰阅读，请移动图层或更改颜色。
4. 注明来源。 使用片段时注明创作者，并链接到 24fps 页面。预设请注明："24fps.dev/video-editor"。

MCP

端点：https://24fps.dev/mcp（可流式传输的 HTTP，无需密钥）。Claude Code：claude mcp add --transport http 24fps https://24fps.dev/mcp。

工具	参数
search_clips	query、framework、aspect（16:9、9:16、1:1、4:5）、max_seconds、has_prompt、limit
get_clip	slug
get_source	slug
search_editor_assets	query、kind（captions、text、hook、transition、effect、layout、font-pair）、vertical、needs_cutout、has_sfx、limit。查询为空或为 * 时，会列出各类资源及其数量。
get_editor_asset	kind、id、format（json、hyperframes、remotion）
list_tools	无。列出涵盖的动效框架及其许可证。

如果没有 MCP 客户端，可通过 HTTP 调用同一端点，或使用 JSON API：

curl -s https://24fps.dev/mcp -H 'content-type: application/json' -H 'accept: application/json, text/event-stream' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"search_editor_assets","arguments":{"query":"yellow karaoke","kind":"captions","limit":5}}}'
curl -s 'https://24fps.dev/api/clips?q=logo+reveal&framework=Remotion&has_prompt=true&per_page=5'   # ?slug= for one clip
curl -s https://24fps.dev/video-editor/captions/pop-anton-yellow-karaoke/preset.json                # any {kind}/{id}

浏览索引：https://24fps.dev/video-editor/llms.txt 和 https://24fps.dev/llms.txt。

应用预设

引擎：https://24fps.dev/editor/engine.js。采用 MIT 许可证，是无依赖的 ES 模块，纯粹根据时间计算。将它与合成文件保存在同一目录，命名为 engine.js。

import { mount } from "./engine.js";
const fx = mount(overlayEl, { kind, preset, script, media });
fx.render(seconds); // every frame

• kind 的值为 captions | text | transition | effect | layout。钩子和字体组合使用 text。
• 大多数类型的 media 值为 { main }，转场使用 { a, b }，布局则使用 { second, fg }。fg 是主体的透明抠像素材，z: "behind-subject" 文字以及 subject 和 echo 效果都需要它。
• 字幕的 script 可以是以秒为单位的单词时间戳数组 [{ w, s, e, emph }]（可使用 Whisper 单词时间戳），也可以是带有 *强调* 的字符串。
• 尺寸为画面高度的比例，位置为宽度和高度的比例。字体使用 Google Fonts。
• 字段参考：references/engine.md；如果安装技能时没有安装其 references 文件夹，也可访问 https://24fps.dev/skills/24fps-motion/references/engine.md。

HyperFrames

将叠加层放入独立轨道上的 class="clip" div 中，挂载到该 div，并通过已暂停的 GSAP 时间轴驱动 render，确保可以安全地跳转时间轴。将预设 JSON 和单词时间戳内嵌到页面中（或放在本地脚本里）：渲染器不应在渲染过程中获取数据。

const fx = mount(document.getElementById("fx"), { kind, preset, media: { main: document.getElementById("a") } });
let now = 0;
const clock = { t: (v) => (v === undefined ? now : ((now = v), fx.render(v))) };
const tl = gsap.timeline({ paused: true });
tl.to(clock, { t: 6, duration: 6, ease: "none" }, 0);
(fx.ready ?? Promise.resolve()).then(() => { window.__timelines["main"] = tl; });

抠出主体：npx hyperframes remove-background clip.mp4 -o clip.fg.webm。

Remotion

在 useLayoutEffect 中挂载一次，在清理时销毁，并逐帧渲染。不要从 effect 中返回渲染结果。

useLayoutEffect(() => {
  fx.current = mount(root.current!, { kind, preset, media: { main: a.current! } });
  return () => fx.current?.destroy();
}, []);
useLayoutEffect(() => { fx.current?.render(frame / fps); }, [frame, fps]);

截图前等待字体加载完成：await (fx.ready ?? document.fonts.ready)。

结合 /hyperframes 或 /remotion-best-practices 使用，以了解项目设置、渲染和框架规则。此技能负责查找素材；其他技能负责构建和渲染项目。

权利

• 每次改编片段时，都要注明创作者。链接到 https://24fps.dev/c/{slug}。
• 切勿重新托管第三方片段。请链接到原片段。只有 get_source 返回 available: true 的片段才有可用的代码仓库，你可以在其注明的许可协议范围内使用。
• 编辑器预设是原创复刻，采用 MIT 许可。
• 开源目录中的条目（/video-editor/open-source）各自遵循其许可协议。仅复制 MIT、Apache-2.0、BSD 或 OFL 许可下的代码，并保留许可声明。采用 Remotion 许可和未注明许可的条目仅可链接：可以复刻创意，但不要粘贴源代码。
• 详情：references/rights.md（也可访问 https://24fps.dev/skills/24fps-motion/references/rights.md）。