HOLO+FACE
- Client
- HOLO+FACE (portrait & ID photo studio chain, Taiwan and Thailand)
- Agency
- ES Design
- Year
- 2024–2026
- Role
- Front-end development: home page motion, product, news, B2B and about pages; Thai market rollout; later performance & ops
- Design
- Constance (wireframes, style), Eason (visual design)
- Stack
- Nuxt 3, GSAP ScrollTrigger, Locomotive Scroll v5, Swiper, headless WordPress
- Link
- holoface.photos · holoface.co.th
HOLO+FACE sells a feeling: you, looking better than you expected. The home page is built around video, and the main motion idea is a single clip that never cuts. It moves with you from one section to the next.
HOLO+FACE 賣的是一種感覺：照出來比你預期的還好看。首頁以影片為主，最核心的動態是一支不會被剪斷的影片，它會跟著你從一段走到下一段。
The video handoff
The hero video starts full screen. As you scroll, two chained, pinned ScrollTrigger timelines shrink and move it until it lands exactly in the frame where the next section's video sits. That frame then becomes a live, autoplaying slider. It reads as one continuous object travelling down the page, and the slider simply takes over.
Hero 影片一開始是滿版。往下捲時，兩段串接的 pinned ScrollTrigger 時間軸把它縮小、移動，最後剛好落在下一段影片的位置上，接著那個框變成自動播放的 slider。看起來是同一個物件一路往下走，然後 slider 自然接手。
Getting there meant fighting jitter: sizes drift at the pin boundaries when scrolling fast. I snap sizes in the leave and enter-back callbacks so the handoff is clean in both directions.
難的是抖動：滑得快的時候，pin 的邊界上尺寸會飄。我在 onLeave 和 onEnterBack 裡把尺寸校正回來，往下、往上交棒都乾淨。
Scroll-linked layout
Further down, a gallery video collapses with scroll progress, using separate maths for mobile (height) and desktop (width). Text and images across the page are animated from a CSS --progress variable written by Locomotive, so most of the motion costs no JavaScript per frame. B2B and About have their own pinned, scrubbed timelines for the process and brand story.
再往下，有一支作品影片隨捲動進度收合，手機算高度、桌機算寬度。整頁的文字和圖片用 Locomotive 寫入的 CSS --progress 變數驅動，大部分動態每一幀都不用跑 JavaScript。B2B 和關於我們頁有各自的 pinned 時間軸，用來講服務流程和品牌故事。
Thailand
I took the site to a second market: Thai locale, locale-prefixed routing, a language menu and a separate production branch for holoface.co.th.
我把網站帶到第二個市場：泰文語系、帶語系前綴的路由、語言選單，以及 holoface.co.th 獨立的正式站分支。
Keeping it fast
Maintained since 2024. Later work included a file-based SSR cache, in-process caching with ETags that stopped memory-driven restarts, stale-while-revalidate on the home page, and a security clean-up after a spam-injection incident.
從 2024 年一路維護到現在。後期做了檔案式 SSR 快取、程序內快取加 ETag（解決因記憶體不足一直重啟的問題）、首頁 stale-while-revalidate，以及一次垃圾連結注入事件後的資安清理。
Credits
Project management: Ingia. Wireframes and style proposal: Constance. Visual design: Eason. Front-end lead: Eason (project setup, header, key visual, intro animation and the first version of the hero scale animation). Portfolio section UI & build, photo-collection gallery, About responsive layout: Melody. Front-end: Les.
專案管理：Ingia。線框與風格提案：Constance。視覺設計：Eason。前端主導：Eason（專案架構、header、主視覺、開場動畫與 hero 縮放動畫初版）。作品集區塊 UI 與實作、相簿、關於我們頁 RWD：Melody。前端：Les。