滾動與拖曳商品展示
交付可實際操作的網頁與可編輯原始檔。先確認本次是滾動、拖曳，還是二者共存；為既有頁面增加一種互動時，保留另一種已授權的互動。參考影片用於辨識視覺與運動關係，不能據此斷言原站使用了某個框架。頁面展示與真實電商訂單系統分別說明完成狀態。
從參考中提煉
對本地影片讀取時長和畫幅，抽取開頭、轉場中點、結束的畫面；必要時增加取樣以確認連續運動。記錄：主體位置與尺寸、視角變化、背景與道具、字級、遮擋順序、滾動方向與回滾行為。不要把錄影的外框、講解字幕或滑鼠誤當作網頁設計。
將參考整理為按滾動進度排列的動作表。分別標記畫面直接可見、推斷和本次選擇的實現方式。參考咖啡案例與路線判斷見 references/motion-design.md。
選擇呈現方式
- 需要真實視角變化、可互動旋轉或換材質：Three.js 三維模型配合 GSAP。有合適 GLB 時優先複用；簡單杯瓶罐可以用參數化幾何建模，明確是原創示意模型。
- 鏡頭固定、光影複雜、已有渲染素材：Canvas 序列序列幀。幀號由滾動進度決定；處理未載入幀與記憶體佔用，不能假設任意影片逐幀跳轉都流暢。
- 只做位移、透明度與平面傾斜：DOM/CSS 圖層即可。單張圖片不能產生真實的正面轉背面。
素材路線確定後再搭滾動邏輯。使用者未指定品牌時，可用明確的演示品牌及商品資料；不要虛構認證、銷量、評論或真實交易結果。
起步模板
有兩套自包含的 Vite + Three.js + GSAP 模板，按商品與任務選擇；新的品牌仍需重新設計視覺。
assets/starter/（coffee，預設）：咖啡滾動敘事疊加拖曳，風味換色與本地購物袋；mini.html是共享商品與購物袋的小程式風格 H5。assets/gallery/（gallery）：香水、耳機、手錶三種視覺主題。耳機支援滾動展開、三段文案與拖曳共存；香水與手錶使用拖曳和結構按鈕。可據此製作非咖啡案例。
建立到一個尚不存在的目錄（腳本不會覆蓋既有專案）：
python3 /path/to/scroll-product-showcase/scripts/create_project.py /absolute/path/to/new-project
cd /absolute/path/to/new-project
npm ci
npm run dev -- --port 5197
根據實際 skill 安裝路徑替換 /path/to/scroll-product-showcase。若埠被佔用，換一個可用埠並交付實際位址。
生成非咖啡案例時加 --template gallery。其耳機入口為 /?case=headphones，另有 /?case=perfume 與 /?case=watch。修改既有專案時直接修改該專案，不用生成器覆蓋它。
修改位置：
src/scene.js：相機、燈光、滾動姿態與獨立拖曳角度；咖啡模型在此，圖庫模型在src/models.js。src/scroll-story.js：滾動階段、同步文案與進度條。src/main.js：入口與互動狀態；咖啡的指標手勢在src/drag.js，購物袋在src/bag.js。- 咖啡
src/products.js、圖庫src/content.js：商品文案與配色。 src/style.css與index.html：版式、響應式佈局、文案和語義結構。- 咖啡
mini.html、src/mini.js、src/mini.css、src/cup-viewer.js：小程式風格介面；vite.config.js保留兩個建置入口。
模板用 CSS sticky 固定場景，用 ScrollTrigger 驅動進度；不要再在同一層疊加 pin。其他專案也可以改為 ScrollTrigger pin，但需移除衝突的 sticky 佈局。
互動組合與實現限制
涉及拖曳、滾動共存、結構按鈕或小程式介面時，讀取 references/interaction-modes.md，其中有姿態疊加、輸入分工與驗收要點。
- 用單一 0–1 進度控制滾動編排的模型、相機與文字；在相同手動角度下，正向與反向到同一進度應得到同一姿態。拖曳角度獨立儲存，再疊加到滾動姿態；不能讓兩個處理器互相覆蓋旋轉。
- 滾動與拖曳共存時，復位預設只清除手動角度，保留滾動進度與配色。結構按鈕若控制同一動作，應跳到時間線對應位置，避免另起動畫爭寫進度；使用者明確指定其他復位含義時遵從使用者要求。
- 先確定主體的安全區域，再放文字；手機端重設主體尺寸與軌跡，不能只把桌面版等比縮小。
- 標題、描述、選擇按鈕與價格放在可訪問的 HTML 中；Canvas 負責視覺表現。
- 更換貼圖時釋放舊貼圖；卸載時清理觀察器、動畫、事件與 GPU 資源。限制像素比，並避免不可見場景持續重繪。
- 為減少動態效果偏好提供靜態構圖與直接可達的商品資訊。WebGL 失敗時保留商品選擇與購物袋。
- 本地購物袋可做選擇、加減、刪除、持久化。未接入後端時清楚寫明演示，不能顯示訂單已提交或付款成功。
驗證與交付
先建置，再在瀏覽器檢查真實渲染。按實際互動覆蓋開頭、中段、末段、倒回、窄螢幕、減少動態效果及商品選擇；共存模式還要實測中段拖曳、繼續滾動與復位。切換案例後檢查文案、舞台高度與配色。若有購物袋，驗證數量、合計與重新整理後的狀態。查看頁面異常、資源載入和橫向溢出。
咖啡模板的 scripts/verify-browser.mjs 是可選回歸腳本，可透過 PLAYWRIGHT_MODULE 指向現有 Playwright 模組，BASE_URL 指向實際服務。若當前環境規定使用瀏覽器工具，則使用該工具完成同等互動驗收，不另起瀏覽器驅動。圖庫按上述場景使用瀏覽器工具驗證。只報告實際執行的檢查，仍需看截圖判斷視覺是否合格；建置成功或 HTTP 200 不能代替畫面驗收。
完成後給出預覽位址、原始碼目錄和關鍵截圖。說明實際實現路線以及尚未連接的服務。僅使用者明確要求錄影或影片時才額外錄製；不要把靜態截圖報告成互動驗證或錄影。
技術參考按需查詢：GSAP ScrollTrigger、Three.js GLTFLoader。