精品香水 scroll storytelling
Noir Ambre
安靜奢華路線的香調敘事頁，滾動即是嗅覺的時間軸：前調、中調、後調。
自主練習 2026
開啟實際網站 ↗
部署於 Vercel · 原始碼未公開
我的角色
品牌調性設定、香調敘事結構、3D 場景與滾動時間軸的全部實作。
技術挑戰
香水頁面最難的是它要賣的東西完全不可見也不可聽。而 quiet luxury 的美學要求「少」— 少動畫、少顏色、少字，但每一個決定都要精準。多做一點就俗，少做一點就空。
成果
以 Le Labo、Byredo、Aesop 的畫廊式編輯風格為參照，把前中後調做成滾動的時間軸。技術棧是九個作品裡最密的 — Three.js 加 GSAP 加 ScrollTrigger 加 Lenis 四層疊合。
為什麼做這個
香水頁是最極端的命題：你要賣的東西看不到、聽不到、摸不到。
而且 quiet luxury 的規則是「少」。少動畫、少顏色、少字。這比多做難 — 每一個留下來的決定都得撐得住。
參照對象：Le Labo、Byredo、Aesop、Diptyque 的畫廊式編輯排版。
技術重點
- 香調時間軸：前調、中調、後調對應滾動進度，嗅覺的時間變成頁面的時間。
- 四層疊合：Lenis 平滑滾動 → ScrollTrigger 換算 → GSAP 時間軸 → Three.js 場景。這是九個作品裡技術棧最密的一個。
- 克制：這個專案刪掉的東西比留下的多。