一邊捲動，一邊烘豆。

一個使用 GSAP 3 與 ScrollTrigger 的靜態一頁式網站，不需要建置步驟。程序生成的 canvas 會在每個捲動位置重新繪製咖啡豆，帶它經過從青綠到深焙的六個烘焙階段，豆溫與烘焙時間同步計數。往下捲動時，每一段都會升起，蓋過上一段。

• 程序生成的 canvas 烘豆：從青綠到深焙六個階段，每個捲動位置都重新繪製
• 跟著捲軸變化的豆溫與烘焙時間計數器
• 段落交接：下一段升起蓋過上一段，上一段往後退並變暗
• Lenis 平滑捲動只用在滑鼠與觸控板；觸控螢幕維持原生捲動
• 完整的減少動態與無 JavaScript 版面，烘焙改成六個階段的清單
• 文字疊在 canvas 上的地方，對比至少維持 4.5:1

動態是一層加上去的效果，不是內容本身。開啟減少動態或關閉 JavaScript 時，頁面會變成完整的靜態版面：烘焙變成六個階段的清單搭配一張靜止畫面，產地與飲品變成網格，門市變成三個區塊。在手機上，文字放在咖啡豆上方，畫廊維持寬版卡片。

減少動態

完整的靜態版面，沒有任何內容藏在動畫後面。

沒有 JavaScript

同樣完整的版面：每一段與它的文字都在頁面裡。

觸控螢幕

原生捲動。平滑捲動、卡片傾斜與磁吸按鈕只用在滑鼠與觸控板。

文字清楚可讀

疊在 canvas 烘焙畫面上的文字，對比至少維持 4.5:1。