Chan Kee 陳記點心

Every major section has curved top and bottom edges drawn as SVG clip paths. The curves are attached to a small mass-spring-damper simulation, and its input is your scroll velocity from Lenis. Scroll down quickly and the edges stretch and lag behind. Stop and they wobble back into place. Flick back up and they bulge the other way.

每個主要區塊的上下緣都是 SVG clip path 畫的曲線。曲線接在一個小小的「質量－彈簧－阻尼」模擬上，輸入是 Lenis 給的捲動速度。往下滑得快，邊緣會被拉長、跟不上；停下來會晃一晃再回位；往回甩，就往另一邊鼓起來。

I packaged it as a Vue directive, v-jelly, so any section can opt in with one attribute. It runs on the hero, home sections, product and news pages, and the footer. All instances share one rAF loop.

我把它包成 Vue directive v-jelly，任何區塊加一個屬性就能用。首頁 hero 和各段落、產品頁、最新消息、footer 都有掛，全部共用同一個 rAF 迴圈。

Changing pages pulls three SVG layers in the brand colours across the screen, one after another. The route swap happens at the midpoint, while the screen is fully covered, so you never see the old page snap away. It runs as a GSAP master timeline with cover and exit sub-timelines and events at the midpoint.

換頁時，三層品牌色的 SVG 依序蓋過畫面。路由在中間點、畫面完全被蓋住時才切換，看不到舊頁面突然消失。結構是一條 GSAP 主時間軸，下面分成蓋上和退場兩段，中間點發事件。

• The loader and product category icons are sprite sheets, played with CSS steps(). • A single-rAF scroll-progress directive with lerp, which I now reuse across projects, plus a pinned horizontal-scroll section. • Bilingual zh/en, product catalogue managed in WordPress.

• Loading 和產品分類 icon 是 sprite sheet，用 CSS steps() 播放。 • 單一 rAF、帶 lerp 的捲動進度 directive，後來在其他專案也一直沿用；另外有 pinned 橫向捲動區塊。 • 中英雙語，產品型錄由 WordPress 管理。

Project management: Ingia. Wireframes, style direction and key visual: Constance. Desktop UI: Eason. Mobile UI, icons and badges: Mou. Development: Les.

專案管理：Ingia。線框、風格提案與主視覺：Constance。桌機 UI：Eason。手機 UI、icon 與徽章：Mou。程式開發：Les。