アニメーションスタイルは何をしますか？

39種類の手作りアニメーションスタイルを備えたRemotionプロジェクト。各スタイルは固定された1つのストーリーを再描画するため、並べて比較したり、テンプレートとして再利用できます。やかんが入ってきて、傾き、チャイをクルハド（陶器のカップ）に注ぎ、カップが満たされ、やかんが去り、湯気が立ち上る。 150フレーム、30fps、1080×1350（4:5）、無音。--scale=2でレンダリングすると2160×2700になります。

すべてコードで描画されます：SVGとフィルター、または各フレームを描画する<canvas>。画像モデル、動画モデル、ストック映像は一切使用されていないため、出力はオリジナルで再現可能です。

プロジェクトはこのスキルのフォルダ（このファイルを保持するフォルダ。以下<skill>と呼びます）にあります。コマンドはそこで実行してください。

0. セッションでの初回

cd <skill> して node_modules/ が存在するか確認します。存在しない場合は npm install を実行します（約1分、Node 18+が必要です）。
npm run list で39のスタイルすべてを番号、スラッグ、1行の外観とともに表示します。
最初のレンダリングではヘッドレスChromeを一度ダウンロードします（約100 MB）。インターネット接続が必要です。

よくあるリクエスト：「<アイデア> の5秒動画を <スタイル> スタイルで作って」

これがメインの仕事です（そしてこのスキルを紹介する投稿のプロンプトです）。アイデアが不明瞭でない限り、質問せずに最後まで実行してください：

作業フォルダ： ユーザーの現在の作業フォルダ内にある animation-films/ を使用します。存在しない場合は、そのフォルダから node <skill>/scripts/new-project.mjs animation-films で作成し、cd animation-films && npm install を実行します（初回以降は高速です）。存在する場合（フォローアップの場合）、そのまま再利用します。
スタイルを選択 リクエストから（セクション1）。スタイル名がない場合は、アイデアに合う3つを提案して尋ねます。
ストーリーを計画 6つのビート（セクション3）に沿って短い表にまとめます。1つのメッセージで表示し、そのまま続行します。曖昧でない限り待機しません。
まず形状： ユーザーのオブジェクト（動作主体、容器、流れるもの、上昇するもの）を src/films/<idea>-shapes.ts に、story.ts 内の P と同じ座標系のSVGパスとして配置します。先頭にビート表をコメントとして追加します。このアイデアのすべてのスタイルバージョンはこの1つのファイルからインポートします。
ビルド src/films/<idea>-<style>.tsx をスタイルのコンポーネント（セクション3）から作成し、shapesファイルを使用して、src/films/index.ts に <idea>-<style> というIDで登録します。
確認： npm run render -- <idea>-<style> --frames を実行し、6つのフレームすべてを確認します（セクション5）。修正して繰り返します。
納品： npm run render -- <idea>-<style> --final を実行し、out/<idea>-<style>.mp4 の完全なパスをユーザーに伝えます。別のスタイルをリクエストできることを伝えます（「今度はピクセルアートで」）。

スタイル変更のフォローアップ（「じゃあピクセルアートで」「水彩で試して」「同じのを木版画で」）： 同じ animation-films/ フォルダに留まり、同じアイデア、ビート表、shapesファイルを維持し、新しいスタイルのコンポーネントから新しい src/films/<idea>-<new-style>.tsx をビルドします。以前のバージョンと一緒に登録し（上書きしない）、フレームを確認し、最終レンダリングを行い、新しいパスを提供します。ユーザーがスタイルを大まかに指定した場合（「8ビット」「古い映画」「チョーク」）、セクション1でマッピングします。3Dルックのスタイル（57、58、59、62、80）はオブジェクトを3Dメッシュとして構築するため、新しいオブジェクトの交換にはより多くの作業が必要です：src/styles/3d/mesh.ts のヘルパーを使用して、形状を単純な旋盤メッシュまたはボックスメッシュに変換します。

