影片 → 捲動式登陸頁面
建立一個電影風格的登陸頁面，其中的英雄區塊會根據捲動而非時間來播放影片 — 類似 Apple 產品頁面或 GitHub Copilot 登陸頁面。系統會從來源影片中擷取影格，並在使用者捲動時切換顯示；在固定的英雄區塊下方，一般捲動區塊則放置文案與行動呼籲按鈕。
何時使用
- 使用者上傳影片，並要求製作登陸頁面、捲動式網站、捲動影格英雄區塊或從影片製作網站
- 提及「Apple 風格捲動」、「GitHub Copilot 登陸頁面」、「scrub-on-scroll」、「frame on scroll」等關鍵字
- 希伯來語對應關鍵字：「דף נחיתה מסרטון」、「אתר עם גלילה」、「סרטון בגלילה」
儲存位置
預設位置： ~/Documents/yuv-projects/landings/<slug>/ — 請一律將登陸頁面儲存於此，以便日後查找。若父目錄不存在則建立。
mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# 在此建立 <slug>/。
最終路徑：~/Documents/yuv-projects/landings/<slug>/。每次建置完成時，請告知使用者登陸頁面的存放位置。
工作流程（8 步驟）
- 探查來源影片 — 使用
ffprobe取得影片時長、幀率、尺寸、音訊資訊。 - 選擇影格數量 — 預設
80。下限40（過低會卡頓），上限160（頁面過重）。依時長選擇：≤10秒 → 50，10–30秒 → 80，30–60秒 → 120，>60秒 → 160。 - 決定輸出目錄 — 預設為
~/Documents/yuv-projects/landings/<slug>/。<slug>為簡短名稱，取自影片名稱或主題。除非使用者明確要求，否則不覆蓋此設定。 - 擷取影格 — 執行
references/extract-frames.py <source-video> <output-dir> [count]。輸出至output-dir/frames/f_0001.jpg…，統一使用 JPG 品質 82 且最大寬度為 1920（若來源較大則縮小）。 - 複製並客製
references/landing-template.html至output-dir/index.html：- 將
__FRAMES__佔位符替換為每個影格的<img>標籤（建置腳本可透過--build-html參數自動完成）。 - 填入
__HEADLINE__、__TAGLINE__、__CTA_TEXT__、__CTA_HREF__、各區塊內容。 - 若為希伯來語內容：設定
<html lang="he" dir="rtl">，並將字型切換為 Rubik/Assistant（請參閱references/design-notes.md）。
- 將
- 最佳化影格 — 建置腳本已將圖片縮放至最大寬度 1920 像素。若頁面總體積超過 12 MB，則將品質降至 75 或減少影格數量。
- 預覽 — 在輸出目錄內執行
python -m http.server，然後開啟http://localhost:8000。在效能良好的機器上捲動體驗應極其流暢。 - 部署 — 將整個資料夾拖曳至 Vercel / Netlify / Cloudflare Pages。無需建置步驟。
捲動機制
- 外部捲動容器
.scroll-stage的高度以視埠單位設定（預設600vh= 需捲動 5 個螢幕高度才能遍歷所有影格）。 - 固定英雄區塊使用
position: sticky; top: 0; height: 100vh，包含所有以絕對定位且隱藏的影格，僅顯示當前啟用的影格。 - 捲動監聽器計算
progress = scrolledIntoStage / scrollableHeight，範圍限制在 0–1 之間。 idx = floor(progress * (N - 1))— 將.active類別切換至該影格。- 將監聽器包裝在
requestAnimationFrame中以維持 60fps 效能。
設計規則
- 如果專案為 YUV.AI 品牌（Yuval 個人、其作品集、其品牌）：呼叫
yuv-design-system並根據媒介鎖定模式 —- 霓虹模式（YUV.AI 網頁的預設模式）：亮粉色（
#FF1464）+ 螢光青色（#00E5FF）+ 白色或深黑色背景。字型使用 Anton + Inter（英文）/ Rubik + Assistant（希伯來文）。圓角半徑為 0px 或 999px。 - 溫暖編輯模式：僅限於 Hope、Marcus、bigcats.ai、practical.yuv.ai — 使用粉色 + 黃色 + 骨色，非純白背景（不使用
#fff）。 - 切勿對登陸頁面使用 Decks 模式（Fly High 紫色/黃色） — 該色板僅保留給投影片使用。
- 霓虹模式（YUV.AI 網頁的預設模式）：亮粉色（
- 如果專案非 YUV.AI 品牌：不套用 yuv-design-system。請根據來源影片的視覺氛圍選取合適的色板。Anton + Inter 仍然是合理的預設字型，但非強制。
- 英雄區塊的覆蓋層應低調 — 使用暗角效果與一個大字標題；不要淹沒影格。
- 英雄區塊下方的區塊：淺色背景（霓虹模式為白色，溫暖編輯模式為米白，一般溫暖風格則為骨色）、大號 Anton 標題、18–22px 的 Inter 正文字體、尖銳藥丸形狀的行動呼籲按鈕（
border-radius: 999px）— 霓虹模式中為粉色填充，其他情況下使用品牌合適的顏色。 - 希伯來語內容：尊重 RTL（從右至左）閱讀方向，標題使用 Rubik 900 字重，正文使用 Assistant 400/500 字重。
檔案參考
| 檔案 | 用途 |
|---|---|
references/extract-frames.py | 基於 ffmpeg 的影格萃取器；可選擇性一步建置完整的 HTML |
references/landing-template.html | 包含捲動機制的自成一體登陸頁面骨架 |
references/design-notes.md | 字型、色板與動態效果的預設規則 |