ReactGSAPScrollTriggerTailwind CSSViteWeb AnimationNarrative UIClip-path TransitionsVideo OptimizationResponsive Design
Cyberpunk 2077
本專案參考 Zentry 的設計語言，並結合 Cyberpunk 2077 遊戲素材，打造沉浸式的敘事型網頁。核心技術採用 React 與 GSAP，實作捲動同步動畫、非傳統的幾何裁切 (Clip-path) 轉場與 3D 傾斜互動。專案重點在於多影片元件的載入優化與流暢的視覺銜接，並透過 React Suspense 與模組化組件架構（如 Hero、About、Features 等）確保高性能與高可維護性，展現現代前端動畫的實作潛力。
使用技術
前端核心React / Vite / react-use
動畫視覺GSAP / ScrollTrigger / Tailwind CSS / clsx
組件架構React Suspense / Lazy Loading / React Icons
負責角色
負責從視覺動畫邏輯實作到複雜影片轉場的優化開發。
- ◆實作捲動同步 (Scroll-Driven) 動畫，確保動畫節奏與手感一致
- ◆開發非傳統矩形的幾何裁切 (Clip-path) 電影感轉場效果
- ◆優化多影片加載邏輯與播放狀態管理，解決轉場斷層問題
- ◆設計高效能的模組化組件架構以提升程式碼複用性
專案成果
技術亮點：
- 整合 GSAP ScrollTrigger 精準控制複雜的時間軸與轉場效果
- 使用 Tailwind CSS v4 處理細膩的排版與高度自定義樣式
- 透過 React Suspense 加速首屏渲染，維持高畫質影片下的流暢度
產品特色：
- 具備高度互動感的 3D 傾斜 (Tilt) 與滑鼠回饋效果
- 沉浸式敘事體驗，結合 Cyberpunk 視覺風格與流暢捲動
- 高品質的幾何遮罩轉場，打破傳統網頁佈局感
開發成果：
- 成功將複雜的設計稿轉化為高性能的互動式 React 應用
- 實現了 3D 互動、影片串接與捲動動畫的深度整合
- 在維持視覺豐富度的同時，確保了跨裝置的組件穩定性