1. スタイルの選択

ユーザーが指定していない場合は、どのスタイルが希望かを尋ねます。ユーザーが不明な場合は、ファミリーごとにグループ化された npm run list と README.md のギャラリー（各スタイルには media/thumbs/ に動くプレビュー、media/videos/ に720×900のMP4があります）を表示します。大まかにマッピングします：「Japanese print」→ 33 Ukiyo-e、「chalk」→ 02 Chalkboard、「8-bit」または「retro game」→ 64 Pixel art RPG、「clay」→ 62 Claymation、「Lego-like」→ 58 Brick toy（画面上ではLegoと呼ばない）、「old movie」→ 70 Silent film または 71 Newsreel、「sci-fi screen」→ 84 Hologram HUD。

ファミリー	スタイル（番号、スラッグ）
ボードに描画	01 whiteboard · 02 chalkboard · 05 notepad-doodle · 06 blueprint
手描きとペイント	08 hand-drawn · 09 urban-sketch · 10 crayon-book · 11 watercolour · 13 one-line · 16 cel-line-boil
カートゥーン	17 flat-vector · 21 cel-anime-80s · 22 stick-figure
紙とパペット	23 cut-out · 24 red-papercut · 25 paper-pop-up · 27 shadow-puppet
版画とクラフト	28 woodcut · 29 engraving · 31 silkscreen-poster · 33 ukiyo-e · 34 art-deco · 35 stained-glass
グラフィックと解説	39 memphis-diorama · 51 sticker-explainer · 52 math-diagram
3Dルック	57 low-poly-island · 58 brick-toy · 59 glass-product · 62 claymation · 80 lidar-survey
映画時代	70 silent-film · 71 newsreel
画面と科学	64 pixel-art-rpg · 81 microscope · 84 hologram-hud · 85 circuit-board
抽象	87 liquid-motion · 89 generative-abstract

src/catalog.ts が単一のリストです：番号、コンポジションID（33-ukiyo-e）、名前、ファミリー、外観、スタイルが表示する画面上のテキスト、コードが存在するファイル。

2. 組み込みスタイルをそのまま表示

npm run render -- 33            # 720x900 プレビュー  -> out/33-ukiyo-e_preview.mp4  （数秒から1分）
npm run render -- 33 --final    # 2160x2700 マスター -> out/33-ukiyo-e.mp4          （crf 16）
npm run render -- 33 --frames   # 6つの確認フレーム   -> out/33-ukiyo-e_frames/ （ffmpegがインストールされていればコンタクトシートも）
npm run render -- 33 --still 75 # フレーム75の1枚のPNG

スタイルは番号、ID、スラッグ、または名前の一部（ukiyo、pixel、stained）で指定できます。既製の720×900動画はすでに media/videos/ にあり、完全な2160×2700マスターはGitHubリリースページにあるため、スタイルを表示するだけならレンダリングはまったく必要ありません。

3. ユーザーのストーリーやオブジェクトで再構成

ストーリーは src/story.ts で固定されています。タイミングは維持し、描画されるものを変更します。これにより、新しいフィルムが初回から正しく出力されます：すべてのスタイルはこれらのビートをどのように演出するかを既に知っています。

ビート（30fpsでのフレーム、5秒の動画では決して移動しないでください）：

フレーム	ビート	`storyAt(f)` からの値
0–24	動作主体が右から入場	`kx, ky`
24–42	準備（傾く）	`tilt`（0 → −38°）
42–96	メインアクション（注ぐ）	`streaming`、`stream`（`tip` からカップへのSVGパス）
44–100	結果の成長（カップが満たされる）	`level` 0 → 1、`surface`（チャイの楕円）
96–126	終了と退場	`tilt` が0に戻る、`kx` がスライドアウト
104–150	余韻（湯気が立ち上る）	`steam[0..2]` 0 → 1、`steamPath(i, p, t0)` で描画

