TMEX × JJA: festival companion & "Raise Your Beat Buddy"
- Client
- Taipei Music Center 臺北流行音樂中心: TMEX & JJA music festivals 2026
- Agency
- ES Design
- Year
- 2026
- Role
- Front-end development: event site, venue map, timetable; took over the stamp mini-game (steps 4–6 and wiring)
- Design
- Eason (proposal, desktop UI), Melody (wireframes, mobile UI)
- Stack
- Nuxt 4, Rive, Canvas 2D, GSAP, LINE LIFF, Geolocation, Camera & Web Share APIs, Google Cloud Run
A festival site gets used on a phone, in a crowd, between sets. We built a mobile-first companion with the lineup, a live timetable, a personal schedule and a venue map. On top of that sits a stamp-collecting game played inside LINE, where your character grows as you move around the venue.
音樂祭網站多半是在現場、人擠人、兩場演出之間用手機打開。我們做了一個手機優先的導覽網站，有演出陣容、即時節目表、個人行程和場館地圖。另外還有一個在 LINE 裡玩的集章小遊戲：你在場館裡走動，角色就會跟著長大。
The game
You name and dress a Rive character, your "Beat Buddy". Each stamp code you collect on site, or quiz you answer, feeds a growLevel input on the Rive state machine and the character evolves in front of you. Stamp codes are HMAC-verified and only unlock inside the venue's geofence, so they can't be shared online.
玩家先幫 Rive 角色「Beat Buddy」取名、換裝。在現場收集到的集章碼或答對的題目，會餵進 Rive 狀態機的 growLevel，角色當場進化。集章碼有 HMAC 驗證，也只有在場館的地理圍欄內才能解鎖，貼到網路上沒用。
At the end you take a photo. I composite the photo, your character and your stats into a collectible card on a canvas, export it as PNG and hand it to the native share sheet on iOS so it can go straight to your camera roll or Instagram. The card lands with a small bounce, and then a lottery form opens.
最後一步是拍照。我在 canvas 上把照片、角色和收集成績合成一張收藏卡，輸出 PNG，在 iOS 上直接叫出原生分享，可以存進相簿或丟到 IG。卡片出現時會彈一下，接著是抽獎表單。
Timetable
The timetable knows what time it is. A NOW line moves across the grid, the current set is tagged NOW PLAYING, and past sets fade out. Sets run past midnight up to 03:30, so the time maths can't assume one calendar day. Columns snap on swipe, and the venue filter follows whichever column you swipe to.
節目表知道現在幾點。一條 NOW 線在格子上移動，正在演的標成 NOW PLAYING，已經結束的會淡掉。演出會跨過午夜到 03:30，時間計算不能假設都在同一天。左右滑動時欄位會對齊，場館篩選也跟著滑到的欄位切換。
Venue map
A pan-and-zoom map built from scratch. Wheel and pinch zoom keep the point under your finger fixed, eased with a cubic tween. Firefox's line-based wheel deltas and a NaN edge case on pinch start are handled. Choosing a category flies the view to its pins. The pins are authored in the CMS through an image_pin field I built earlier for the studio's in-house CMS (see the Huashan map too).
從零寫的拖曳縮放地圖。滾輪和雙指縮放時，手指下的那個點保持不動，搭配 cubic 緩動。Firefox 以「行」為單位的滾輪值、雙指開始時的 NaN 邊界狀況都有處理。選分類時畫面會飛到對應的點位。點位是在 CMS 裡用我先前為公司自家 CMS 做的 image_pin 欄位標的（華山地圖也是用它）。
Credits
Project management: Melody. Proposal & desktop UI: Eason. Wireframes & mobile UI: Melody. Stamp-game UI: Eason and Melody. Back-end: Eason. Rive character animation, game landing background and game steps 1–3: Eason. Front-end: Les.
專案管理：Melody。提案與桌機 UI：Eason。線框與手機 UI：Melody。集章遊戲 UI：Eason、Melody。後端：Eason。Rive 角色動畫、遊戲首頁背景、遊戲 step 1–3：Eason。前端：Les。