影片 → 滾動驅動登陸頁面
建立一段電影般的登陸頁面，其英雄區域根據滾動來播放影片，而非時間軸 — 類似 Apple 產品頁面或 GitHub Copilot 登陸頁。從原始影片中提取幀，並在使用者滾動時進行切換；在黏性英雄區域下方，一般滾動區塊承載文案與行動呼籲按鈕。
何時使用
- 使用者提供影片，並要求製作登陸頁面、滾動式網站、滾動幀英雄區域或從影片生成網站
- 提及「Apple 風格滾動」、「GitHub Copilot 登陸頁」、「隨滾動切換幀」、「滾動即幀」
- 希伯來文對應："דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"
儲存位置
預設位置： ~/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：- 以每張幀的
<img>標籤取代__FRAMES__佔位符（當你傳入--build-html時，建置腳本會自動完成此操作）。 - 填入
__HEADLINE__、__TAGLINE__、__CTA_TEXT__、__CTA_HREF__及各區塊內容。 - 對於希伯來文內容：設定
<html lang="he" dir="rtl">，並將字體切換為 Rubik/Assistant（請參閱references/design-notes.md）。
- 以每張幀的
- 最佳化幀 — 建置腳本已將最大寬度縮放至 1920px。若頁面總大小超過 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-design-system 技能：Anton + Inter（英文）/ Rubik + Assistant（希伯來文），Fly High 紫色（
#5E17EB）+ 黃色（#FFEC00）+ 灰色（#F1F2F2）色板，米白色（絕不使用純#fff），圓角為 0px 或 999px（避免 8–12px）。暖色編輯風格（粉紅+黃+骨色）僅保留給 Hope/bigcats 品牌系列使用。 - 英雄區域疊加層應柔和 — 一個暗角效果加上一個大字標題即可；不要淹沒畫面。
- 英雄區域下方的區塊：骨色背景、大型 Anton 標題、18–22px 的 Inter 內文、以尖銳粉紅矩形搭配 Anton 文字的行動呼籲按鈕。
- 對於希伯來文：遵循 RTL 方向，標題使用 Rubik 900，內文使用 Assistant 400/500。
檔案參考
| 檔案 | 用途 |
|---|---|
references/extract-frames.py | 基於 ffmpeg 的幀提取工具；可選擇一次性建置完整的 HTML |
references/landing-template.html | 包含滾動機制的獨立登陸頁面骨架 |
references/design-notes.md | 字體、色板與動畫預設值 |