story.ts の P は、カップ（kulhadBody、kulhadOutline、rim）とやかん（kettleBody、kettleLid、kettleSpout、kettleHandle、kettleBand、および KNOB）のSVGパスを保持します。やかんは自身の原点を中心に描画され、translate(kx, ky) rotate(tilt) で配置されます。

最初にユーザーのストーリーを同じ6つのビートにマッピングし、短い表にしてユーザーに表示します。例：

ユーザーのアイデア	動作主体（やかん）	アクション（注ぐ）	結果（満たす）	余韻（湯気）
マグカップへのコーヒー	コーヒーポット	コーヒーの流れ	マグが満たされる	湯気
植物への水やり	じょうろ	水滴	土が暗くなり、`level` に応じて芽が成長	2枚の葉が開く
貯金	コインを持った手	コインが落ちる	貯金箱が満たされる（`level` → コインの山）	キラキラ
ペンキ缶への塗料	ペンキ缶	濃いペンキ	缶が満たされる	滴が落ち着く
データアップロード（抽象または情報スタイル）	雲	パケットが `stream` に沿って移動	`level` でバーまたはゲージが満たされる	チェックマークが上がる

次に構築します：

インストールされたスキルをクリーンに保つため、別のプロジェクトで作業します：デフォルトではユーザーの現在のフォルダ内の animation-films/（上記「よくあるリクエスト」を参照）、node <skill>/scripts/new-project.mjs <folder> で作成し、その中で npm install を実行します。<skill> 内にユーザーのフィルムを構築しないでください。
選択したスタイルのコンポーネントをそのファイル（src/catalog.ts を参照）から src/films/<film-name>.tsx に、それがインポートするヘルパーとともにコピーします。39のオリジナルファイルをその場で編集しないでください：それらはリファレンスです。
タイミングではなく形状を置き換えます：やかんとカップのパスをユーザーのオブジェクトに交換し（同じくらいのサイズと位置を維持：カップは中央x 540、リムはy ≈ 800に配置；動作主体は静止時はおおよそ(796, 324)で、「注ぎ口」はローカルポイント(−251, −62)）、液体の色を変更し、立ち上るものを変更します。スタイル独自のマテリアル、パレットロジック、フィルター、テクスチャ、モーションキャラクター（手作りメディアでは2または3フレームごとにステップ、デジタルではスムーズ、フィルムではフリッカー）を維持します。
スタイルにテキストが表示される場合（カタログの text フィールドにリストされています：51、52、64、70、71、84、85にテキストが表示されます）、新しいストーリー用に書き換えます：短く、平易な英語で、ストーリーについてのみ。
フィルムを src/films/index.ts に登録し、レンダリングします（セクション4）。

より長いまたは異なるストーリー（より多くのビート、2つの動作主体、カメラ移動）：story.ts の隣に（例えば src/films/my-story.ts）新しいストーリーファイルを作成し、独自の storyAt(f) で描画に必要なすべての値を返し、先頭の表に新しいビートをリストし、フィルムに durationInFrames を設定し、「ストーリーファイルがすべてのタイミングを所有し、スタイルファイルがすべての外観を所有する」というルールを維持します。スタイルが手作りに見えることを意図されている場合にのみ、フレームを量子化します（Math.floor(f / 2) * 2）。

コードのルール：決定論的のみ（Math.random() や Date は使用不可；フレームまたはインデックスのシード付き関数を使用）、一意のフィルターとclipPath ID、フォントは @remotion/google-fonts/<Font> 経由でモジュールレベルで loadFont() を使用、package.json を超えるものはインストールしない。

4. レンダリング

目的	コマンド
クイックルック	`npm run render -- <film-or-style>`（720×900、crf 23）
最終版	`npm run render -- <film-or-style> --final`（2160×2700、crf 16）
`src/films` からのフィルム	`npm run render -- <film-id> --final`（同じフラグが使用可能：`--frames`、`--still 75`）
ライブ編集	`npm run studio` でブラウザにRemotion Studioを開く

