scroll-world

scroll-world

スクロールでカメラを動かすランディングページを生成します。シーンの外側から内部へ潜り込み、そこから飛び出して次のシーンへと、カットが見えないまま連続して移動します。ビジュアルはAI生成（Higgsfield）で、ページではスクロール位置に応じてプリレンダリング済みの動画をスクラブするだけです。これはAppleのスクロール連動型製品ページで使われているのと同じ手法です。カメラは実際に動き、スクロールは時間を進めるだけです。

生成するもの： N枚のシーン画像（アンカー承認後）→ N本の「ダイブイン」カメラクリップ → 連続するシーンをシームレスにつなぐ N-1本の「コネクター」クリップ → エンコード済みクリップと抽出済みポスター画像 → SSIMによる自動シームチェック → チェーン全体をひと続きのフライトとして再生する、移植可能なスクラブエンジン。チェーンクリップは、デフォルトではまず低コストのプレビズティアでレンダリングされます。フルモデルのクレジットを使うのは、ユーザーがドラフトを承認した後だけです。

成否を左右する唯一のルール： シームはフレーム単位で完全一致している必要があります。コネクターを生成する前に、シームレスなチェーンを読んでください。ここを間違えるのが最もよくある失敗で、シーン間に目に見える「ポップ」が発生します。

フロントエンドフレームワークを前提にしないでください。references/scrub-engine.jsのスクラブエンジンは自己完結型のバニラJSです（独自のDOMを構築し、指定されたコンテナーに独自のCSSを挿入するため）。プレーンなHTML、Next.js、Vue、Pythonで配信するページなど、どこにでも組み込めます。このスキルの価値はHiggsfieldのパイプライン、プロンプト、シームの手法にあり、フレームワークではありません。

---

Step 0 — ブートストラップ

1. Higgsfield CLI。 $PATHにhiggsfieldがない場合は、higgsfield-generateスキルの手順に従ってインストールします。higgsfield workspace listで認証エラーが発生する場合は、ユーザーにhiggsfield auth loginを実行してもらいます（対話型OAuthのため、こちらでは実行できません）。必要に応じて、higgsfield workspace set <id>も実行してもらいます。十分なクレジットがあることを確認してください。実行には、N枚の画像生成とN本の動画生成（アーキテクチャA）、または(2N-1)本の動画生成（アーキテクチャB）に加え、再生成の分が必要です。Step 1で設定する予算ティアによってNが決まります。
2. $PATHにffmpeg / ffprobeが必要です（フレームの抽出とエンコードに使用します）。
3. フローティングシーンにしたい場合は、背景を切り抜くための画像ツールが必要です。PIL（python3 -c "import PIL"）、またはcwebp/sipsを使用します。これは任意です。Step 3を参照してください。
4. 注意点：macOSに付属するbash 3.2ではdeclare -Aを使用できないため、スクリプトで連想配列を使わないでください。Higgsfieldの生成には1件あたり3～8分かかるため、必ずバックグラウンドで実行して状態を確認してください。フォアグラウンドで処理をブロックする呼び出しはしないでください。メディアフラグではジョブUUIDによる参照は拒否されます。--image/--start-image/--end-imageにはローカルファイルのパスを渡してください。動画モデルによって受け付けるパラメーター（例：Klingには--resolutionがありません）や、開始画像・終了画像による条件付けに対応しているかどうかが異なります。まとめて実行する前に、higgsfield model get <job_type>で選択したモデルのスキーマを確認し、Step 4のモデル表を参照してください。

---

Step 1 — ユーザーへのヒアリング

被写体はユーザーに決めてもらいます。作り物の選択肢を並べず、自然な文章で自由回答の質問をしてください。 業界のリストを勝手に作るとユーザーを特定の方向に誘導し、相手のビジネスをこちらが決めているように受け取られます。ユーザー自身の言葉で回答してもらってください（実際のビジネス、クライアントのビジネス、または自由なアイデア）。選択肢付きのAskUserQuestionは、以下のような本当に選択肢を列挙できる、比較的重要度の低い項目（アートディレクションとブランドキットの方針）に限って使用します。その場合でも、「その他」を用意し、独自の回答もできることを伝えてください。無理なくデフォルトを設定できない項目だけを質問してください。以下を確認します。

1. テーマ（選択肢ではなく、自由に尋ねます）—「この世界をどんなテーマにしましょうか？ご自身のビジネス、お客様のビジネス、どんなアイデアでも構いません。単語ひとつでも一文でも大丈夫です。」業界／製品と一行の紹介文（例：「茶葉から最後のひと口までを届ける、バブルティーの会社」）、およびブランド名があれば記録します。なければ、後ほどこちらから提案します。
2. ブランドキット — 3つの方法を提示し、ひとつ選んでもらいます。
   • URL からインポート：higgsfield marketing-studio brand-kits fetch --url <site> --wait （名前、色、トーンを取得します）。続いて brand-kits list --json で内容を読み返します。
   • ユーザーからパレット、名前、トーンを直接提示してもらいます。
   • パレットと名前を提案し、承認してもらいます。 名前付きの16進カラー値を4～6個、表示名、トーンを表す単語を1～2個記録します。
