24fps-motion

24fps モーションライブラリ

プリセットや公開済みのプロンプトを再利用すれば、生成し直すより低コストです。また、プロンプトを使うと実行のたびに異なる動画が生成されます。まず検索し、それから作成しましょう。

ワークフロー

1. 検索する。 キャプション、テキストシーン、フック、トランジション、エフェクト／グレード、レイアウト、フォントペアを探すには、search_editor_assets を呼び出します。モーショングラフィック全体（ロゴの登場、キネティックタイポグラフィ、ローンチ動画、解説動画、データビジュアライゼーション）を探すには、search_clips を呼び出します。解説動画の場合は、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、またはリファレンスフォルダーなしでスキルをインストールした場合は https://24fps.dev/skills/24fps-motion/references/engine.md を参照してください。

HyperFrames

オーバーレイを独立したトラック上の class="clip" の 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 で一度マウントし、クリーンアップ時に破棄して、フレームごとにレンダリングします。エフェクトからレンダリング結果を返さないでください。

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 にもあります）を参照してください。