parallax-landing-page

Parallax ランディングページ

短い動画を、1 画面のシネマティックなランディングページに変換します。ユーザーがスクロールすると、動画がフレーム単位で再生され、ドラマチックなテキストシーンが 5 つ、クロスフェードしながら切り替わります。ドキュメント自体は実際にはスクロールしません。JS でホイール／タッチ／キーボード入力を横取りし、仮想的なフレームの進行に変換します。

このスキルには、同梱のリファレンス ../../examples/parasites/（github／lion／hope のランディングページ。このスキルを使って構築された 3 つの動作するページ）で実証されたパターンが組み込まれています。ここに曖昧な点がある場合は、このフォルダーを正として扱ってください。

YUV.AI ピラミッドにおけるこのスキルの位置づけ

parallax-landing-page は、yuv-design-system、yuv-decks、yuv-viral-video、video-to-landing-page と並ぶ、YUV.AI スキルピラミッドの中間層にあります。トップ層のオーケストレーター yuv-pilot は、5～15 秒の動画クリップを、スクロールで再生する単一ヒーローのランディングページに変換する必要がある場合、このスキルに振り分けます。

このスキルは独自のビジュアル表現（Anton + Caveat + Inter、ゴールド／アンバー／アクセント／クリームのアクセントパレット）を持ち、yuv-design-system は呼び出しません。2 つのシステムは共存します。yuv-design-system はウェブ／アプリ／デッキ全体でブランドパレットを担い、parallax-landing-page は特定のシネマティックなスクロール再生の美学を担います。YUV.AI のパララックスランディングページでは、ブランドの一貫性を保つために、フッター領域にフェニックスの透かしと正式な Linktree URL を任意で追加できます。透かしファイルについては yuv-design-system/assets/ を参照してください。デザインシステムの Neon パレットに合わせて Anton／Caveat のフォント構成を入れ替えないでください。特徴的な見た目が失われます。

構築するもの

各ランディングページは、以下で構成される、スクロールをロックした単一のビューポートです。

• 画面全体を埋めるキャンバス。フレームを 1 つずつ描画します（カバーフィット、DPR ≤ 2）
• 絶対配置された 5 つのテキストシーン（キッカー + 大文字の Anton 見出し + Caveat の手書き風ライン）。それぞれに固有のスクロール進行ウィンドウがあります
• PARALLAX // showcase ロゴと、関連するランディングページへのリンクを配置した固定ナビゲーション
• すべてのフレームを事前読み込みし、ユーザーが操作できるようになる前に表示するローダー
• ビネット + フィルムグレインのオーバーレイ
• ユーザーがスクロールを始めるとフェードアウトする、下部のスクロールヒント
• 右下のフレームカウンター（例：073 / 145）
• CTA セクションを兼ねる最後のシーン。下部に独立した .end セクションはありません

総データ量：q:v 2 で、フレームあたりおよそ 120～220 KB × フレーム数です。6 秒・24 fps のクリップは 145 フレームで約 25 MB です。10 秒のクリップは 241 フレームで約 53 MB です。

保存先

デフォルト： ~/Documents/yuv-projects/landings/<slug>/ — スタンドアロンのランディングページは、後で見つけられるよう、必ずここに保存してください。ユーザーが別の場所を明示的に指定した場合、またはモード B（既存の examples/parasites/ ショーケースへの統合）を選択した場合に限り、変更できます。

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# The skill creates <slug>/ here as it extracts frames and builds the HTML.

最終パス（モード A — スタンドアロン）：~/Documents/yuv-projects/landings/<slug>/。 最終パス（モード B — 統合）：ユーザーが選択した既存のショーケースディレクトリ。

ビルドの最後に、必ず最終パスをユーザーに伝えてください。

---

ワークフロー

フェーズは 4 つあります。フェーズを省略しないでください。各フェーズが次のフェーズにつながります。

フェーズ 1 — 確認

ユーザーに以下を確認します。

1. 動画のパス — 元の MP4 の保存場所。
2. スラッグ — 短いフォルダー名／ファイル名（例：hope、marcus、desk）。1 語で、小文字、スペースなしにします。フォルダー名（<slug>/）と HTML ファイル名（<slug>.html）の両方に使用します。
3. テーマ／トピック — このランディングページのテーマは何ですか？ 製品のローンチですか？ 個人的なひとときですか？ 野生動物との遭遇ですか？ コピーを書くために必要です。
4. プロジェクトモード — スタンドアロン（新しいフォルダー）にするか、examples/parasites/（このリポジトリのトップにあります）にある既存の parasites ショーケースに統合するか。ユーザーが「ショーケースに追加して」と言った場合は、以下のモード B を意味します。
5. アクセントカラー — スクリプト／CTA のハイライト用です。gold（#f5b042）、amber（#ff8a3d）、accent（ピンク #ff4d6d）、cream（#f5e9d4）、または新しい色（:root の style.css に追加し、新しい .script.<name> ルールを記述）から選びます。