3. アートディレクション — デフォルトは「柔らかなマット仕上げのローポリクレイジオラマ、アイソメトリック、ティルトシフトのミニチュア、暖かな光」です。ほかの案（フラットなペーパークラフト、光沢のあるおもちゃ、クレイアニメ、ネオンの夜）も提示します。どれを選んでも、全シーンのプロンプトでそのまま再利用する共通のスタイル導入文になります（これによって世界に一貫性が生まれます）。
4. 予算の段階 — ジャーニーを提案する前に必ず尋ねます。動画生成がコストの大部分を占めます。 請求額はシーン数と構成に応じて変わります。構成A（前方へのテイク）では動画が N 本、構成B（ダイブ＋コネクター）では動画が 2N-1 本必要で、さらに静止画が N 枚、再生成用に約20～30％の余裕が必要です。構成Bで6シーンの場合、生成は約17回となり、サブスクリプションの利用枠を大きく消費します。具体的な数値を示して AskUserQuestion を使います。
   • 節約プラン（約8回の生成） — 4シーン、構成A（静止画4枚＋区間4本）、プレビジュアライゼーションは省略（小規模な実行では、ドラフト工程より再生成のほうが低コストです）。同じサイト、同じ途切れない飛行で、6ビートではなく4ビートにします。
   • 標準プラン（約11～13回の生成） — 5シーン。構成A（10回）または構成B（5＋9＝14回）。
   • ショーケース（17回以上の生成） — 6～7シーン、構成Bのフルワールド、プレビジュアライゼーション工程、モバイル向けプラン。 シーンが少なくても、サイトが薄くなるわけではありません。 3～4個の、よく選ばれたビートで、完成した世界として見せられます。それぞれのシーンのスクロール距離を長めに（scroll: 1.6–2）して linger を加え、各ビートでコピーにより多くの情報を伝えます。予算不足で作る6シーンより、まとまりのある4シーンのほうが優れています。 節約プランで構成Bの美しさを実現したい場合は、さらに2つの方法があります。コネクターは個別に省略できます（null のスロットでは、その継ぎ目を直接クロスフェードします。正直なトレードオフとして、その切り替わりは飛行ではなくディゾルブになります。主役となるシーンの前後の継ぎ目にコネクターを使いましょう）。また、ユーザーが720pでよければ、最終モデルに seedance_2_0_mini を使えます。フレームロックに対応しているため、サイトの映像は途切れません。
5. ジャーニー（セクション） — カメラが順番に飛んでいくシーンを、予算の段階に合わせて設定します。対象のバリューチェーンをもとにセットを提案し、ユーザーに編集してもらいます。ボバの例（ショーケース向け6シーン）：農場 → タピオカキッチン → フラッグシップショップ → デリバリー → コミュニティ広場 → 主役の製品。節約プラン向けの4シーン版：農場 → キッチン → ショップ → 主役の製品。各セクションには、短いテーマの説明（ジオラマに何があるか）、アイブロウ、見出し、本文1行、タグピル0～3個が必要です。最後のセクションは通常、主役の製品とCTAにします。
6. モバイル向けプラン — 必ず尋ねます。追加アセットを黙って生成してはいけません。 どのプランでも、スマートフォンではスクロールアニメーション全体を再生します。エンジンの強化機能（シークの統合、iOSのプライミング＋低電力モード時の静止画フォールバック、セーフエリアCSS、データセーバーによる画質低下）は常に有効です。プランによって決まるのは、存在するアセットだけです。以下の順で選択肢を提示し、クレジット費用を明記して AskUserQuestion を使います。
   • クロップセーフ（デフォルト、追加費用なし） — スマートフォンではデスクトップ用クリップを再生し、中央を切り抜いて縦長に表示します。すべてのプロンプトで、注目対象が中央の安全な範囲に収まる構図をすでに指定しているため（prompts.md）、ほとんどの世界で問題なく表示できます。
   • モバイル用エンコード（おすすめ、追加クレジットなし — エンコード時間のみ） — -m.mp4 の派生ファイル（720p、-g 4、Step 6）を作成し、clipMobile／connectorsMobile／posterMobile を設定（Step 7）して、モバイルでのQAを行います（Step 8）。スマートフォン相当のデバイス（タブレットは対象外 — エンジンは画面サイズで判定し、iPadにはマスターを使用します）では、より軽量なファイルを再生します。
   • ヒーローのリフレーミング（少量の追加クレジットが必要 — 明記してください） — モバイル用エンコードに加え、注目対象を中央のクロップ内に収められない1～2シーン（通常はヒーローとフィナーレ）を9:16で再レンダリングします。シーンごとのモバイル用クリップ／ポスターとして設定します。
   • フル縦長チェーン（最上位プラン、動画クレジット約2倍 — 明記してください） — 縦長9:16のチェーンを別に用意します。縦長の静止画、独自のフレーム引き継ぎ、独自のコネクター、独自のSSIMゲートを使います（アスペクト比をチェーンの途中で混在できません。9:16のクリップは16:9のフレームから続けられません）。Appleが採用している方式です。モバイル用アセットは、クロップではなく、異なるフレームでレンダリングしたものです。モバイルの利用が重要だとユーザーが示した場合、または予算に余裕がある場合に限って提案します。 動画モデルはインタビューで質問する項目ではありません。デフォルトで seedance_2_0 を使用します。ユーザーが希望を指定した場合は、シームをフレームロックできる場合に限り、その希望に従ってください（Step 4 の候補：seedance_2_0、kling3_0、seedance_2_0_mini）。このスキルが出力するのはシームレスな動画のみなので、フレームロックできないモデルは、理由を一行で伝えて断り、代わりに使うことはしません。候補のモデルを使用してください。

インタビューの最後に費用の見積もりを提示し、生成を始める前に明確な承認を得てください。 選択した予算ティアに基づき、料金を具体的な数値で伝えます。画像生成の回数 N ＋動画生成の回数（アーキテクチャ A は N、B は 2N-1。ショーケースの実行ではプレビズにミニティアの一連の生成を追加）＋再生成の予算（NSFW フィルターのため、インテリアでは約 20〜30％増）に加え、モバイルティアの追加分があればそれも提示し、おおよその所要時間も伝えます（生成 1 回あたり 3〜8 分。アーキテクチャ A は逐次実行）。ユーザーが費用を承認するのはここで一度だけです。その後に必要な確認は、アンカースチルの承認（Step 2）とプレビズのレビュー（Step 4）のみです。どちらも無駄な大きな出費を防ぐためのものであり、許可を再確認するためのものではありません。

