Wujiu 伍玖燒肉
- Client
- 59 燒肉 / 59 Barbecue (yakiniku restaurant)
- Agency
- ES Design
- Year
- 2023 (development from 2022)
- Role
- Front-end development & motion (sole front-end developer)
- Design
- Eason (design director), Constance (designer)
- Stack
- Nuxt 3, Locomotive Scroll (horizontal mode), GSAP ScrollTrigger, headless WordPress (later made static)
- Recognition
- Awwwards Honorable Mention, 27 Jun 2023 (awwwards.com/sites/59-yakiniku)
59 Barbecue is about craft and a shared Chinese food culture. The design team chose a horizontal layout that reads like an unrolled handscroll, a smoky backdrop that puts you inside the restaurant, and a Japanese clerical-script typeface (清御隷書体) for the headings. My job was to make that work in a browser: on desktop the whole site scrolls sideways; mobile switches back to vertical.
59 燒肉講究匠人精神，也想傳遞華人共同的飲食記憶。設計團隊選了像展開卷軸一樣的橫向版面、讓人彷彿走進店裡的煙霧背景，標題用日文的清御隷書体。我的工作是讓這些在瀏覽器裡真的跑得起來：桌機版整站橫向捲動，手機版改回直向。
Horizontal scroll, properly
Locomotive Scroll runs in horizontal mode, and GSAP ScrollTrigger has to understand that. I bridged the two with scrollerProxy so pins and scrubs work inside the horizontal scroller. The news strip pins in place while the page keeps moving past it, and each "frame" of the home page triggers a full-screen smoke video that drifts over the content as you arrive.
Locomotive Scroll 開橫向模式，但 GSAP ScrollTrigger 也要知道這件事。我用 scrollerProxy 把兩邊接起來，pin 和 scrub 才能在橫向捲軸裡正常運作。最新消息那一條會釘住，頁面繼續從它旁邊滑過去。首頁每一個「畫格」抵達時會觸發一段全螢幕煙霧影片，飄過內容。
Typography
Much of the layout uses vertical East Asian typesetting (writing-mode: vertical-lr), mixed with horizontal English. Titles reveal character by character, with delays computed per character, in both languages.
版面大量使用直排（writing-mode: vertical-lr），和橫排英文混搭。中英標題都逐字出現，每個字的延遲另外計算。
Details
• The logo draws itself as an SVG line animation when it enters the viewport. • On the menu page, a photo of each dish follows the cursor as you hover the list, eased and cross-faded between items. • A custom v-vp directive handles in-view states and horizontal parallax for images that overflow their frame. • Font loading caused race conditions with layout measurement in horizontal mode. I fixed them so the scroll length is correct on first load.
• Logo 進入畫面時用 SVG 描線把自己畫出來。 • 菜單頁滑過品項時，菜色照片會跟著游標移動，有緩動，切換品項時交叉淡入。 • 自寫的 v-vp directive 處理進場狀態，以及圖片超出框時的橫向視差。 • 字型載入跟橫向模式的版面量測有競態問題，修好之後第一次載入的捲動長度才會正確。
Credits
Design director: Eason. Designer: Constance. Development: Les. Project management: Ingia. (Source: ES Design case page.)
設計總監：Eason。設計師：Constance。程式開發：Les。專案管理：Ingia。（來源：ES Design 官網作品頁）