3Dルックのスタイル（57、58、59、62、80）は、1080幅の1.5倍（80は1.25倍）の解像度でソフトウェアレンダリングされたシーンをキャンバスに描画し、その後2160に引き伸ばすため、他のスタイルよりも少しソフトで低速です。よりシャープな最終版を得るには、src/catalog.ts 内の glView(...) の第2引数を上げてください（2 = ネイティブ4K、約2倍遅くなります）。

5. 引き渡す前の出力確認

npm run render -- <id> --frames を実行し、すべてのフレームを確認します（PNGを読んでください）。その後、修正して再レンダリングします。2〜3回のパスを許可します。

ストーリーが読み取れるか： フレーム50で何かが明らかに注がれており、75で容器が目に見えて満たされており、149で余韻が見える。
フレーム端でクリッピングされていない： 動作主体が完全に入場し、完全に退場している。
レイヤリング： 液体は容器の内側に留まり、流れは容器の中に入っている（手前のリムの前ではない）、湯気は表面から立ち上っている。
スタイルが1つのフレームから読み取れる： スタイルを知っている人が静止画からそのスタイルを名指しできること。2つのスタイルが互いの色違いに見えてはならない。
コントラスト： 液体と流れが背景に対して見え、濁っていない。
モーションキャラクター： メディアが手作りの場合はステップ送り、デジタルの場合はスムーズ；意図しないフリッカーがない。
テキスト： 意図した単語のみで、綴りが正しく、フレーム内に収まっている。
コンテンツルール（下記）のすべてを満たしている。最後にプレビューMP4を最初から最後まで一度視聴し、その後最終版をレンダリングします。

6. コンテンツルール（常に）

実際のブランド、ロゴ、製品、人物、チャンネル名、TVネットワークは禁止、画面上に商標名も禁止。「Brick toy」は一般的な玩具ブロックであり、ブランド名ではありません。
実際の地図、場所、国境は禁止、旗、政治シンボル、スローガンも禁止。風景がある場合も、認識可能な地理のない架空のもの。
特定の映画、番組、タイトルシーケンス、ゲーム、キャラクター、または既知のキャラクターのシルエットやスプライトのコピーは禁止。 スタイルやジャンルは許可されますが、特定の既存作品は許可されません。
でっち上げの事実は禁止： 偽の統計、価格、日付、引用、情報源は禁止。データスタイルはストーリー自身の値（フィルレベルなど）のみをプロットし、それ以外はプロットしません。
テキストはスタイルがタイポグラフィック、放送、またはゲームUIの場合のみ、そしてストーリー自体に関する短い英語。
オリジナルに保つ：ユーザーのストーリー、あなた自身の描画、技法としてのスタイル。

ファイル

パス	内容
`src/story.ts`	ストーリー：サイズ、タイミング、ビート、オブジェクトパス、`storyAt(f)` と `steamPath()`
`src/kit.tsx`	共有ヘルパー：`Stage`（SVGステージ）、`Paper`（紙目）、`Rough`（ぐらつき変位）、`region`
`src/catalog.ts`	39のスタイル：番号、ID、名前、ファミリー、外観、画面上のテキスト、ファイル、コンポーネント
`src/styles/<family>/`	描画コード、技法ごとにグループ化
`src/films/`	ユーザー自身のフィルム
`src/Root.tsx`、`src/index.ts`	すべてのスタイルとフィルムをRemotionコンポジションとして登録
`scripts/render.mjs`	`npm run list` / `npm run render`
`scripts/new-project.mjs`	`npm run new -- <folder>` でコードを新しいプロジェクトにコピー
`media/videos/`、`media/thumbs/`	すべてのスタイルの720×900 MP4とアニメーションWebP

アニメーションスタイル