スクロールの仕組みは固定してください（連続したフライスルー）。これがこのスキルの要点です。ヒアリング項目のチェックリストとコピーの構成については references/prompts.md を参照してください。

---

Step 2 — シーンのスチルを生成する

セクションごとに画像を 1 枚生成し、統一感を出すためにすべて同じスタイルの前置きを使用します。デフォルトのモデルは gpt_image_2 です（鮮明で、アイソメトリックイラストに優れています。背景は無地または白で出力されるため、浮かぶジオラマの「島」に最適です）。ブリーフがキャラクターやカートゥーン中心の場合に限り、nano_banana_2 を使用します（注：nano_banana_2 は CLI のエイリアスであり、nano_banana_pro に解決されます。higgsfield model list ではその名前で表示されません）。

プロンプトの形式（完全なテンプレートは references/prompts.md を参照）：

<STYLE PREAMBLE, identical every time>. On a plain solid <bg> background with a soft
contact shadow. <PALETTE hexes>. No text, no letters, no logos, centered, 3:2.
Subject: <what is in THIS diorama>.

• まずアンカーを生成します。N 枚すべてを最初から一括生成してはいけません。 最も代表的なシーンのアンカースチルを 1 枚生成し、ユーザーに見せて、承認されるまでスタイルの前置きを調整します。承認後にのみ、残りの N-1 枚を、スタイルを固定するために承認済みのアンカーを --image として渡して一括生成します。アンカーでスタイルを外した場合のコストは生成 1 回分ですが、何も確認せず一括生成した後では N 回分になります。これは必須のゲートです。アンカーが承認されるまで先に進まないでください。
• 残りは同時に、切り離して実行します。シーンごとのコマンド： higgsfield generate create gpt_image_2 --prompt "$(cat scene_i.txt)" --image anchor.png --aspect_ratio 3:2 --resolution 2k --quality high --wait --wait-timeout 15m --json > scene_i.json 2>scene_i.err
• 結果 URL は、--wait --json の出力にある .[]0.result_url です。curl でダウンロードします。
• 生成は一時的に失敗する場合があります（HTTP 503）。その場合は失敗したものだけ個別に再生成し、一括生成をやり直さないでください。
• 続行する前に一括生成の結果を確認してください。 すべてが一つのまとまりのある世界として見える必要があります（同じアングル、配色、光）。スタイルが合わないシーンは個別に再生成してください。アンカーによるスタイル固定は引き続き適用されます。

正確な一括生成スクリプト（冪等性あり。再実行時は完了済みのアセットをスキップするため、クラッシュや再生成が発生しても完了済みの作業に再度料金はかかりません）については references/pipeline.md を参照してください。

---

Step 3 — （任意）シーンを浮かせる

ジオラマを無地のボックス内に置くのではなく、雰囲気のある背景の上に浮かせたい場合は、references/knockout.py を使用して単色の背景を透明にします（境界に接続した領域を塗りつぶす方式のため、背景色と一致する内部の色、たとえばクリーム色の壁は保持されます）。その後、webp にエンコードします。シンプルにしたい場合は、ページの背景色をシーンの背景と同じ色にして、この処理を省略してください。

どちらの場合もスチルは残してください。スチルは、動きを減らす設定時のアートワークであり、動画クリップを読み込めない場合のフォールバックです。（読み込み中のポスターはスチルではありません。Step 6 でエンコード済みのクリップから抽出するため、スチルから動画への切り替え時に映像が飛びません。）

---

Step 4 — カメラアーキテクチャ（どちらかを選択。映像の印象を大きく左右します）

シーン間のカメラの動かし方は、品質を左右する最大の要素です。パターンは 2 つあります。美的な方向性に合わせて選んでください。

動画モデル — チェーン全体で1つを選択してください

このスキルで出力できるのはシームレスな動画のみのため、使用できるモデルはシームをフレームロックできるものに限られます。チェーン内の各クリップが --start-image を受け付け、コネクターでは --end-image も必要です。選択基準は好みではなく、この機能の有無です。higgsfield model get <job_type> でモデルを確認し、メディア入力が参照専用（開始／終了画像なし）のものはスキップしてください。そのモデルでできるのは生成の条件付けだけで、ショットを続けることはできないため、物理的にシームを維持できません。以下のスキーマは CLI で確認済みです。

モデル	開始／終了画像	備考
seedance_2_0（デフォルト）	✓ / ✓	チェーン全体（区間クリップとコネクター）に対応します。--mode std --resolution 1080p。NSFW フィルターは特に厳しめです（「注意点」を参照）。
kling3_0	✓ / ✓	チェーン全体に対応します。テスト済み：開始画像と終了画像を指定した --mode std --sound off --duration 5 が受け付けられ、シームもきれいにフレームロックされます。--resolution パラメーターはありません（指定しないでください。--mode std はネイティブ 720pを返します。アップスケールはせず、ffprobe が報告する解像度でエンコードしてください）。サウンドはデフォルトでオンです → --sound off を指定してください。--duration のデフォルトは 5 です。区間クリップでは 10 を試してください。Seedance とは異なるコンテンツフィルターを使用するため、承認済みの NSFW フォールバックです。
seedance_2_0_mini	✓ / ✓	フレームロックを維持する低コストのドラフト用モデルです（720p）。プレビズ用のモデルです。まずここでチェーン全体を実行し、その後、最終版の区間クリップをフルモデルで再レンダリングします。シームレスな状態を保てるため、そのまま引き継げます。

