左欄影窗，右欄敘事。
分鏡跟著閱讀的節奏走。

段落，就是分鏡的觸發點。

您現在看到的左欄，是一個 position: sticky、top: 0、height: 100vh 的電影視窗。它在整段閱讀過程中固定不動，畫面的更替完全由右欄的捲動位置決定。

每一個文字段落進入視線的高度時，會觸發一次分鏡遞補：舊畫面與新畫面以雙圖層 opacity 交錯，執行 1.5 秒的平滑淡入淡出。您往下讀，它換景；您往回捲，它也會準確退回對應的畫面。

無縫，來自預先載入與雙向對位。

所有分鏡圖在頁面載入時即預先取回，切換的瞬間不會出現閃白或載入斷層。轉場曲線採用緩入緩出，讓畫面的呼吸和大留白的版面節奏一致。

實作以 GSAP ScrollTrigger 完成：每個段落各自持有觸發區間，向下捲動與向上回捲分別由 onEnter 與 onEnterBack 對位，因此無論讀者用什麼速度、什麼方向閱讀，影窗永遠停在正確的分鏡上。

字距、行高、留白，由系統統一控管。

右欄的字級、行高、字距與段落間距，皆由自訂 CSS 集中定義，不逐頁手調。標題與內文的層級一旦定案，之後每新增一章故事，版面自動維持相同的鬆弛感。

這一段對應的是雜誌式閱讀的核心：文字欄寬控制在一行約三十字以內，行高放到兩倍以上，讓長文在螢幕上仍然保有紙本的從容。

品牌資產字眼，也能觸發分鏡。

除了整段觸發，特定詞彙也可以掛上各自的觸發點。請繼續往下讀，當視線隨捲動抵達「琥珀茶湯」這個詞的位置時，左欄已經換上了對應的畫面。

同一段文字裡可以埋入多個資產字眼。例如接著出現的「百年檔案」，以及段落末尾的「工藝禮盒」，各自帶著自己的分鏡。往回捲動時，畫面同樣逐字退回。

在正式專案中，這些字眼即後台的品牌資產資料：每項資產一筆內容，透過 ACF 關聯欄位聯結到各個故事章節。改一處文字或換一張圖，全站所有引用位置同步更新。