キネティックタイトルドロップ
3つのビートからなる6秒、1920×1080のタイプのみのフィルム：
- 巨大な最初の単語がフレームを開き、ヘアラインスラッシュが通過した後、左上に落ち着きます。
- 2番目の単語がアウトラインとしてドロップインし、アクセントカラーで塗りつぶされます。
- 決めのラインがモーションスミアを伴って右からワイプインし、アクセントバーがその下をワイプします。チップとフッターがフェードインし、すべてが保持された後、クリーンに終了します。
このテンプレートは HyperFrames コンポジションです。あなたがブリーフを記入し、スクリプトがそれをテンプレートに書き込み、HyperFramesがチェックとMP4のローカルレンダリングを行います。テキストは実際のフォントで測定され、フレームを埋めるようにサイズ設定されるため、短い単語も長い単語も同じスペースに収まります。
必要なもの
- Node.js 22以降とFFmpegがPATHに含まれていること。
- HyperFramesは
npxで実行します。このテンプレートでテストされたバージョンに固定:npx --yes [email protected]。 - 最初のレンダリングでヘッドレスChromeがダウンロードされます。
renderがChromeがないと表示したら、一度npx --yes [email protected] browser ensureを実行してください。 cdn.jsdelivr.netへのネットワークアクセスが必要です。このCDNはテンプレートにGSAPを提供します。ブロックされている場合はトラブルシューティングを参照してください。
このスキルのフォルダは<skill>です。このSKILL.mdがあるフォルダのことです。
手順
1. コピーを取得する
推測できないことは何でも質問してください。すべてのフィールドには制限があり、スクリプトは制限を超える値を拒否します。
| フィールド | 説明 | 制限 | 良い例 |
|---|---|---|---|
line1 | 最初の単語。大きく開き、左上に配置されます。 | 10 | Ship |
line2 | 2番目の単語。アウトラインでドロップインし、アクセントで塗りつぶされます。 | 6 | it |
line3 | 決めのライン。最大の行で、その下にバーがあります。 | 12 | today. |
chip | 右上の小さなピル。バージョン、日付、ステータス。 | 24 | v2.0 · 公開中 |
metaLeft | 左下のフッター。それが何かを数語で。 | 60 | リリースノート · 14件の修正 |
metaRight | 右下のフッター。通常はURLまたはハンドル。 | 40 | relay.example/changelog |
作成のヒント：
- ライン1と2は上の行を共有するため、一緒に1つのフレーズの始まりとして読めるようにしてください（「Ship / it」、「Notes / that」、「Meet / the」）。ライン3がそれを完結させます。
- すべて大文字で設定されます。単一の単語が最も良く読めます。ライン3は2つの短い単語にできます。
line1 + line2は約12文字以内に抑えてください。そうしないと、上の行が決めのラインの隣で小さくなります。- フッターは約2秒間保持されるため、スキャンしやすいようにしてください。
2. 色を選ぶ
3つの16進数カラー: ground（背景）、ink（テキスト）、accent（アウトライン、塗りつぶし、バー、チップ）。ブランドカラーがあればそれを使ってください。ない場合は、以下のプリセットから始めてください：
| プリセット | ground | ink | accent |
|---|---|---|---|
| Ember | #0f1013 | #f5f4ef | #ff5b2e |
| Fieldnote | #f1ede4 | #18201c | #2f6b4f |
| Cobalt | #0b1020 | #eef1ff | #5b7cff |
| Paper | #fbfaf7 | #111111 | #e8462b |
| Lime | #101410 | #f2f5ee | #b6f23a |
ink は ground との強いコントラストが必要です。accent は ground に対して少なくとも3:1のコントラストが必要です。ライン2がその色で描画されるためです。check は両方を測定し、どちらかが失敗した場合は通知します。
3. プロジェクトを作成し、ブリーフを適用する
cp -r <skill>/template ./title-drop
cd title-drop
手順1と2のフィールドを使用して、プロジェクト内に brief.json を記述します：
{
"line1": "Ship",
"line2": "it",
"line3": "today.",
"chip": "v2.0 · 公開中",
"metaLeft": "リリースノート · 14件の修正 · 3つの新機能",
"metaRight": "relay.example/changelog",
"ground": "#0f1013",
"ink": "#f5f4ef",
"accent": "#ff5b2e"
}
次に、それをテンプレートに書き込みます：
node <skill>/scripts/apply-brief.mjs . brief.json
これにより、すべての値がテンプレートの宣言された変数（型、長さ、カラー形式）に対してチェックされ、問題があれば一度にすべてリストされます。ブリーフを修正して再実行してください。フィールドを省略して、現在の値を保持することもできます。
2つの完成したブリーフが <skill>/examples/ にあります。
4. チェック
npx --yes [email protected] check --json
check はファイルをリントし、ブラウザで再生し、時間経過に伴うレイアウトを測定し、コントラストをテストします。"ok": true で findings がない場合は準備完了です。レンダリング前にすべての finding を修正してください。コピーが原因で発生する可能性のあるもの：
contrast_aa_failure：色の組み合わせが近すぎます。suggestedColorを使用するか、暗いまたは明るい色合いを選んでください。text_box_overflow、clipped_text、content_overlap：値がテンプレートが期待するよりも長い場合。通常はフッターまたはチップが隣の要素に干渉しています。短くしてください。
finding を黙らせるためにテンプレートの構造を変更しないでください。代わりにブリーフを修正してください。
5. レンダリング前に確認する
npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots
これにより、snapshots/ にPNGフレームが書き出されます。フレームを開いて、開始フレーム、2番目の単語が着地するフレーム、そして保持終了フレームを確認してください。単語がチップと衝突していないか、フッターがバーに重なっていないか、アクセントが背景に消えていないかを確認します。
6. レンダリング
npx --yes [email protected] render --quality delivery -o renders/title-drop.mp4
プロジェクトの package.json には、npm run check および npm run render と同じコマンドが含まれています。迅速なテストには --quality draft を、ソーシャル向けのより滑らかな結果には --fps 60 を使用してください。
7. 引き渡し
renders/title-drop.mp4 へのパスと、手順5からの静止画1枚を相手に渡してください。別のバージョンが必要な場合にどのフィールドを変更すればよいかを伝えてください。brief.json を編集し、手順3から6を再実行するだけです。
タイミングマップ
| 時間 (秒) | 動作 |
|---|---|
| 0.00 | line1 がすでに画面に表示されており、大きく中央に配置されたサムネイル状態 |
| 0.00–0.42 | アクセントのヘアラインスラッシュが通過し、フェードアウト |
| 0.80–1.35 | line1 が左上に移動 |
| 1.35–1.77 | line2 がアウトラインとしてドロップイン |
| 1.90–2.06 | line2 がアクセントカラーで塗りつぶされる |
| 2.05–2.55 | line3 が右からワイプイン |
| 2.60–3.05 | アクセントバーが line3 の下にワイプイン |
| 3.10–3.50 | チップ、フッター、コーナーマークがフェードイン |
| 3.50–5.45 | 保持 |
| 5.45–5.80 | すべてが短いブラーを伴って上方に終了 |
複数のバージョンを一度に
複数のバリエーション（言語、製品、日付ごとなど）をレンダリングするには、ブリーフのJSON配列を記述し、一度にレンダリングします。各オブジェクトは完全または部分的なブリーフであり、すでに適用されている値にマージされます：
npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"
--batch はレンダリングごとに変数を設定するため、毎回 apply-brief を実行する必要はありません。出力パスには {index} や {line3} のようなプレースホルダーが必要です。そうしないとファイルが上書きされます。まず代表的なブリーフで check を実行し、スナップショットで最も長いコピーを確認してください。
トラブルシューティング
- レンダリングがハングし、その後静止フレームが表示される、または
sub_timeline_script_failureが報告される。 GSAPが読み込まれていません。ネットワークがcdn.jsdelivr.netをブロックしている場合は、プロジェクト内でnpm i [email protected]を実行し、node_modules/gsap/dist/gsap.min.jsをassets/vendor/にコピーし、index.htmlの<script src>をassets/vendor/gsap.min.jsに変更してください。 - 単語が間違ったフォントのように見える。 テンプレートはLeague GothicとJetBrains Monoを使用しており、これらはHyperFramesにバンドルされています。フォントを変更する場合は、別のバンドルファミリーを使用するか（
npx hyperframes docs compositionsで一覧表示）、@font-faceを追加するか、そうしないとcheckが失敗します。 - 色が変わらない。 手順3から
apply-briefを再度実行し、Applied N valuesと表示されることを確認してください。CSSの:rootカラーを編集しても効果はありません。変数が優先されます。 - 異なる長さにしたい？ 6秒に保ってください。ビートはそのウィンドウ内に収まるようにタイミングが設定されています。ルートの長さを伸ばすと、保持時間が長くなるだけです。
ファイル
template/：HyperFramesプロジェクト（index.html、hyperframes.json、package.json）。scripts/apply-brief.mjs：ブリーフを検証し、テンプレートに書き込みます。依存関係はありません。examples/relay-v2/およびexamples/fieldnote-beta/：完成したブリーフ。Lookbkのプレビューはこれらからレンダリングされています。NOTICE.md：このスキルが使用するサードパーティソフトウェア。