この3つが採用モデルです。どちらのアーキテクチャにも対応しています。(kling3_0_turbo も --start-image を使ってフレームロックできますが、--end-image がないため、アーキテクチャ A 専用で、コネクターは作成できません。また、フラグのセットも異なり、--mode はなく --resolution があります。そのため、そのままではパイプラインに組み込めません。デフォルトの採用モデルには含まれません。アーキテクチャ A の逐次レンダリング時間が実証済みのボトルネックであり、実際に高速であるとベンチマークで確認できた場合に限り、手動で組み込んでください。）

まずプレビズを実施（デフォルトであり、任意の追加手順ではありません）。 実行規模が小さい場合（シーン数が4以下）を除き、まず seedance_2_0_mini でチェーン全体をレンダリングしてください。フレームロックに対応しているため、ジャーニーの順序、カメラの文法、シームの連続性、スクラブに対するコピーのテンポなど、重要な要素すべてをドラフトのコストで検証できます。プレビズのクリップからページを組み立て、フルモデルのクレジットを1つも使う前にユーザーと確認してください。その後、ドラフトのクリップを消去し、$VMODEL を切り替えて最終版を再レンダリングします（静止画は再利用されます。パイプラインは冪等性を備えているため、2回目の処理は機械的に実行できます — references/pipeline.md のセットアップブロックを参照）。

ルール：

• チェーン内のすべてのクリップで、モデルを1つに統一してください。 各レンダラーはそれぞれ異なる動き、色、粒子感を持っています。チェーンの途中でモデルを混在させると、位置の連続性は保たれます（フレームは引き続き受け渡されます）が、レンダリングの特性が変わることで、わずかな違和感が生じます。承認済みの例外は、問題のある単一のクリップに対する NSFW フォールバックだけです（「注意点」を参照）。5秒のコネクター1つで生じるわずかな特性の変化は、コネクターが欠落するよりも望ましいです。
• デフォルトは seedance_2_0 です。ユーザーが示した好みを尊重するのは、そのモデルが適格な場合（フレームロックに対応している場合）に限ります。適格でない場合はその旨を伝え、対応モデルを使用してください。モデルの指定に応えるために、シームレスでないビルドを出荷してはいけません。
• パイプラインスクリプトでは、モデルを $VMODEL として指定し、モデルごとのフラグもすでに設定してあります（references/pipeline.md）。

A) 前方への連続移動 — 地に足の着いた／リアルな／ウォークスルー形式に推奨

最初のシーンから最後のシーンまで、前方に滑らかに進み続けるカメラで、ワンカットとして撮影します。 各区間を順番に生成します。leg 0 は scene-0 の静止画から生成し（その中へ前進）、 次の各 leg の --start-image には、直前の leg の実際の最終フレームを指定します（ffmpeg で抽出）。 プロンプトには "continue gliding smoothly FORWARD into [scene i], never pulling back" （または、「カメラの文法」以下のモーション引き継ぎ仕様に従った、区間途中の表現力豊かな動き）を指定し、 --end-image は指定しません。ワイドなエスタブリッシングショットを end-image に指定すると、カメラが後退せざるを得なくなり、これがカクつきの最大の原因です。各区間の最終フレームを抽出して、次の区間に渡します。これにより、すべての継ぎ目でフレームが完全に一致し、カメラも逆行しません。コネクターはありません（ステップ 5 をスキップ）。各区間がそのまま旅の映像になります。各区間を connectors: [] と短めの crossfade（約 0.08）を指定したセクションクリップとして接続します。--end-image を指定しなくても、各区間はそれぞれ異なる部屋に到達します（プロンプトで内容を誘導します）。欠点：厳密に順番どおりに生成する必要があり（並列化できません）、時間もかかります。また、屋内シーンは NSFW フィルターに引っかかるため、再生成を見込んでおきます（各区間につき 3 回試行）。

B) 飛び込み＋空撮コネクター — ジオラマ／ミニチュア／神の視点の世界に限定

「各シーンに飛び込む」クリップに、カメラが上昇して後退し、次のシーンまで飛んで移動するコネクターを組み合わせます（ステップ 5）。この後退によって、各継ぎ目でカメラの進行方向が逆になります（前進して飛び込む → 後退して引き上げる）。ミニチュア／ジオラマの世界では、「地図までズームアウトして、次の島へ飛ぶ」という意図的な演出に見えますが、地に足の着いた一人称視点のウォークスルーでは、唐突な巻き戻し／カクつきに見えます。B は地図のような美学を目指す場合にのみ使用してください。迷った場合は A を使用してください。

カメラの文法 — コンセプトに合った動きを選ぶ（A は「前進のみ」ではありません）

「前進のみ」は、レッグのルールではなく、継ぎ目のルールです。連鎖の物理は次のとおりです。

• 継ぎ目での位置の連続性は、フレームの引き継ぎ（次のレッグは前のレッグの実際の最終フレームから始まります）によって保たれます。
• 継ぎ目での速度の連続性とは、カメラが継ぎ目をまたいで逆方向に動かないことです。これが巻き戻し時のカクつきを防ぎます。
• 1 つのレッグの中では、カメラは自由に動かせます。 1 つのレッグは連続した 1 回のレンダリングなので、途中で破綻する継ぎ目はありません。そのため、周回、クレーンアップ、横方向のトラッキング、さらにはいったん寄ってから引く動きも、クリップ内ならすべて安全です。逆方向への動きが致命的なのは、継ぎ目をまたぐ場合だけです。

そこで、シーン自体の論理に合った表現力豊かな動きを各レッグに与え、モーション引き継ぎの契約を適用してください。各レッグは終盤に、次の目的地に向かうゆっくりと安定した前方ドリフトへ落ち着き（最後の約 1 秒）、各レッグはその同じドリフトを続ける形で始まります。この 2 つの条件はプロンプト内に一字一句そのまま記載してください（テンプレートは references/prompts.md を参照）。

コンセプトに合わせて文法を選びます。

コンセプト／トーン	レッグ中盤の動き
製品／高級小売	主役のオブジェクトの周囲をゆっくり半周し、そのまま通り過ぎる
不動産／ホスピタリティ	出入り口を通るステディカムの滑らかな移動。アトリウムでは穏やかにクレーンアップ
産業／工程／物流	生産ラインに沿った低い位置での横方向のトラッキング、手前の景色に視差を出す
旅行／アウトドア／キャンパス	ドローン風に上昇して景色を見せ、その後、下降するように滑らかに移動
食べ物／クラフト／細部を見せる演出	クラフトの瞬間へ近づき、いったん引いてから進み続ける
遊び心のあるミニチュア（アーキテクチャ B）	急降下と空中ジャンプ — つなぎの動きそのものが文法です