未指定の項目があれば、デフォルトを提案して先に進みます。結果を見れば回答できる質問で作業を止めないでください。

フェーズ 2 — フレームの抽出

同梱の抽出スクリプトを実行します。動画を ffprobe で解析し、ネイティブ解像度で -q:v 2（ほぼロスレスの JPEG）を使ってすべてのフレームを抽出し、frame-001.jpg から frame-NNN.jpg まで（3 桁のゼロ埋め）という名前を付けます。

python <skill>/scripts/extract_frames.py <video_path> <output_folder>

例：

python C:/Users/User/.claude/skills/parallax-landing-page/scripts/extract_frames.py \
    C:/Users/User/Documents/parasites/hope/hope.mp4 \
    C:/Users/User/Documents/parasites/hope

スクリプトは JSON 形式のメタデータブロックを標準出力に出力します。HTML の作成に必要な frame_count と suggested_scroll_budget を取得してください。

-q:v 2 を使う理由：ezgif などのツールは強く再圧縮します（1 フレームあたり約 55 KB）。ネイティブの ffmpeg を q:v 2 で使うと、同じ寸法で 1 フレームあたり約 120～220 KB となり、見た目もより鮮明です。縮小はしないでください。拡大も決してしないでください。ディテールが増えないままファイルサイズだけが大きくなります。

スクロール予算の計算式（1 フレームあたり約 26 px）を使う理由：フレームの長さにかかわらず、「スクロールしたピクセル数あたりに進むフレーム数」を一定に保てます。145 フレームなら約 4200、241 フレームなら約 6300、90 フレームなら約 2500（下限）です。スクリプトが計算し、[2500, 8000] の範囲に収めます。

フェーズ 3 — ページの作成

<skill>/assets/landing-page-template.html にあるテンプレートを読みます。{{PLACEHOLDER}} マーカーと、クリエイティブな要素の隣にある `` コメントを含む、完全に動作するファイルです。すべてを置換して、新しいファイルを <target>/<slug>.html に作成します。

置換チェックリスト（すべてのプレースホルダーを置き換えてください）：

プレースホルダー	入れる内容	例
{{PAGE_TITLE}}	HTML の <title>	Hope — The Fastest Heart in the Negev
{{PAGE_DESCRIPTION}}	1 文のメタディスクリプション	A moment with Hope, the cheetah of Midbarium.
{{SLUG}}	フォルダー名（パスやスラッシュなし）	hope
{{FRAME_COUNT}}	フレーム数の整数値	241
{{FRAME_COUNTER_TEXT}}	幅を合わせた 001 / NNN	001 / 241
{{SCROLL_BUDGET}}	抽出スクリプトの JSON にある整数値	6300
{{PREVIEW_FRAME_MID}}	ゼロ埋めした中間フレーム	121
{{PREVIEW_FRAME_END}}	ゼロ埋めした最終フレーム	241
{{LOADER_TITLE}}	大文字の 1 語	HOPE
{{LOADER_SCRIPT}}	… で終わる手書き風の一文	summoning the runner…
{{NAV_LINKS_HTML}}	ナビゲーション用の <a> タグブロック全体	下記参照
{{SCENE_N_*}}	5 つの各シーンのキッカー、見出し、手書き風の一文	コピーガイドを参照
{{SCROLL_HINT_TEXT}}	大文字の 2～4 語のプロンプト	SCROLL TO RUN
{{CTA_BUTTONS_HTML}}	<a class="cta"> タグを 2～4 個	下記参照
{{ACCENT_CLASS}}	.script.X と .cta.X 用のアクセントカラーの接尾辞	amber

映画のようなコピーのパターン（キッカーの表現、見出しの長さ、手書き風の一文のトーン）については、references/copy-guide.md を読みます。このスキルの真価が発揮されるのはコピーです。ありきたりなコピーでは、それ以外が美しいアニメーションでも台無しになります。

フェーズ 4 — アセットを組み込む

対象フォルダーにすでに style.css と parallax.js がある場合（ショーケースへの統合）は、何もしないでください。これらは共有されています。それ以外の場合は、<skill>/assets/ から対象フォルダーに両方をコピーします。

cp <skill>/assets/style.css <target>/style.css
cp <skill>/assets/parallax.js <target>/parallax.js

既存のショーケースに統合する場合は、references/showcase-integration.md の手順も実施してください。index.html にカードを追加し、既存の各ランディングページのナビゲーションバーにリンクを追加して、前のランディングページの最終シーンに次へ進む CTA を追加します。

ユーザーに表示方法を伝えてください。

親フォルダーから python -m http.server 8000 を実行し、<target>/<slug>.html を開きます（file:// は使用しないでください。Chromium がローカル画像のオリジンによってキャンバスを汚染する可能性があります）。

