返回案例列表
產品形象官網

專案管理系統動態官網

企業進度與貢獻管理 SaaS 平台的市場官網。透過 3D WebGL 粒子系統與視差動畫,將複雜的隱性貢獻轉化為視覺化故事,配合防禦性定價邏輯完成商業轉換。

委託業主 SGOplus Platform
上線日期 2026-04-28
系統架構 極速純前端網頁

專案背景與核心挑戰

SGOplus Platform 是一個進度與貢獻管理平台,透過「貢獻星獎勵體系」與「AI 智能審核」將團隊隱性貢獻量化為顯性數據資產。官網需要完美呈現產品的科技感與商業模式,同時防禦 Firebase 流量與 AI 成本。

網頁訂製核心方案

1. 首屏 3D 微互動

消除過多留白,將靜態積分卡片改造為 Framer Motion 3D 傾斜元件,搭配毛玻璃與邊緣流光反射,營造視覺衝擊力。

2. WebGL 粒子貢獻星系

使用 Three.js 實現 3D 互動粒子系統。滑鼠滑過時產生物理性引力連線,營造沉浸式視覺體驗。

3. 視差工作流與 Bento Grid

利用 GSAP ScrollTrigger 實現「Tasks Board」與「Mission Center」以立體視差平滑滑入,搭配現代 SaaS 最頂級的毛玻璃 Bento Grid 佈局。

4. 防禦性商業定價設計

實裝三欄式定價卡片,精確描述三種付費方案的計費邏輯:

  • 軟體買斷制(自有環境,客戶自負 Firebase 成本)
  • 軟體訂閱制(持續功能更新)
  • 全鏈訂閱制(每日 100MB 流量免費,超額 NT$80/GB,AI 費用依量計費)

部署與優化

在日本共享主機 Star Server 上完成部署,確保跨設備流暢體驗與快速加載速度。

成果亮點

  • 首屏視覺衝擊力提升,完美呈現產品的「隱性貢獻顯性化」核心價值
  • 防禦性定價邏輯完全透明化,規避 Firebase 成本爆增風險
  • 兼具極致視覺震撼、營運零風險與高轉化率的頂級 SaaS 形象網站