正直なところ、表現力豊かなレッグ中盤の動きは再生成の可能性を高めます。凝った動きを終えたとき、モデルがきれいな前方ドリフトになっていない状態で終わることがあるためです。対策として、最後の 1 秒で落ち着かせる条件は一字一句そのままにし、次のレッグにつなぐ前に各レッグの最終フレームを目視で確認してください（穏やかな前方移動のフレームに見える必要があります。そうでなければ、次のレッグを無駄にする前に再生成します）。表現力豊かなレッグごとに、追加の再生成を約 1 回分見込んでください。単純な前方移動はリスクゼロの既定動作です。シーンそのものを見せ場にするレッグには、これを使ってください。

関連するペース調整のつまみが 2 つエンジンにあります（ステップ 7）。セクションごとの scroll（スクロール距離が長いほど、そのシーンにとどまる時間が長くなります）と、linger（コピーがピークを迎えるタイミングでカメラがシーンの途中にぴたりと静止し、その後、継ぎ目に向けて速度を上げます）です。クリップ内では表現力豊かな動きを使い、スクラブのマッピングでは控えめにしてください。両者の効果は積み重なります。

また、スクロールはスクラバーであることを忘れないでください。訪問者は上方向にもスクロールできるため、動きはすべて逆再生もされます。これは追加作業なしで自然に行われますが、継ぎ目での速度は両方向で一貫している必要がある理由でもあります（前方向では問題なく見える継ぎ目も、速度が反転すると後方向ではカクついて見えます）。

B の場合、シーンごとにカメラの飛行を 1 回行います。高い位置かつ外側から始め、内部へ降下し、構造物が開きます。モデル：上で選んだ連鎖モデル（既定値は seedance_2_0）、--start-image = the scene still。

• 動画をフルフレームにするため、開始画像には単色背景の静止画（背景を透過させたものではありません）を使います。
• プロンプト：「カットのない、シネマティックなカメラの連続した動き。外側の高く離れた位置から、 全体を見渡すところから始める……下降して内部へ飛び込み、 に向かう……屋根や壁がゆっくり開き、内部が現れる。、滑らかで優雅なスローモーション。文字なし。」（テンプレートは references/prompts.md を参照してください。）
• パラメーター（seedance）：--mode std --resolution 1080p --aspect_ratio 16:9 --duration 8。Kling の場合は --resolution（このパラメーターはありません）を削除し、--sound off を追加して、--duration 10 にします。--generate-audio は渡さないでください（seedance ではエラーになり、音声はどうせミュートするため無駄です）。
• 並行してデタッチモードで実行し、それぞれの .result_url からダウンロードします。失敗したものだけを再生成します。元の 1080p ソースは保持してください。次に、そのフレームが必要になります。

---

ステップ 5 — コネクター（アーキテクチャ B のみ）

アーキテクチャ A では、このステップ全体をスキップしてください。フォワードテイクにはコネクターがなく、各レッグはすでにシームレスにつながっています。このステップは B（ジオラマ／ミニチュア）に適用されます。また、ステップ 4 の反転に関する注意事項も確認してください。

コネクタークリップによって、世界が途切れるのではなく、つながっているように感じられます。コネクターはシーン i の終わりから飛び出し、シーン i+1 の冒頭へ入ります。両端のフレームは、隣接するクリップの実際にレンダリングされたフレームでなければなりません。元のジオラマの静止画は使わないでください。

理由：Higgsfield の生成結果は毎回、わずかに異なってレンダリングされます。コネクターが「キッチンのジオラマ」の新たなレンダリングで終わり、次のダイブクリップが同じジオラマの別のレンダリングから始まると、両者が一致せず、継ぎ目にちらつきが生じます。解決策は、正確なピクセルを引き継ぐことです。

For each connector between dive_i and dive_{i+1}:
  start-image = the LAST frame extracted from dive_i's rendered video
  end-image   = the FIRST frame extracted from dive_{i+1}'s rendered video

これで、すべての継ぎ目の両側のフレームが同一になります。 dive_i.end == connector.start および connector.end == dive_{i+1}.start。

静止画ではなく、レンダリング済みのダイブから境界フレームを抽出します。

ffmpeg -sseof -0.15 -i dive_i.mp4   -frames:v 1 -q:v 2 dive_i_last.png    # interior of i
ffmpeg -ss 0      -i dive_{i+1}.mp4 -frames:v 1 -q:v 2 dive_next_first.png # establishing of i+1

コネクターを生成します（--duration 5 で十分です）。コネクターには --end-image が必要なため、モデルがこれを受け付ける必要があります。 roster のモデルならどれでも対応します（seedance_2_0、seedance_2_0_mini、kling3_0）。

higgsfield generate create "$VMODEL" \
  --prompt "$(cat connector_i.txt)" \
  --start-image dive_i_last.png --end-image dive_next_first.png \
  $VOPTS --aspect_ratio 16:9 --duration 5 --wait --json
# seedance: VOPTS="--mode std --resolution 1080p"; kling3_0: VOPTS="--mode std --sound off"

コネクターのプロンプト：「カットなしの、連続したカメラ移動。から上昇して後退し、空へ昇って、つながったミニチュア世界を滑るように横切り、<scene i+1>の上空に到着して、そこへ降下し始める。シームレスで流れるような空撮トランジション。。テキストなし。」（テンプレートは references/prompts.md にあります。）

