ReactGSAPThree.jsTailwind CSSViteScrollTrigger3D RenderingWeb AnimationResponsive DesignCloudflare Workers
MacPro — 3D 產品展示
這是一個 Apple 風格的 3D 產品展示網站，專注於細緻、順暢的視覺體驗與互動感。本專案透過 React、Three.js、GSAP 與 Tailwind CSS 打造沉浸式 3D 場景。模擬 Apple 官網的設計語言，結合隨捲動觸發的動畫效果與 Pinned 區塊設計。架構支援完整響應式設計，確保在桌機與行動裝置上皆能維持流暢的動畫與一致的版面，是練習前端動畫與 3D 整合的實作典範。
使用技術
前端核心React / Vite
動畫視覺GSAP / Three.js / Tailwind CSS
上線部署Cloudflare Workers
AI 協作CodeRabbit (AI Code Review)
負責角色
從 UI 實作、3D 場景整合到複雜動畫邏輯的開發。
- ◆3D 產品模型渲染與燈光材質設定
- ◆捲動驅動動畫 (Scroll-driven animations) 邏輯實作
- ◆響應式版面與互動體驗優化
- ◆使用 CodeRabbit 進行程式碼品質維護
專案成果
技術亮點：
- 整合 Three.js 呈現高品質、具立體感的產品展示場景
- 大量運用 GSAP ScrollTrigger 精準控制動畫進場、離場與時間軸
- 採用 Vite 作為開發工具，提升動畫與 3D 調整的即時回饋效率
產品特色：
- 模擬 Apple 官網的高級感 Pinned 區塊與圖片遮罩轉場
- 沉浸式 3D 互動，模型隨使用者操作自然變化
- 極致的流暢度與細膩的視覺層次感
開發成果：
- 成功打造具備高度互動性的產品 Landing Page
- 實現了 3D 渲染與 Web 前端技術的深度整合
- 確保動畫在各類裝置（Desktop / Mobile）上的流暢性與一致性