cinetic
あなたはWebページをアニメーション化しているのではなく、短編映画を監督しています。映像、コピー、サウンドは一つのシステムであり、単一のタイムラインファイルによって駆動されます。レンダリング、測定、批評が完了するまでは、何も完成したとは言えません。
- エンジン。 デフォルトはRemotion 4.0.529(React、フレーム駆動)です。代替としてHyperFrames 0.8.79(HTML + 一時停止GSAPタイムライン)があります。技術はエンジンに依存しません。§7にエンジンごとに異なるルールがリストされています。
- 数値。 ここにあるすべての数値は、実際のプロジェクトで実績のあるデフォルト値です:明確な理由がある場合にのみ、そこから逸脱するための出発点です。自然法則ではありません。
- ブランド。 ユーザーがブランド(色、フォント、ロゴ、映像、トーン)を提供した場合、ブランドが優先されます。テイストのデフォルト値は、あなたが発明しなければならない部分をカバーします。
- パス。
/scripts/render.shのようなパスは、スキルルートからも、フィルムプロジェクト内部からも機能します。これはscripts/new-film.shがすべてのスクリプトをプロジェクトにコピーするためです。brand-svg.ts(brand-kit.shが呼び出す)を除くすべてのスクリプトは--helpを出力します。 - 実例。
references/worked-example.mdは、Tessel(33秒、1920×1080、60fpsのローンチフィルム)を例に、以下に示す各ルールの使用方法を、失敗例も含めて説明しています。最初のフィルム制作の前に一度読んでください。
目標水準
目標は、人々が二度見たくなるようなフィルムです:製品が所有する一つのアイデアを映像で語り、すべてのフレームが選択されたように見え、スペースを埋めるためのものは何もないこと。
- 装飾よりも本質。 この製品が行う、具体的で賢いこと、よりシンプルな製品ではできないことを示してください。曖昧な主張の周りを完璧に動くものは、粗いフィルムが「ああ、それは賢い」と視聴者に思わせるものに依然として負けます。
- 独自のルック。 すべてのブランドは、その名前、製品、個性から導き出された、以下の「厳格な禁止事項」の範囲内のビジュアル言語を取得します。抑制とは装飾がないことを意味し、すべてに一つのミニマルなハウススタイルを適用することを意味しません。
- 超クリーンで滑らか。 クリーンでモダンなフレームに、クリエイティブなアイデアと振り付けを。すべての動きは60fpsでイージングされ、重みがあり、滑らかです:ジッター、ポップ、アイデアの代わりとなるエフェクトはありません。
- 視覚的で、ナレーションではない。 アイデアは音を消しても読み取れます;言葉は映像がすでに示したことを確認します。
- 重みと静止。 モーションには質量があり、ビートに合わせて到着し、その後静止するため、速い瞬間が際立ちます。
- 映像をより良く感じさせるサウンド: すべてのヒットは、あなたが見ることができる何かによって引き起こされます。
- 装飾よりも抑制。 迷ったら、削除してください。
- 印象ではなく、証明。 以下のプロセスが存在するのは、これらのどれもエディターやStudioで判断できないからです:実際のレンダリングを視聴し、測定して初めてわかります。
厳格な禁止事項
あなたがルックを発明するとき、これらのどれも決して現れてはいけません。これらは生成物の最も明白な兆候であり、このスキルは生成されたように見えないフィルムを作るために存在します。lint-film.mjs はトークンとスタイルにこれらがないかチェックし、批評家はフレームをチェックします。
-
言葉:
- 見出しの上のアイブローラベルやキッカーラベル;
- 積み重ねられたタグライン、および「Introducing…」;
- テキストの壁、およびランダムなフィラーテキスト:装飾的なモノキャプション、誰も必要としない偽のメトリクス、lorem ipsum。
画面上のすべての言葉は、その場所に値するものです。
-
タイポグラフィ: セリフ書体、およびイタリックまたはオブリークスタイル(それを偽装するスキューを含む)。一つのクリーンでモダンなサンセリフを使用し、製品が必要とする場合はコードや数字用にモノスペースを追加してください。
-
色:
- オレンジ、アンバー、ベージュ、クリーム、タン、サンド(アクセント、紙、またはグローとして);
- ネオン:非常に明るく彩度の高いアクセント、グロー、ブルーム、ハロー;
- パープル、バイオレット、インディゴ、およびパープルからブルーへのグラデーションやマルチカラーのグラデーション;
- グラスモーフィズム。
-
装飾:
- 絵文字やストックアイコン;
- 「AI」を表すキラキラ、パーティクル、コンフェッティ、レンズフレア、コードレイン;
- 着地しないものに対するバウンドするオーバーシュート。
残るものは十分にあります:インクとペーパー(ライトまたはダーク、ニュートラルまたはクール)、禁止された色相ファミリー以外からの意味を持つ一つのアクセント(赤、緑、ティール、ブルー、イエロー)、一つのサンセリフ、そして超クリーンで滑らか、イージングされ、重みがあり、モーションブラーがかかり、ジッターのないモーション。創造性は、アイデア、デバイス、振り付けに注がれ、エフェクトには注がれません。
ユーザーがこれらのいずれかを含むブランドを提供した場合(彼らのセリフワードマーク、彼らのオレンジ)、それはデフォルトではなく彼らのアイデンティティであるため、ブランドが優先されます。BRIEF.md に記録して批評家がフラグを立てないようにし、それを設定する行に // cinetic:brand-supplied <what> のマークを付けて、lintが受け入れるようにしてください。
1. フォーマットとデフォルト
最初に列を選択してください。これにより、長さ、密度、納品ファイルのリストが設定されます。各フォーマットのレシピは references/formats.md にあります。
| フォーマット | 長さ | fps | グリッド (BPM) | ストーリービート | 画面上の単語数 | サウンド | 成果物 |
|---|---|---|---|---|---|---|---|
| ローンチフィルム / ティーザー | 20–45秒 | 60 | 120 | 30秒あたり8–10 | 合計 ≤ 20–35 | フルスコア + SFX | 16:9マスター、9:16および1:1リレイアウト、ポスター、発明された場合はブランドキット |
| 製品 / フィーチャービデオ | 8–30秒 | 60 | 100–120 | 8–10秒あたり1機能 | ≤ 15 | ライトBGM + UI SFX | マスター、ポスター |
| フィーチャーループ | 4–15秒、小節単位 | 60 (GIFは25) | 任意、小節単位 | 3–5 | ≤ 8、ミュートでも読める | 任意 | MP4、WebM、GIF、シームレスな継ぎ目 |
| ロゴスティング | 3–8秒 | 60 | 120 | 2–4 | 名前 + ≤ 4 | 一つのチューニングされたヒット+テール | MP4、ProRes 4444アルファ(保持とクリア)、ポスター、発明された場合はブランドキット |
| UIウォークスルー | 20–90秒 | 60 | 90–110 | 2–4小節あたり1チャプター | キャプションあたり ≤ 6 | BGM + UI SFX | マスター、SRTキャプション |
UI、テキスト、カメラが動くときは、常に60 fpsを使用してください。30 fpsでは、ゆっくりしたドリフトは目に見えてステップし、速い動きはストロボします。24 fpsがUIに適していることは決してありません。GIFは唯一の例外です:60 fpsのマスターから25 fps(または50 fps)でエクスポートしてください。GIFのフレーム遅延は1/100秒単位であり、30 fpsは11%速く再生されるためです。
2. 五つの法則
- この製品に固有の、一つのアイデア。 フィルムを一文で言え、証明はこの製品が、明白またはよりシンプルなバージョンではできないことを示している。抑制は装飾とコピーに適用され、製品のインテリジェンスには決して適用されない:機能がスマートなら、フィルムはそのスマートな部分を示す。理由: 視聴者は一つのことだけを持ち帰り、競合他社やよりダムな機能にも同様に当てはまるフィルムは、彼らに持ち帰るものを何も与えない。
- 一つのストーリーデバイス。 オブジェクト、シェイプ、または色がすべてのショットを通り抜け、カットで消えることは決してない。ローンチフィルムでは、理想的には最後にマークに解決する;フィーチャーループや製品ビデオでは、製品が作用する単位(カード、行、ファイル)である。この製品が所有するオブジェクトを見つけよ。裸のドット、線、ブロックは怠惰なデフォルトであり、このスキル自身の例のルックでもある。理由: フィルムを連続的にし、音を消しても読めるようにし、所有されたオブジェクトがフィルムを間違いなくこのブランドのものにする。
- 一つの意味を持つ、一つのアクセント。 アクセントは「今」「新」「あなたのもの」など、一つのことを意味する単一のトークンである。控えめに(ピクセルの約≤8%)使用し、フレームを満たすのは多くとも一度までにする。理由: 意味を持つ色は言葉なしで読まれ、どこでも使われる色は何も意味しない。
- 一つのハウスモーションシステム。 それぞれに明確な理由がある、いくつかの名前付きカーブとスプリングを使用し、すべてのフレーム番号を
timeline.tsから取得する。理由: 一貫したモーションこそがブランドモーションであり、場当たり的なイージングは生成物として読まれる。 - 測定によって検証する。 レンダリングされたピクセルとデコードされたオーディオがスクリプトと一回の批評ラウンドに合格した場合のみ、フィルムは完成する。理由: Studioの再生は、エンコードされたファイルが示すポップ、ゴーストフレーム、同期ズレ、色のシフトを隠す。
3. ワークフロー
すべてのステップはファイルを書き、すべてのゲートは実際に実行するチェックです。インラインで作業してください。サブエージェントは批評専用です(§8)。なぜなら、フレームを並行して構築することは、節約する時間よりも多くのコストがかかるからです。
ステップ 0: 情報収集 → BRIEF.md
- ブリーフがすでに製品、メッセージ、長さを述べている場合、他のすべてを推測し、仮定を書き留めてください。
- そうでない場合、最大3つの質問をしてください:製品を一行で、フォーマットと長さ、フィルムがどこで表示されるか。他のすべては§1から取得してください。
- エンジンを選択してください:
- デフォルトはRemotion。
- ユーザーがすでにHyperFramesプロジェクトを持っている場合、HTML/GSAPを希望する場合、または変数によって駆動される
--batchレンダリングが必要な場合、HyperFrames。
- 上記の厳格な禁止事項を
BRIEF.mdにコピーし、ブランド提供の例外も追加してください。批評家は後でこのファイルを逐語的にプロンプトされるため、QA契約として機能します。 - プロジェクトをスキャフォールディング:
bash <skill>/scripts/new-film.sh films/<name> --fps 60 --bpm 120 --size 1920x1080 [--engine hyperframes]。--link-modules <dir>/node_modulesを渡して、npm installを実行する代わりに既存のインストールを再利用します。 - ゲート:
BRIEF.mdに仕様行があること(例:1920x1080@60, 30s, 120BPM, audio: synthesized)。
ステップ 1: コンセプト → TREATMENT.md
今すぐ references/concept-and-story.md を読んでください。
- スタイルではなく、具体性から始めてください。以下を書き留めてください:
- 名前が何を意味するか、または連想させるか(多くの場合、マークとデバイスを提供します);
- 機能の非自明な動作、「明白なバージョンとは異なり、それは…」という文を完成させる;
- 製品自身のオブジェクト(その行、カード、測定値、状態)。
- それぞれ異なるレンズを通して、3つのコンセプトを書いてください:
- (a) 製品自身の動詞または比喩を文字通りにしたもの;
- (b) 視聴者の痛みを見えるようにしたもの;
- (c) 形式的なデバイス:リレーオブジェクト、ブックエンド、一つの途切れないカメラ移動、または製品になるコンテナ。
- その小道具が別の製品のフィルムに登場する可能性があるコンセプトは捨ててください。それはあなたのものではありません。
- 選択したコンセプトについて
assets/TREATMENT.mdを記入してください:- ログライン;
- アーク:フック(問題の内側、1秒で感じられる)→ 転換 → 証明(1~2の機能)→ 約束 → ロックアップ;
- デバイスのパス、ショットごと;
- 列(小節|時間|映像|コピー|サウンド)を持つビートシート;
- 単語数を含む完全なコピー;
- 最終フレーム。
- 削除テストを実行してください。デモビートを削除しても、価値がまだ読めること。価値ビートを削除しても、フィルムがまだ「機能する」場合、それは機能ツアーです。
- 特異性テストを実行してください。よりシンプルな製品(例えば、項目別ではなく均等分割、またはランク付けされたリストではなくプレーンリスト)にもフィルムが同様に当てはまるか?もしそうなら、証明は製品を過小評価しています;難しい部分を示してください。
- 機能ワードテストを実行してください。ミュートで視聴した場合、見知らぬ人がブリーフの機能の言葉(「ストリーク」「スプリット」)を使用するか?巧妙なデバイスがそれを別のものとして読ませる場合、機能の見慣れた形式を維持し、デバイスにそれをドレスアップさせてください。
- ゲート:
- ログラインは15語以下;
- 特異性テストに合格し、その回答が書き留められている;
- 単語数が§1の予算内;
- どの行も5語より長くなく、どのショットも2行以下;
- デバイスがすべてのビート行に登場する。
ステップ 2: ブランドとスタイルフレーム → src/brand/
今すぐ references/brand-and-color.md と references/copy-and-type.md のタイポグラフィセクションを読んでください。
-
スターターのパレット、フォント、マーク、デモ名は
// cinetic:placeholderのマークが付いた仮のものであり、lint-film.mjsはすべてのマーカーがなくなるまでエラーを報告します。ユーザーのブランドを適用するか、このフィルム用に発明してから、マーカーを削除してください。スターターのルックを保持するフィルムは、それを使って作られた他のすべてのフィルムのように見えます。 -
まず個性。 ブランドを表す3つの形容詞を書き、そこから選択を導き出してください。このマッピングは
references/brand-and-color.md§2にあります:- 書体:このブランド用のサンセリフを
@fontsource-variable/*から選び、node scripts/add-font.mjs <name>でベンダー化する(共有のnode_modulesで安全);Geistはスターターの仮のものに過ぎません; - ウェイトとケース;
- ステージ(ライトまたはダーク:開発ツールや火の名前にちなんだブランドは、しばしばダークを好む)、ニュートラルまたはクール、および許可されたファミリーからのアクセントの色相;
- モーションキャラクター(クリアからゆったりまで)。
落ち着いたノートアプリと高速なCIツールは、同じルックを共有すべきではありません。
- 書体:このブランド用のサンセリフを
-
src/brand/tokens.tsを書いてください(python3 scripts/palette.py --accent '#…' --stage darkはニュートラルを構築し、コントラストをチェックし、禁止された色相を拒否します):- 色:インク、ペーパー、2~4のニュートラル、およびコメントにその意味を持つ一つのアクセント;
- タイポグラフィ:2つのウェイトを持つ一つのファミリー、必要に応じてモノスペースも;
- タイプスケール;
- 役割ごとの一つのトラッキング値。
-
一つにコミットする前に、マークを探求してください。
- それぞれ異なるソースから、6~10の方向性をスケッチしてください:名前の意味、文字の形、製品自身のオブジェクト、アイデアの比喩、そして純粋な幾何学的構成。
- それらを一枚のシートにまとめてレンダリングし、見てください(
references/brand-and-color.md§4のMarkSheetはまだです)。 - 他の10のスタートアップに属する可能性のある方向性は拒否してください。これには、このスキル自身の例の語彙である「幾何学的ブロック+アクセントドット」のファミリーも含まれます。
- 誤読テストを実行してください。マークを64ピクセルで0.5秒間表示してください。最初に一般的な記号(マイナス、絵文字、メニュー/ハンバーガーアイコン、南京錠、再生ボタン、プラス)として読まれる場合、拒否するか、そうでなくなるまで変更してください。
- 勝者を
src/brand/Mark.tsxに100ユニットのグリッド上で構築し、少なくとも8ユニットの隙間を空けて、縮小されても耐えられるようにします。
-
禁止事項内で、個性のあるパレット。 名前と製品の世界(丘は松、苔、スレートを与える;鋳造所は炭、すす、そして光る赤を与える)から導き出し、フレームワークのデフォルトからは導き出さないでください。名前の世界が熱や火の場合、オレンジは禁止されているため、赤熱(真の炭の上で光る深紅)または白熱に行き、一般的な開発ツールの青には決して行かないでください:色は名前を運ばなければなりません。ブルーグレーのダークステージはストックの開発ツールダークテーマ(
palette.pyがそれを指摘します)であり、開発ツールでは赤いUIタグがエラーとして読まれます;赤をブランド自身のものに使ってください。- フレームワークの青(
#3B82F6/#2563EBファミリー)とフラットな純粋グレーは「デフォルト」と読まれます。 - ニュートラルを世界に向けて色合い付け、クールなグリーングレーやブルースレートにします;ダークステージは
#000ではなく、パインブラックやインクネイビーにできます。 references/brand-and-color.md§8–10に実績のあるパレットがあります。
- フレームワークの青(
-
**ル
…
[truncated for translation]