保険として、Seedance は終端画像に近い状態で着地しますが、ピクセル単位で完全に一致するとは限らないため、エンジンは各継ぎ目に短いクロスフェード（数フレーム）を適用します。フレームを一致させた端点と短いクロスフェードの組み合わせで、目に見えるカットを防ぎます。実際のフレームの引き継ぎを省略して、クロスフェードだけに頼らないでください。大きな内容の飛びはクロスフェードでは隠せません。

引き継ぎが実際に成立したかどうかは機械的に確認できます。ブラウザー QA で判明するのを待たないでください。エンコード後、SSIM 継ぎ目チェック（references/pipeline.md §5c）を実行します。実際のフレームを引き継いだ場合、境界でのスコアは 0.95 以上になります。0.75 未満の場合、端点が静止画または間違ったフレームです。再生成のたびにもう一度実行してください。クリップを 1 つ差し替えるだけで、その両側の継ぎ目にも気づかないうちに影響します。

ステップ 6 — スムーズにシークできるようエンコードする

シークとは、スクロールに応じて video.currentTime を設定することです。重要な点は 2 つありますが、よく誤解されています。

1. シークの動作を左右するのはキーフレームの密度ではなく、シーク可能かどうかです。 多くの静的ホスト（および python -m http.server）は HTTP バイト範囲リクエストを提供しないため、video.seekable が [0,0] に固定され、すべてのシークがフレーム 0 に制限されます。その結果、動画がフリーズしたように見えます。確実な対策は、各クリップを Blob として取得し、メモリ内のオブジェクト URL から再生することです（Blob は常に完全にシーク可能です）。エンジンはこの方式を採用しています。そのため、オールイントラ動画は必要ありません。
2. スムーズにシークさせるために画質を落とさないでください。 ネイティブ解像度（Seedance の場合は 1080p。ダウンスケールしないでください）、crf ~20、オールイントラではなく短い GOP（-g 8）でエンコードしてください（オールイントラでは 8 秒のクリップが約 25 MB に肥大化しますが、GOP 8 なら約 8 MB で、Blob 経由でもスムーズにシークできます）。音声を削除し、faststart を追加して、軽めの unsharp フィルターで動画のぼやけを補正します。

ffmpeg -i src.mp4 -an -vf "unsharp=5:5:0.8:5:5:0.0" \
  -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p \
  -g 8 -keyint_min 8 -sc_threshold 0 -movflags +faststart out.mp4

画質を均一にするため、2N-1 個のクリップ（ダイブとコネクター）すべてを同じ設定でエンコードします。

ポスターはエンコード済みクリップから抽出します（references/pipeline.md §5b）。静止画は 3:2、クリップはその 16:9 の再レンダリングです。静止画を読み込み中のポスターにすると、訪問者が最初に目にするシーンで、最初の動画フレームが描画されたときに（クロップとレンダリングのずれにより）目に見えるジャンプが発生します。コネクターと同じ原則をシーム 0 にも適用し、ポスターにはそのクリップの最初のフレームを抽出して使います。これを sections[k].poster として設定します（ステップ 7）。静止画は、動きを抑えた表示用の画像として残します。

ブラウザーで確認する前に、自動シームチェック（references/pipeline.md §5c）を実行してください。すべてのシームで SSIM ≥0.90 を満たさなければ、QA の指摘事項ではなく、やり直しが必要です。

モバイル向けエンコード（ステップ 1.6 でユーザーが crop-safe を超えるティアを選んだ場合のみ）。 スマートフォンの動画デコーダーはノート PC よりシークが大幅に遅く、シークのコストは GOP の長さに比例するため、デスクトップではスムーズにシークできる 1080p の -g 8 マスターも、スマートフォンではカクつくことがあります。すべてのクリップに、より軽量な -m.mp4 版を用意してください。720p、-g 4（キーフレームが増えるほどシークの負荷が下がります。モバイル動画をスムーズにシークさせるには、キーフレーム間隔を 4～10 にするのが業界標準です）、crf 23 でエンコードし、clipMobile / connectorsMobile として設定します（ステップ 7）。各モバイル版エンコードの最初のフレームを posterMobile として抽出します（§5b と同じ原則で、ポスターはデバイスが実際に受け取るエンコードと一致させる必要があります）。エンジンはスマートフォン相当のデバイス（画面の短辺が 600 CSS px 以下）にのみモバイルファイルを配信します（タブレットと iPad にはマスターを配信します）。モバイル版がない場合は、デスクトップ用クリップにフォールバックします。スクリプトについては references/pipeline.md §6 を参照してください。ヒーローのリフレーム／ポートレートチェーンのティアについては §7 を参照してください。ユーザーが crop-safe を選んだ場合は、この手順を省略してください。それでもエンジンは、シークの集約、iOS のプライミング、低電力モード時の静止画フォールバックによって、スマートフォンでのシークを確実にします。そのため、ページが壊れるのではなく、機能を段階的に制限して動作します。

---

ステップ 7 — ページを組み立てる

references/scrub-engine.js（完全にスタンドアロンのページにしたい場合は、小さな references/index-template.htmlも）をユーザーのプロジェクトにコピーするか、使用する フレームワークに合わせて調整してください。設定駆動で、自己完結型です。

mountScrollWorld(document.getElementById('world'), {
  brand: { name: 'Pearl & Co.' },
  diveScroll: 1.3, connScroll: 0.9,          // viewport-heights of scroll per clip
  sections: [
    { id:'farm', label:'The Farms', still:'assets/farm.webp',
      poster:'assets/farm-poster.webp',          // encoded clip's extracted first frame (Step 6)
      clip:'assets/vid/farm.mp4', clipMobile:'assets/vid/farm-m.mp4',   // mobile beta only
      scroll: 1.6, linger: 0.45,   // optional pacing: longer dwell + camera settles mid-scene
      accent:'#8FB98A', eyebrow:'From leaf to last sip', title:'It starts in the hills.',
      body:'…', tags:['Single-origin','Hand-picked'] },
    // …one per section; last may carry a `cta`
  ],
  connectors:       ['assets/vid/conn1.mp4','assets/vid/conn2.mp4',   /* … length = sections-1 */],
  connectorsMobile: ['assets/vid/conn1-m.mp4','assets/vid/conn2-m.mp4' /* … same length; mobile beta only */],
});

