版面構圖元件

資料檢視變形：同一資料集在清單、表格、看板、卡片網格四種版面之間切換時，每筆項目以共享元素動畫連續變形飛至新位置，維持使用者的空間記憶。

英雄收攏頁首：捲動時 hero 區的標題、頭像與 meta 資訊以共享元素 FLIP 逐一遷移收攏進吸頂頁首的對應插槽，向上捲回時再依序展開歸位。

鑽入堆疊面板：層層鑽入的詳情面板系統：每開一層新面板從右推入，下層面板向後縮退並帶視差與調暗，麵包屑可逐層依序彈出回退，支援 URL 同步。

同步大綱閱讀版面：內容欄＋大綱欄的雙欄閱讀版面：大綱側的指示脊椎隨閱讀位置在標題間「連續伸縮滑動」而非跳格，對應內文段落同步微微升起聚焦。

對照雙欄版面：雙語或雙版本內容以左右對頁欄並排、句子層級互相配對，捲動時兩欄自動對齊對應段落，hover 任一句時另一欄的對應句同步以底色高亮連動。

檔案索引頁：工作室檔案館式的全頁索引表格（年份／專案／類別多欄），欄位可排序並以 FLIP 重排，點擊某列時該列撐開成滿版詳情區塊、其餘列以彈性讓位下沉。

紅線釘板版面：卡片像釘在軟木板上的線索，彼此用會自然下垂的紅線（SVG 懸鏈線）連接，拖動任一張卡時所有相連的線即時改變鬆緊與垂度，適合流程說明、roadmap 與故事地圖。

藝術指導換版：同一組標題、圖片與內文可在多套雜誌級版面構圖（瑞士網格、粗獷不對稱、古典置中）之間以 FLIP 佈局動畫無縫變形，切換時元素飛行重排、字級欄寬同步過渡，並附鍵盤/分頁指示切換器。

拼版組稿：區塊初始如散落在工作檯上的剪貼稿（隨機位移、旋轉、疊放），滾動進入時全部元素以 FLIP 飛回各自網格位置組成乾淨版面，反向滾動則重新散開。

舞台調度版面：主內容置中如舞台，其餘場景以傾斜縮圖疊列於側欄，點選後以共享元素 FLIP 與中央內容對調位置，並帶景深模糊完成切換。

年代地層版面：把年代／階段疊成水平地層帶的手風琴式版面，滾動或點擊時目標地層垂直擴張、其餘壓縮，層內內容帶視差浮出，適合公司沿革與產品演進頁。

視圖延續網格：卡片網格頁與詳情頁之間做「真實路由切換」的構圖：被點卡片的圖片與標題以 View Transitions API 跨頁變形延續，其餘卡片依距離向外退散、返回時依序歸位。

總覽縮放版面：一鍵讓整頁各區塊以 FLIP 同時縮小飛入縮圖網格總覽，點選任一縮圖即放大回到該區塊位置，形成頁面級的空間導航地圖。

即時預覽精靈：左欄分步表單、右欄即時預覽畫布的頁面級雙欄 onboarding 版面，輸入即時 morph 反映到預覽 mock，步驟切換時表單方向性滑動、預覽交叉淡變。

多種造型的區段交界分隔：斜切、波浪、鋸齒、弧形

元素互相交疊的雜誌拼貼構圖，hover 各自浮起

可撥彈的橡皮筋分隔線，拉起放開會彈跳波動