title-sequence-3d

コードで構築する3Dタイトルシーケンス

最初の3秒で、誰かが見続けるかどうかが決まります。このスキルでは、照明のある3Dシーンの中をカメラが移動し、最後に質問やタイトルが表示される、短いシネマティックなオープニングを作成します。

始める前に： brand.md と MOTION.md があれば、まず読んでください。ない場合は、先に brand-intake を実行するか、HEXカラーコード、フォント、ロゴファイルを確認してください。これらなしに、ブランドに合っていると判断してはいけません。

ステップ1：4つの項目を確認してから、返答を待つ

1. 最後に表示する一文。 例：「最近、どのブランドロゴも似ているのはなぜ？」
2. 舞台。 ストーリーに合う場所を1つ選びます。夜の街、無人のオフィス、午前5時のデスク、ステージなどです。デフォルトは雨の降る夜の街です。
3. 登場するオブジェクト。 看板、画面、ポスターに使う、実在の名前やロゴを指定します。ロゴファイルが添付されている場合は、記憶を頼りに描き直さず、必ずそのファイルを使います。
4. ブランドとサイズ。 キーワードに使うアクセントカラーを1色指定します。サイズは1920 x 1080または1080 x 1920です。

レビューのルール（却下された案から得た教訓）

• サウンドは必須です。 無音の解説動画は未完成に感じられます。コードで楽曲を作成します。低音のベッド、ショットが切り替わるたびのヒット音、最後の一文での盛り上がりを加えます。
• 線ではなく、カードと画像を使います。 画面を横切るだけのバーや線は、動きのない印象になります。すべてのショットで、奥行きの中を動くカード、実際の画像、またはオブジェクトを使います。
• ロゴはカードいっぱいに配置し、実際のファイルを使います。 大きな枠の中に小さなロゴが浮いていると、不自然に見えます。
• グリッドは左右対称に保ちます。 カードのサイズと間隔をそろえます。レイアウトが左右非対称だと、ミスのように見えます。
• 目を見張る仕上がりにします。そうでなければ完成ではありません。 最初の3秒で自分のスクロールする親指を止められないなら、残りを作る前に作り直してください。

ステップ2：制作ブリーフ（Claude Codeに貼り付ける）

Build one self-contained HTML file called index.html: a [SECONDS]-second cinematic 3D title sequence at [WIDTH] x [HEIGHT], using Three.js from a pinned version and only the files I attached.

Scene: [WORLD]. Low-poly buildings, wet reflective ground, fine rain. Each object I attached becomes a lit sign: draw the logo file onto a canvas texture, put it on a plane, and give it a soft bloom (UnrealBloomPass, subtle, never blown out).

Camera: one slow, steady dolly forward and slightly up, passing the signs. No shake, no spins.

Title: in the last third, [LINE] lands in bold condensed type, lower left, in white with [KEY WORDS] in [ACCENT]. Keep the ground under the title dark enough that reflections never show through the letters.

Sound (optional): a low drone plus soft rain, written in code, faded in over the first second.

Build rules: every frame is worked out from the time alone, including rain (seeded, never Math.random at render time). Add window.seek(seconds). Wait for seek when the URL has ?render.

After the build: capture frames at 1s, the middle and the last second. Check that every sign is readable at phone size, nothing mirrored sits behind the title, and every logo matches its file.

ステップ3：確認する

• 最初の1秒で、スライドショーではなく映画のように見えていますか？
• タイトルはスマートフォンでも読みやすいですか？
• 小さなラベル（日付、キャプション）は、必要だと思うサイズの少なくとも2倍になっていますか？

ステップ4：書き出す

HyperFrames（無料、オープンソース）：npx skills add heygen-com/hyperframes を実行し、続けて npx hyperframes render を実行します。メールやニュースレター向けには、5MB未満の9秒GIFも作成してください（8fps、幅540px、雨を圧縮しやすくするため弱めのノイズ除去を適用します）。