エンジンは、順序付けられたダイブ／コネクターの連鎖、rAF によるスムージングを伴うスクロールからcurrentTimeへの連動、blob の読み込み、近くのクリップの遅延プリフェッチ、フレームを合わせたクロスフェード、セクションごとに固定されたコピー（最初のセクションはランディング時に挨拶し、最後のセクションは CTA を表示し続けます）、ルートレール、 prefers-reduced-motion、モバイルに対応します。セクションごとのペーシング： scrollはそのシーンのdiveScrollを上書きします（スクロール量が多いほど滞在時間が長くなります）。また、linger（0～1、0.6 以下にしてください）は時間を再マッピングし、カメラがシーンの途中で落ち着くようにします。ちょうどコピーが盛り上がるタイミングで落ち着き、その後、シームに向けて速度を上げます。シームのフレームは変更されません（f(0)=0、f(1)=1）。ヒーローとフィナーレのシーンではscrollを大きめにし、lingerも加えてください。移動シーンはテンポよく保ちます。CSS 変数（--accent、 --sw-bg、--sw-ink、…）でテーマを設定してください。ビジュアルアイデンティティは生成されたクリップから生まれるため、クロームは控えめにします。設定と CSS 変数の全容については、scrub-engine.jsのヘッダーを参照してください。

スマートフォンでは、エンジンが2つの独立した基準に沿って自動的に適応します。 クリップのティア （どのファイルを使うか）はデバイスのクラスで決まります。画面の短辺が CSS ピクセルで600以下ならスマートフォンと判定され、 clipMobile／posterMobileを使用します。タブレット（iPad Pro を含みます。粗いポインターを使用しますが、 デスクトップクラスの画面とデコーダーを備えています）とデスクトップではマスター版が使われます。動作の強化 （どのように動作するか）は粗いポインター／ビューポート幅860px以下を基準にします。シークの集約（シーク中に新しいcurrentTimeをキューに入れないため、高速なフリックでクリップがフリーズするのを防ぎます）、クリップが描画されるまでポスターを表示、最初のタッチ時に動画をプライミング（iOS で再生前に画面が空白になる問題を修正）、シーンごとのスクロール時間を延長（scrollMobileFactorのデフォルトは1.2です。ビューポートが小さいと同じフライトが速く感じられます）、パーティクルを削減、URL バーに対応したリサイズ、安全領域のインセットに対応します。静止画への自動フォールバック： prefers-reduced-motion、Chromium のデータセーバー、iOS の低電力モード（実行時に検出されます。最初のタッチ時にミュートしたplay()が拒否された場合）はすべて、ページを動画のフリーズ状態ではなく、クロスフェード付きの静止画に切り替えます。（Chromium が検出する）2g／3g ではクリップのプリフェッチ範囲が縮小されます。これらはすべてデフォルトで有効です。設定は不要です。clipMobile／connectorsMobile／posterMobileのエンコードはステップ1.6で紹介したオプトインのティアです。ユーザーが選択した場合にのみ設定してください。

SEO 用コピーは必須です。これはランディングページです。 エンジンはすべてのコピーをクライアント側で描画するため、それだけではクロール可能なテキストがページに一切ありません。常にコンテナ内のdata-sw-seoブロックに、コピーのプレーンなマークアップ版（ヒーローの文言を h1 に、各シーンに h2 と p を1つずつ、実際の CTA リンクを含める）を配置してください。エンジンはマウント時にこれを非表示にしますが、クローラー／リンクプレビュー／JavaScript が無効な訪問者は、配信された HTML から読み取れます。references/index-template.htmlにはこのブロックが含まれています。フレームワークに組み込む場合は、サーバー側でレンダリングしてください。

JavaScript を使わないバックエンド（Python/Rails など）の場合は、アセットを配信し、レンダリングされた HTML にエンジンの<script>を追加してください。特定のフレームワークに依存する要素はありません。

---

ステップ 8 — つなぎ目を QA する（省略しないでください）

まず、機械によるチェックです。 SSIM のつなぎ目ゲート（references/pipeline.md §5c）がすでに合格している必要があります。すべてのつなぎ目が 0.90 以上（クロスフェードを目視確認して許容した箇所に限り、0.75～0.90）であることを確認してください。省略していた場合は、今すぐ実行してください。以下のブラウザー QA で確認するのは ページ、SSIM ゲートで確認するのは アセット です。アセットが不合格なら、QA でページを合格にはできません。

ヘッドレスブラウザーでページを操作し、エンドツーエンドでつなぎ目のフレーム連続性を確認します。

• 各つなぎ目の直前と直後のスクロール位置でスクリーンショットを撮影します。2 つのフレームはほぼ同一でなければなりません（ダイブの最後のフレーム == コネクターの最初のフレーム）。切り替わりが目立つ場合は、実際にレンダリングされたフレームではなくジオラマの静止画を使っている（ステップ 5 をやり直してください）か、クロスフェードの帯が短すぎます。
• 最初の描画がきれいであることを確認します。ポスター（抽出したフレーム）がすぐに表示され、ポスターから動画への切り替えで画像の位置がずれないことを確認してください（ずれる場合は、poster が指定されていないか、静止画を参照しています。ステップ 6 を確認してください）。
• コンソールにエラーがないことを確認し、video.seekable.end(0) > 0（blob が機能していること）と、各クリップの帯域全体で currentTime がスクロールに追従することを確認します。
• 静止画モードのフォールバック（すべてのビルドで確認。簡単に確認できます）：
  • データセーバー：navigator.connection.saveData = true をエミュレートします（DevTools のオーバーライド、または初期化スクリプトを使用）。ページはクロスフェード付きの静止画として描画され、Network パネルにクリップの取得が一切表示されないことを確認してください。
  • 低電力モード：エミュレートするのが最も難しいモードです。実機の iPhone で有効にし、最初のタッチ時に動画がフリーズするのではなく、ページが静止画にフォールバックすることを確認してください。エミュレートする場合は、HTMLMediaElement.play が拒否された Promise を返すようにスタブ化し、タップして静止画モードになることを確認します。
  • タブレットの階層：iPad のビューポート（834×1194、タッチ）で -m.mp4 ではなく、デスクトップ用クリップが取得されること（Network パネル）を確認してください。タッチ操作も有効なままである必要があります。
