ピクセル街の短編

ピクセル短編映画（Remotion + three.js + ピクセルスプライト）

滑らかな3D世界、ピクセルアートの人物。すべて（人物、建物、テクスチャ、音楽、効果音）はコードで描画または合成されるため、結果はオリジナルであり、アセットやライセンスは不要です。テンプレートは完全で動作するスターターです。このファイルだけあれば十分です。

開始

新規プロジェクト（template/ をコピー、インストール、音楽とサウンドの生成、型チェック）:

~/.claude/skills/pixel-film/bin/new-film.sh <folder>
cd <folder> && npm run studio      # コンポジション: Film（36秒スターター）と CharSheet（全人物とポーズ）

既存のRemotionプロジェクト内の場合: template/src/film/、template/src/components/ui.tsx、template/src/theme.ts、template/scripts/、template/public/fonts/ をコピーし、さらに template/package.json から依存関係（three、@remotion/three、@react-three/fiber、@types/three、@remotion/bundler、@remotion/renderer）を追加します。すべてのRemotionパッケージは同じバージョンにしてください。

構築前に合意すること

作業を変更する場合のみ質問し、それ以外は選択して選択内容を伝えてください。

• フォーマット. 16:9（1920×1080）は、通り、追跡ショット、YouTubeやFacebookフィードに適しています。9:16（1080×1920）はReels/TikTok/Shortsに適していますが、フレームが狭い（水平視野が約半分）ため、ワイドショットや肩越しショットを再考する必要があります。不明な場合は質問してください：すべてのショットが変わります。
• ストーリーと長さ. 2秒バー（30fpsで60フレーム）の開始時刻を持つシーンの表として書いてください：何が起こるか、誰が何を言うか、時間帯、カメラ。45～80秒が広告や短編に適しています。
• 言語. タイトルカードと字幕は視聴者の言語にしてください。
• 何を見せるか（製品やアプリの場合）：フィーチャーのはっきりした瞬間を、音楽のドロップに合わせて、実際の製品を使用してください（「実際のアプリを見せる」を参照）。

構成要素（template/src）

