Orbit poster editorial
一個宛如印刷旅遊海報系列活起來的首頁。深色墨水與淺色紙張區塊交替；字體巨大且緊湊；一個橘色強調色貫穿所有動作。主視覺是一個小型宇宙——一顆行星、軌道和紙卡——會向滑鼠傾斜。往下，真實照片並非放在方框內，而是印刷在海報中：灰階、以「色彩增值」模式疊在紙張顏色上、置於巨型文字下方，直到訪客懸停時顏色才恢復。
參考建置檔為 example/index.html（Atlasio，虛構旅遊品牌，英文）。詳細程式碼在 references/components.md 中；screenshots/ 資料夾顯示了桌面版與行動版的每個區塊。
1. 設計之前
- 收集 6–8 張照片，內容包含移動中的人物（車站、看板、道路、車窗）。為每張照片指定單一用途：主視覺小張印刷、每張海報狀態、每張支援卡片。切勿重複使用同一張照片。
- 檢查每張照片中是否有第三方標誌和螢幕（機場廣告、品牌標誌）並將其裁切掉。
- 挑選四個「可能性」 用於海報切換（旅行方式、城市、方案、季節），以及路線主控台的四個步驟。每個都需要一個單詞海報標題、兩行標題、一句話和一個具體範例（例如「巴黎 → 維也納 by 夜車」）。
- 壓縮照片（參見 §5）。範例中的七張照片總計約 750 KB。
2. 視覺DNA
| 元素 | 規則 |
|---|---|
| 墨水 | 頁面底色 #101b22；文字紙色 #edece4；柔和色 #9ca6a8；髮絲線 #ffffff20。 |
| 紙張 | 淺色區塊底色 #edece4，搭配海報色調：鼠尾草綠 #cbd4b2、陶土色 #d8c4b5、霧藍 #c0cfce、淡紫 #c9c2d3；支援卡片 #dbe1cd 和 #e5d5c6。 |
| 強調色 | 單一橘色 #ff6c3a（行星、太陽圓盤、跑馬燈、啟用分頁、最終區塊）。淡萊姆色 #c6d9ab/#c2d3a3 僅用於標題句點和路線編號。 |
| 字型 | DM Sans 字重 800–1000（字距 -.065 到 -.09em，行高 .8–1）；內文 400–700。IBM Plex Mono 6–9px 大寫用於所有標籤、座標和題眉。 |
| 標題 | 三行堆疊：實心、外框（-webkit-text-stroke:1px）、橘色；每行會隨滑鼠移動不同距離。 |
| 照片 | 置於海報與支援卡片內：grayscale(1) contrast(1.1) + mix-blend-mode:multiply 疊於有色隔離卡片上；懸停時恢復色彩並放大 1.04 倍。小張印刷（主視覺）保留色彩並加上紙張邊框。 |
| 形狀 | 除行星、太陽圓盤、軌道、切換器膠囊按鈕外，皆為直角。 |
| 游標 | 一個 30px 圓環帶點，mix-blend-mode:difference；在連結上放大。磁性按鈕會向指針漂移。 |
3. 區塊模式
- 頁首 – 商標、一個等寬「edition」連結、三個錨點、一個動畫切換（
MOTION ON/OFF）、一個帶邊框的行動呼籲按鈕，以及寬度小於 650px 時的漢堡選單。頂端有一條 2px 橘色閱讀進度條。 - 主視覺 – 等寬元資料行、三行標題、一個星號、兩行內文、一個底線連結、小張印刷。右側：軌道宇宙（帶有經緯線環與兩個字母單詞的行星、三條軌道、衛星、旋轉的等寬標籤）和三張漂浮卡片：目的地票券（點擊可循環四個可能性）、護照印章卡、照片小卡。底部欄：滾動連結、「移動滑鼠」提示、音量編號。
- 跑馬燈 – 全版橘色區塊旋轉 −1.6°，大型文字以星形符號分隔。
- 可能性 – 帶有灰色片語的標題、膠囊切換器，然後是一個兩欄面板：海報（座標行、混合照片、太陽圓盤、巨型單詞、底部標籤）和詳細資訊（大數字、題眉、標題、內文、「起點路線」、黑色按鈕、等寬免責聲明）。海報會隨滑鼠進行 3D 傾斜。
- 路線主控台 – 深色區塊，帶有橘色片語的標題、以邊框行排列的四個分頁（啟用分頁為橘色）、一個面板，內含一個巨大的萊姆色數字，位於緩慢旋轉的軌道橢圓內，以及步驟說明文字；下方有一行「解鎖」文字。
- 支援 – 大型旋轉星星 + 雙色調標題；兩張卡片（自助服務與付費顧問）各含一張混合照片、一個跟隨游標的光點和一個底線連結；一行「學習語言」文字，其中一個單詞為橘色。
- 最終行動呼籲 – 全版橘色區塊，配有網格、一個兩行巨型連結（「So, where next?」）帶有懸停時移動的箭頭、一句簡短承諾、一個黑色按鈕和一行等寬路線。
- 頁尾 – 商標、一個兩行句子、連結；一個等寬底部行，附帶品牌為虛構時的誠實備註。
4. 招牌效果
- 滑鼠場：在主視覺內的
pointermove事件中，將--px/--py（值域 −1…1）設於:root上；標題行、漂浮卡片和 3D 軌道系統透過translate3d/rotateX/Y讀取這些值，並使用不同的乘數，以.6s cubic-bezier(.16,1,.3,1)過渡效果進行緩動。一個即時的X 050 / Y 050座標讀數會隨之更新。 - 粒子網路：一個包含 65 個漂浮點（手機上為 25 個）的畫布，當距離小於 95px 時會連線；點在距離指針 120px 內會被推開，且在 180px 內會有橘色線條連接到指針。僅在主視覺可見且動畫開啟時執行。
- 混合照片海報：照片是一個使用
position:absolute的<img>，置於z-index:-2，位於設有isolation:isolate的海報容器內；灰階 + 色彩增值將其印在海報顏色上，太陽圓盤以色彩增值疊加於上方，巨型單詞則置於最上層。切換可能性時，會以淡出效果（.swap）移除舊照片，切換src，在load事件時淡入，並透過data-theme屬性更改海報色調與太陽顏色。 - 傾斜卡片 + 游標光源：海報與支援卡片最多向指針旋轉約 7–9°，並暴露
--cx/--cy以產生徑向高光。 - 無障礙分頁：路線分頁使用
role="tablist"、輪流tabindex、方向鍵/Home/End 鍵操作。 - 動畫切換：一個按鈕可暫停所有動畫並將滑鼠場歸零；
prefers-reduced-motion和粗指針裝置會自動關閉相同功能。
5. 建置規則
- 照片：
ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg（主視覺印刷約 900px 寬）。裁切標誌與螢幕：-vf "crop=w:h:x:y,scale=1100:-2"。每張保持在約 170 KB 以下。 - 獨立的 HTML 檔案，包含 doctype、charset 和 viewport；字型來自 Google Fonts；使用內聯 SVG 符號表示箭頭與星星；無其他依賴。
- 每張照片都有一個描述場景的真實
alt屬性，但海報照片除外，因其為裝飾性用途（alt=""、aria-hidden），因為海報文字與詳細資訊已承載意義。 - 行動版：主視覺堆疊，宇宙縮小至約 66%，卡片透過自身變形縮小，海報文字降至
22vw並設定word-break:normal，分頁變成 2×2 網格，游標環與傾斜效果關閉。 - 在 390px 寬度下無水平滾動；包含跳過連結；可見的
:focus-visible輪廓。
6. 文案撰寫
- 使用簡短陳述句，以三句為一組：「Come with a dream. Leave with a plan.」「Find the place. Draw your own route.」
- 等寬標籤要像印刷版次一樣說話：
01 / POSSIBILITIES、MODE 02 / AIR · FAR AWAY BY TOMORROW。 - 範例必須看起來真實，但需標示為範例；法律或入境規則始終指向官方來源。
7. 完成檢查清單
- 每張照片僅使用一次、標示來源、裁切掉第三方標誌並經過壓縮。
- 主視覺隨滑鼠傾斜；目的地卡片與「another possibility」與海報同步循環四個狀態。
- 海報照片切換時不會出現舊圖閃爍；懸停時顏色恢復。
- 路線分頁可使用鍵盤操作。
- 動畫切換、精簡動畫設定與觸控裝置都能停止滑鼠場、畫布、跑馬燈與傾斜效果。
- 390px：海報標題內無單詞分割、無水平滾動、無主控台錯誤。
- 重新產生螢幕截圖：
node scripts/screenshots.mjs example screenshots。