• モバイル — モバイルの階層を選択した場合（ステップ 1.6）に限り、チェックリスト全体を確認します。 クロップセーフなビルドでは、スマートフォンのビューポートで一度だけ簡単に確認してください。ページが読み込まれ、静止画のポスターが表示され、要素が重ならないことを確認します。エンジンの堅牢化により、適切に機能を縮退できます。 モバイルの階層では、実機またはエミュレートした端末を縦向きと横向きの両方で使用して、以下を確認してください。
  • CPU を 4～6 倍にスロットリングしたスマートフォンのビューポートをエミュレートし、高速にスクロールします。クリップがフリーズせずに追従する必要があります（シークの集約と -m.mp4 のエンコードによって、この動作が実現します）。
  • 最初のシーンがすぐに表示されること（静止画がポスターです）、スクロールすると動画にすぐ切り替わることを確認します。空白や黒いシーンが表示されてはいけません（iOS のプライミング修正）。特に iOS Safari でテストしてください。この問題が再発すると画面が真っ白になるのは iOS Safari だけです。
  • モバイルでは -m.mp4 のバリアントが実際に配信され（Network パネル）、デスクトップでは 1080p の大容量マスターが配信されることを確認します。
  • ゆっくりスクロールして URL バーを折りたたみます。ページがジャンプしないことを確認してください（タッチ操作では高さだけの変更は無視されます）。端末を回転させ、レイアウトが適切に再構成されることを確認します。
  • 縦向きでは 16:9 のクリップが中央でクロップされます。焦点となる被写体が判別できることを確認してください。ヒーローシーンの被写体が中央から外れていて切れてしまう場合は、再構成する（prompts.md）か、そのシーンの 9:16 バリアントを生成してください。
• モーション軽減設定を確認します（動画もパーティクルも使わず、静止画にフォールバックする必要があります）。

---

注意点 — よくある5項目をインラインで紹介。完全な一覧はreferences/gotchas.mdにあります

生成が失敗したとき、またはQAチェックの結果がおかしいときは、すぐにreferences/gotchas.mdを読んでください。本番環境で確認されたすべての問題について、症状 → 原因 → 対処法をまとめています（エンコード、テーマ設定、スマートフォン、iOS、Klingのフラグ、ポートレートのクロップなど）。実行を妨げることが特に多い5項目を紹介します。

• シームのポップ → コネクターの端点に使われていたのは、ジオラマの静止画であり、隣接するクリップの実際のフレームではありませんでした。必ず実際のフレームを抽出してください（Step 5）。SSIMゲート（pipeline §5c）が、ブラウザーが開く前にこれを検出します。
• シームのカクつき／カメラが「後ろに跳ぶ」 → シームをまたぐとカメラの速度が反転します（アーキテクチャBの引き出し動作に固有）。実写に基づくウォークスルーには、アーキテクチャAを使用してください（Step 4）。
• NSFWの誤検知（Seedance status "nsfw"） → 問題のない室内（寝室／プール／スパ、「bed」「wine」「swim」などの単語）でもフラグが立ちます。次の順に試してください。再生成する（2～3回目で通ることがよくあります） → 誘因となる単語を削除し、「empty, unoccupied, no people, architectural」を追加する → 同じ開始／終了フレームを使用して、そのクリップだけをkling3_0で再生成する → コネクターのスロットをnullに設定する（エンジンがそのシームを直接クロスフェードします）。室内シーンでは再生成の回数に余裕を持たせてください。
• 動画がフリーズする／フレーム0で止まる → ホストがバイト範囲リクエストに対応しておらず、seekable=[0,0]になっています。Blob URLで解決します（エンジンが対応します）。
• 並列生成で503が発生する／"not_enough_credits"の競合 → 並列起動時に一時的に発生します。失敗したものだけ再生成してください（higgsfield workspace listでクレジットを確認してください）。

参考資料

• references/prompts.md — インテーク用チェックリスト、スタイル事前設定のパターン、および入力欄付きのすべてのプロンプトテンプレート（シーンの静止画、ダイブ、コネクター）。
• references/pipeline.md — 実行全体のコピー＆ペースト用バッチスクリプト（アンカーで判定する静止画 → プレビズ → ダイブ → フレーム → コネクター → エンコード → ポスター → SSIMシームゲート → モバイル向けエンコード）。冪等で、bash-3.2でも安全に実行できます。
• references/scrub-engine.js — 設定駆動型のポータブルなスクラブエンジン（DOMを構築し、CSSを注入します。Blobによるシーク、遅延読み込み、シームのクロスフェード、抽出フレームのポスター、非表示のdata-sw-seo静的コピー用ブロック、コピー、ルートレール、モーション低減、スマートフォン向けの堅牢化に対応：モバイル向けエンコード、シークの集約、iOSのプライミング、セーフエリア、サイズ変更時のジャンプ防止）。
• references/index-template.html — クロール可能なdata-sw-seoコピー用ブロックを含む、エンジンをマウントする最小構成のスタンドアロンページ。
• references/knockout.py — 浮遊シーン用の、背景と境界が接続した領域を除去する処理。
• references/gotchas.md — 症状 → 原因 → 対処法の完全な一覧と、動画スクラブが十分に滑らかでない場合の、Canvasを使ったフレームシーケンスの代替手段。