ファイル	説明	カスタマイズ
film/people.ts	ピクセル人物、64×112、キャンバス図形で描画してからピクセルアートに変換（パレットに色をスナップ、光源から遠い側をセルシェーディング、パーツ間を濃い線、輪郭）。ビュー：正面、横（歩行サイクル walk0–3）、背面。ポーズ：idle blink talk happy wave think worried phone pay、sideIdle sideTalk、back backPhone、sitPhone sitHappy。サンプルキャスト：owner kid uncle woman grandma man。	PEOPLE：肌、髪と hairStyle（お団子、ショート、ポニー、坊主、キャップ）、トップス/ボトムス/靴の色、topDots、dress、apron、sleeveless、glasses、mustache、belly、kid、iris。CharSheetで確認してください。新しい衣装、小道具、髪型は drawPerson、face、hairFront に追加します。
film/Street3D.tsx	セット。中央に店舗：内部（商品棚、カウンター、電球、冷凍庫、スツール）、正面（カウンター上の広い開口部、オプションのワイヤーグリルと垂れ下がりストリップ、看板、カウンターボード、日除け）。隣接（ガラス張りの店、ストライプの日除けがあるシャッター店、住宅）、二階（バルコニーと夜に灯るジャロジー窓）、歩道、道路、ランプとオプションの垂れ下がりワイヤー付きの柱、木、植物、テーブルと椅子。照明は time によって変化（0朝、1昼、2ゴールデンアワー、3夕暮れ、4夜；端数はブレンド）、影、空、星、霧、ランプの輝き。人物は光る看板で影を落とします。オプションで items（カウンター上の商品）、cat、fx.beam / fx.scanX（カウンターをスキャンする電話）。	SET の先頭：看板の文字と色、壁の色、カウンターボード、グリル、垂れ下がりストリップ、商品（public/products/<name>.png）、隣接店の名前と色、上階、ワイヤー。座標：店舗正面は z = 1.2（開口部 x −2..2、y 1..2.3、カウンター上面 y = 1.0）、カウンターの後ろの人物は [0, 0, 0.25]、正面の客は [0.7, 0.12, 1.95]；歩道上面 y = 0.12（z 1.2 から 3.6）、その先が道路；建物は x 方向に −19 から 19。別の種類の場所（カフェ、オフィス、市場）の場合は、JSX内の店舗パーツを変更します：単純なボックス、平面、キャンバステクスチャです。
film/kit.tsx	camMove（イージングされたカメラキーフレーム＋手持ちブレ）、who（パス上の人物：横を向いて進行方向に向かって歩く、それ以外はスケジュールされたポーズ；アイドル中はまばたき）、headAt（頭上の画面ポイント）、Line（話者色付き字幕）、Card（大きなキャプションまたはタイムカード）、Sfx、steps（足音）、PhoneIn（アプリ画面付き電話）、Dim、Fade、num。	SPEAKER_COLORS；子供の頭の高さ用 HEAD。
film/Look.tsx	FilmLook：太陽の側からの太陽光線、時間帯によるカラーグレード、ビネット、グレイン、レターボックスバー。	すべての3Dシーンに同じ time で重ねてください。
film/overlay.tsx、film/pixel.ts	頭上ピクセルアイコン（bulb sweat heart question coin wifiOff clock zzz）および FoundBox（見つけたアイテム周りのボックスとカウント％ラベル）。	アイコンは pixel.ts 内の小さな文字グリッドです。
components/ui.tsx	Phone：1080×1920のスクリーンショットを表示する電話フレーム、ズームキーフレーム（cams）、タップ、ワイプ付き。	—
film/Film.tsx	スターター：朝のクレーンでタイトルと追跡ウォーク；ゴールデンアワーの二人会話ショット；夜、全員が手を振り、引きで上昇、エンドカード。	ストーリーに置き換えてください。
scripts/make-music.mjs + music-plan.json	オリジナルのアップビートトラック（120BPM、C–G–Am–F；マリンバ、パッド、ベース、リードフック、ライザー、最終ヒット）を計画に従って配置、さらに映画的なサウンド（ウーッシュ、ポップ、タップ、チック、ビープ、チャチン、チャイム、シャッター、スキャン、ディテクト、チェック、スパークル、インパクト、プリンター、スタンプ、ページ、ウォンプ）。	計画（秒単位）：sections（イントロ／メイン／ブレイク／エンド）、lead と up の範囲、hits（ドロップ）、final（終了4秒前）。
scripts/make-sfx.mjs	public/audio/8bit/ 内の8ビットサウンド（トーク、コイン、アイデア、キャッシュ、ステップ、ジャンプ、セレクト、完了、スキャン、ディテクト、ウォンプ、ポップ、タップ、ウーッシュ）とオプションのチップチューントラック。	—
scripts/capture-screens.mjs	Webアプリの実際の画面を電話スクリーンショットとして取得（以下参照）。	scripts/shots.json
scripts/stills.mjs、scripts/audio-check.mjs	長時間レンダリング前にフレームと音楽を確認。	—

カメラ文法（映画らしくするもの）

• オープニングはクレーンで：通りを高く広く捉え、街頭レベルに降りてくる（[-5, 7.5, 21] → [-1.5, 2.6, 13.5]、fov 34）。
• 追跡：横から歩く人物を追う：カメラ x = その人物の x + 0.9、z ≈ 7.4、y ≈ 1.35、その人物を見る、fov 30。
• ツーショットは店先で客側から、客の背後からではなく（客が x 0.7 に立っているときカメラ x ≈ −0.9）、そうしないと客のスプライトが相手を隠します。
• クローズアップ：ゆっくりとしたプッシュイン（fov 24–28）でカメラはカウンターの高さより上（y ≈ 2.1、y ≈ 1.36 を見る）。カウンター上のものが顔を覆わないようにします。
• 肩越しは店内から、backPhone ポーズの誰かの後ろから：その人物はフレーム下部、カウンターと外の客が見えます。
• 一列の人物：それに沿って横にトラック。
• エンディング：全員がカメラ近くで手を振り、その後引きでかつ上昇し通り全体を（[0, 1.6, 7.6] → [0, 10.5, 27]、上を見上げ [0, 3.6, 0]）、その上にエンドカード、その後フェードアウト。
• タイムカード（MORNING, NOON, GOLDEN HOUR, NIGHT…）は光源が変わるときに上部に；会話の字幕は下部に（映画サイズでは吹き出しより読みやすい）。
• シーンは小節線（60フレームの倍数）で開始し、音楽計画を設定してドロップがキーモーメントに、最終ヒットがエンドカードに合うようにします。

