交大設計學院畢展在線展平台

全站動效與頁面轉場

在線展的首頁、專業選擇、作品互動與頁面切換都依賴動效，但路由切換時直接卸載舊頁會中斷動畫，也容易讓 fixed 圖層互相覆蓋。前端將 Motion 作為全站共用的動畫層：以 AnimatePresence 管理進出場，以 motion component 處理遮罩揭示、按鈕反饋與操作提示；轉場期間保留新舊頁的獨立 slot，讓遮罩與內容可在同一段動畫內完成交接。

2025 首頁以 Motion 驅動動態幾何遮罩和文字，構成進場效果。2026 首頁需要維持持續變化的動態海報，因此以 Canvas 2D 繪製逐字文字流與方塊矩陣，再由 WebGL fragment shader 繪製流動背景；三個圖層共享文字讀取進度，使矩陣的生長節奏可跟隨文字變化。

2.5D 差速展廳與虛擬渲染

展廳需要在平面網頁中呈現作品、人物信息、前景與背景之間的空間層次。系統以四個深度層承載這些素材，並讓各層以不同滾動速度移動，形成 2.5D 差速效果。桌面端將縱向滾輪映射為橫向瀏覽，Lenis 則負責平滑與慣性，讓長距離移動仍保持連續。

展廳原本按橫向畫布設計，直接縮到手機直向屏幕會使作品與文字過小。系統會根據 viewport 比例自動旋轉畫布及對應的操作坐標，讓手機用戶維持直向握持，也能以屏幕長邊瀏覽完整展廳；同一份圖層數據和互動設置因此可覆蓋桌面與手機。

每個專業包含多個學生展位，而每個展位又由多張高分辨率圖層與互動素材組成；若一次渲染完整展廳，DOM、圖片請求與內存使用量都會隨作品數量線性增加。每個深度層因此使用 TanStack Virtual，只保留視口附近的展位。前端以 React Query 緩存展位數據，並在進入頁面時預先加載目錄、起始展位和當前作品的媒體，將等待時間提前到用戶開始瀏覽之前。

每個展位可配置 slide、scroll、video 三種互動：以點擊切換圖組、在指定區域滾動內容，或播放作品視頻；前台依後台保存的圖層與互動數據組合出對應界面。

展覽編輯、媒體管線與多屆版本

學生可自行上傳作品圖層與媒體、填寫作品數據，並在後台調整圖層坐標、尺寸與深度；管理端負責排序、提交狀態與審核。系統支持上海交通大學 JAccount OAuth，方便學生與教師直接以校內賬號進入系統。

學生可直接上傳原始圖片與視頻，無需自行處理圖片壓縮或視頻格式。後端統一將圖片轉為 WebP，利用其較高壓縮比降低傳輸帶寬；最前景圖層的滾動速度最快，單張長圖可超過 10,000px，瀏覽器解碼整張圖片時容易造成卡頓，因此後端會將超寬圖切成多個水平 tile，讓前端分段懶加載。視頻則重編碼為 MP4 並加入 faststart，因為視頻預覽必須盡快取得第一幀；若 MP4 的 metadata 位於文件末端，播放器往往要下載完整文件後才能開始播放。

前後台以 Docker 部署。/2025 與 /2026 是同一項目中的兩屆展覽：gallery 引擎與數據模型可重用，首頁視覺、專業入口與各屆展覽內容則分別重寫與配置，讓新版能在保留舊版入口的前提下迭代。