視差登陸頁面

將一段短影片轉換為單螢幕的電影感登陸頁面，使用者的滾動動作會逐幀撥放影片，同時五段戲劇性文字場景淡入淡出。文件實際上不會滾動——滑鼠滾輪/觸控/鍵盤輸入會由 JavaScript 攔截並轉換為虛擬幀進度。

此技能編碼了在 ../../examples/parasites/ 中捆綁參考中驗證的模式（github / lion / hope 登陸頁面——使用此技能建構的三個工作頁面）。如果任何內容含糊不清，請將該資料夾視為真理來源。

此技能在 YUV.AI 金字塔中的位置

parallax-landing-page 位於 YUV.AI 技能金字塔的中層，與 yuv-design-system、yuv-decks、yuv-viral-video 和 video-to-landing-page 並列。頂層協調器 yuv-pilot 會在需要將 5–15 秒影片剪輯轉為單一英雄滾動撥放登陸頁面時路由至此。

此技能帶有自己的視覺語言（Anton + Caveat + Inter，金色/琥珀色/重點色/奶油色調色板）——它不會呼叫 yuv-design-system。兩個系統共存：yuv-design-system 擁有整個網站/應用程式/簡報表面的品牌調色板，而 parallax-landing-page 則專門擁有電影感滾動撥放美學。對於 YUV.AI 視差登陸頁面，您可以選擇性地在頁尾區域添加鳳凰浮水印和規範的 Linktree URL 作為品牌貫穿線——請參閱 yuv-design-system/assets/ 中的浮水印檔案。不要將 Anton/Caveat 字型組合替換為設計系統的 Neon 調色板——這會失去招牌外觀。

您在建構的內容

每個登陸頁面都是一個鎖定的視口，包含：

填滿螢幕的畫布，一次繪製一幀（cover-fit，DPR ≤ 2）
5 個絕對定位的文字場景（前導 + 大寫 Anton 標題 + Caveat 手寫行），每個都有自己的滾動進度視窗
帶有 PARALLAX // showcase Logo 和連結到兄弟登陸頁面的固定導覽列
一個載入器，在讓使用者互動之前預載所有幀
暗角 + 膠片顆粒疊加層
一個底部滾動提示，在使用者開始滾動後淡出
一個右下角幀計數器（例如 073 / 145）
最後一個場景就是行動呼籲區塊——沒有單獨的 .end 區塊

以 q:v 2 的總重量：每幀大約 120–220 KB × 幀數。一個 6 秒 24fps 的剪輯 = 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
# 技能會在此建立 <slug>/ 並提取幀和建構 HTML。

最終路徑（模式 A——獨立）：~/Documents/yuv-projects/landings/<slug>/。最終路徑（模式 B——整合）：使用者選擇的現有展示目錄。

在每次建構結束時將最終路徑告訴使用者。

工作流程

有四個階段。不要跳過階段——每個階段都為下一個階段提供輸入。

階段 1——探索

與使用者確認：

影片路徑——來源 MP4 的位置。
Slug——簡短的資料夾/檔案名稱（例如 hope、marcus、desk）。一個單詞，小寫，無空格。這同時成為幀資料夾名稱（<slug>/）和 HTML 檔案名稱（<slug>.html）。
主題 / 話題——這個登陸頁面是關於什麼的？產品發布？個人時刻？野生動物遭遇？您需要這個來編寫文案。
專案模式——獨立（全新的資料夾）或整合到位於 examples/parasites/（此儲存庫頂層）的現有寄生蟲展示中。如果使用者說「把它加到展示中」，他們指的就是下面的模式 B。
重點色——用於腳本/行動呼籲高亮：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 元資料區塊列印到標準輸出。擷取它——您需要 frame_count 和 suggested_scroll_budget 來建立 HTML。

為什麼用 -q:v 2：ezgif 和類似工具會積極地重新壓縮（~55 KB/幀）。原生 ffmpeg 在 q:v 2 下，相同解析度下每幀約 120–220 KB——明顯更銳利。不要降低解析度；永遠不要放大（這會增加檔案大小而不增加細節）。

為什麼用滾動預算公式（每幀約 26 像素）：保持「每幀前進的滾動像素」在剪輯長度中一致。145 幀 → 約 4200，241 幀 → 約 6300，90 幀 → 約 2500（下限）。腳本會為您計算並限制在 [2500, 8000] 範圍內。

階段 3——撰寫頁面

閱讀 <skill>/assets/landing-page-template.html 中的模板。它是一個完整的工作檔案，帶有 {{PLACEHOLDER}} 標記和創意部分旁邊的  註解。在 <target>/<slug>.html 撰寫一個新檔案，並替換所有內容。

替換檢查清單（每個佔位符都必須替換）：

佔位符	放入的內容	範例
`{{PAGE_TITLE}}`	HTML `<title>`	`Hope — 內蓋夫最快的獵心者`
`{{PAGE_DESCRIPTION}}`	meta 描述，一句話	`與 Midbarium 的獵豹 Hope 的時刻。`
`{{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}}`	一個單詞，大寫	`HOPE`
`{{LOADER_SCRIPT}}`	以 `…` 結尾的手寫行	`召喚跑者…`
`{{NAV_LINKS_HTML}}`	導覽用的完整 `<a>` 標籤區塊	見下方
`{{SCENE_N_*}}`	5 個場景各自的前導、標題、手寫行	參見文案指南
`{{SCROLL_HINT_TEXT}}`	2–4 個單詞的大寫提示	`滾動以奔跑`
`{{CTA_BUTTONS_HTML}}`	2–4 個 `<a class=

視差滾動登陸頁面