雲門舞集舞蹈教室生日禮
從既有主視覺延伸角色動態、合作品牌優惠與跨裝置活動體驗。
案件資料
一頁活動網站，也能透過角色動作與節奏形成完整體驗。
雲門會員透過生日禮 Landing Page 查看八家合作品牌優惠。三伍杉負責網站設計與前端，並把布卡蛙角色素材重組成可在不同段落自由調度的動畫套件。
合作品牌8 家
身體角度8 種
手／腿素材10／12 組
形式Static HTML＋JavaScript
實際流程
每個段落，都讓角色為內容服務。
- 01 活動入口
會員閱讀生日禮與八家合作品牌優惠
- 02 角色調度
不同段落依內容調用布卡蛙姿勢與動作
- 03 跨裝置呈現
維持角色接縫、比例與 reduced motion 支援
01 CAMPAIGN
讓八家品牌優惠仍然維持同一個活動世界。
八家合作品牌的優惠條件、使用方式與連結格式各不相同；頁面以一致的資訊順序整理，讓會員能快速比較並找到使用入口。
02 CHARACTER
布卡蛙不是一段固定影片，而是一套可組合角色。
8 種身體角度、10 組手臂與 12 組腿部依關節座標重組，支援 idle、wave、dance 與 jump。
03 MOTION
不同頁面段落使用不同動作。
Loading、Hero、活動介紹與使用方式各自調用合適姿勢，讓角色動態跟著內容，而不是重複播放裝飾動畫。
04 RESPONSIVE
角色在手機上仍要維持接縫與動作比例。
實作處理關節校準、素材接縫、縮放與 reduced motion，讓跨裝置動畫保留完整度。
下一個案例
雅樂身心量覺 →