実際のアプリを見せる

モックアップではなく実際の製品を見せてください。Webアプリ（またはモバイルアプリのWebビルド）の場合：架空のデータをシードし、node scripts/capture-screens.mjs scripts/shots.json を実行します（npm i -D playwright && npx playwright install chromium が必要）。1080×1920の電話画面を public/shots/ に撮影します。"camera" にJPEGを与えると、アプリのカメラはその画像を見るため、スキャンや認識機能が実際に動作します；そのシーンは実際のブランドではなく、架空の製品（SVG → sharpまたはcanvasでJPEG）で描画します。画面を PhoneIn / Phone に tap/select サウンドに合わせたタップとともに配置します。映画に表示される数字（価格、%一致）は、アプリが実際に生成したものであるべきです。

確認してからレンダリング

1. npm run stills -- 100 400 900 … → out/stills/*.jpeg を半分のサイズで出力。すべてのシーンからフレームを確認：人物同士の隠れ、顔の隠れ、看板上のテキスト、昼のように見える夜、混雑したエリアの字幕。レンダリング前に修正してください；フルレンダリングは遅いです。
2. node scripts/audio-check.mjs：250Hz以下が約65%未満、250–2000Hzが30%以上でないと、電話やノートPCのスピーカーでは音楽が何も聞こえないように聞こえます。
3. npm run render（--gl=swangle：CPU上のWebGL）。影あり1080pでは1秒あたり数フレームかかります（80秒の映画で小さなサーバーなら約2時間）；バックグラウンドで実行してください。または、GPUを使用してブラウザのスタジオからレンダリングすることもできます。

落とし穴

• 縦長は狭い：カメラ軸から1m横、2m先の人物はフレーム外になります。9:16では、被写体を垂直に分離します（カメラを高く、近い人物をフレーム下部に）。
• スプライトがカメラを遮る：カメラと被写体の間の人物がフレームを埋め尽くします（大きな平面です）。人物だけでなくカメラも動かしてください。
• 低音が強い音楽は小さなスピーカーでは無音に聞こえる：ベースに倍音を持たせ、コードとメロディーを中音域に保ち、ハードなローパスは避けてください。
• 夜が明るすぎる：アンビエントとスカイライトを低く保ち、ランプ、看板、灯った窓にシーンを照らさせてください（プリセットはそうなっています）。
• テクスチャ：非同期読み込みは delayRender / continueRender でラップし、存在しないファイルを要求しないでください（レンダリングがハングします）。
• 決定論：フレームや生成オーディオで Math.random を使用しないでください（シード付き乱数、またはRemotionの random(seed) を使用）。これにより再レンダリングが一致します。
• フォントは public/fonts に同梱されています（Poppins、Caveat、Press Start 2P；SIL Open Font License）。そのためレンダリングにインターネットは不要です。
• Remotion独自のffmpeg（node_modules/@remotion/compositor-*/ffmpeg）はフィルタが少ない：解析用にPCM WAVにデコード、libmp3lameでMP3エンコード、-ss でフレーム取得。

ルール

• オリジナルのキャラクター、場所、製品のみ：実際のブランド、ロゴ、人物は不可。また、特定の既存のゲーム、映画、番組（そのキャラクター、アート、外観）を名前を変えても再現しないでください。
• 広告の主張は製品に対して真実である必要があります。ユーザーが投稿前に確認しなければならないことを指摘してください（例：「App Storeで無料」は公開されてからのみ）。