ファイルの仕様

<target>/
├── <slug>/                  # frame folder
│   ├── <slug>.mp4           # the source (preserved)
│   ├── frame-001.jpg
│   ├── frame-002.jpg
│   └── … frame-NNN.jpg
├── <slug>.html              # the landing page
├── style.css                # shared (copy if standalone)
├── parallax.js              # shared (copy if standalone)
└── index.html               # the hub (only if standalone or integration)

フレームフォルダー名と HTML ファイル名には、同じスラッグを使用する必要があります。ページの new ParallaxPage({folder: '<slug>', ...}) 呼び出しにある folder オプションは、フォルダーのパスそのものです。

ParallaxPage API（すでに parallax.js にあります。再定義しないでください）

new ParallaxPage({
  folder:       '<slug>',     // folder containing frame-001.jpg, etc.
  frameCount:   145,          // integer
  prefix:       'frame-',     // always 'frame-' for this skill
  scrollBudget: 4200,         // pixels of accumulated input for full pass
  // optional: padWidth (default 3), ext (default 'jpg')
})

このクラスは body.scrub-page を自動的に適用し（CSS によってスクロールがロックされます）、すべてのフレームをプリロードし、スクロール位置から導出されたターゲットフレームに向けて RAF 駆動の補間（係数 0.22）を実行し、現在の進捗が data-start／data-end の範囲に含まれるシーンをクロスフェードします。

厳守事項（妥協できない条件）

これらはリファレンスに組み込まれており、守らないと体験が損なわれます。

• シーンは 5 つ、進捗範囲は固定：0.00–0.20、0.22–0.40、0.42–0.60、0.62–0.80、0.82–1.00。シーン間の 0.02 の間隔は意図的なものです。場面の合間に「画像だけでテキストなし」の瞬間を設けます。ヒーロー（シーン 1）と最後のシーン（シーン 5）では、それぞれ data-fade="0.30" と data-fade="0.18" を使用して端の部分を長めに保持し、中間のシーンではデフォルトの 0.25 を使用します。
• スクラブ領域の下に .end セクションを置かないでください。CTA は最後のシーンに含めます。ページ全体を単一のロックされたビューポートにします。
• Anton + Caveat + Inter — 太字のすべてのテキストには大文字の Anton、手書き風のアクセント（ゴールド／アンバー／クリーム）には Caveat、本文のリードテキストには Inter を使用します。代替フォントは使わず、4 つ目のフォントも追加しないでください。
• オフホワイト #f5f1ea を使用し、#fff は使わないでください — CSS ですでに var(--text) として定義されています。
• フレーム名は frame-NNN.jpg とし、総フレーム数に合わせてゼロ埋めします（1000 フレーム未満のクリップでは 3 桁が標準です。JS が総数からカウンターの桁数を自動計算します）。
• スラッグはフォルダー名と HTML ファイル名のベース名の両方に使用します — hope/、hope.html。例外はありません。統合手順はこの仕様を前提としています。

行き詰まったときの参照先

• このリポジトリに含まれるリファレンスのショーケース：examples/parasites/ — github.html、lion.html、hope.html、style.css、parallax.js、index.html。出力がこれらと目に見えて異なる場合は、意図から外れています。読み直してください。
• references/copy-guide.md — 5 つのシーンを映画のように感じられる文章にする方法。
• references/showcase-integration.md — 既存のハブに追加するときに必要な変更の詳細。
• assets/landing-page-template.html — プレースホルダーを含む標準構成。
• assets/hub-template.html — 新しいショーケースを一から作成する場合にのみ使用します（カード 3 枚から開始）。

実際の呼び出し例 2 つ

単独で作成する場合： ユーザーが単一のクリップ desk.mp4 を持っていて、ランディングページを希望しています。

1. スラッグとテーマを確認します。desk.mp4 に抽出処理を実行し、./desk/frame-NNN.jpg に出力します。
2. style.css と parallax.js をプロジェクトのルートにコピーします。
3. テンプレートから desk.html を作成します。ナビゲーションには自身へのリンクだけを置きます。
4. 完了です。python -m http.server で配信するようユーザーに伝えます。

ショーケースに追加する場合： ユーザーが既存の parasites フォルダーに hope.mp4 を追加します。

1. スラッグは hope です。hope/frame-NNN.jpg に抽出します。（既存の style.css と parallax.js を再利用します。）
2. テンプレートから hope.html を作成します。
3. ショーケースの統合を実行します。index.html に 3 枚目のカードを追加し、github.html と lion.html のナビゲーションバーに Hope リンクを追加して、前のランディングページの最終シーンに Next: Hope → CTA を追加します。
4. 新しいアクセントカラーを導入する場合は、:root に追加し、style.css に .script.X と .cta.X のルールを追加します。