React 電商購物流程元件

拋物入袋：點擊加入購物車時商品縮圖沿貝茲弧線飛向購物車圖示，圖示受擊產生果凍擠壓、徽章數字彈跳遞增，並支援連續點擊時多顆縮圖併發飛行。

變體色彩舞台：商品展示舞台在點選色票時同步演出三重轉場：背景以放射漸層從色票位置暈開至該變體色、商品圖交叉溶接、價格與型號文字翻轉更新。

組合搭售機：上方商品格與下方組合插槽構成的搭售區塊，點選商品縮圖以 FLIP 飛入插槽、總價滾動更新，集滿指定件數時折扣環進度填滿並觸發折扣解鎖動畫。

錨定購買欄：左欄媒體與內容區塊自由長捲動、右欄購買面板黏性跟隨，並隨捲動位置將價格、已選變體與 CTA 以 FLIP 濃縮成迷你結帳膠囊，逼近頁尾評論區時再自動展開回完整面板。

限時發售看板：發售區塊內建三態狀態機：倒數中翻牌時鐘逐格翻落，開賣瞬間 CTA 彈性放大解鎖並啟動庫存消耗條，售罄後整區降飽和並滑入補貨通知表單。

收據式購物車：購物車以熱感應收據紙為隱喻：品項如出單機逐行打印進場、鋸齒紙緣隨內容增長延伸、小計與免運門檻進度在紙尾滾動更新，移除品項時該行被劃線撕出。

對決比較盤：在商品網格勾選商品後底部滑出收集盤，點擊比較時縮圖以 FLIP 飛入展開的全幅規格表，接著逐列掃描並對每列優勝者以底色脈衝標記差異、可一鍵隱藏相同列。

包裹旅程：售後追蹤頁區塊：包裹圖示沿垂直虛線路徑隨訂單狀態前進，已完成節點依序打勾點亮、當前節點呼吸脈動，預計送達日以日曆翻頁動畫呈現。

庫存脈動計：庫存量條以液面下降動畫呈現消耗，跨越門檻時顏色分段轉換並輕微震動，進入低庫存後整條呼吸脈動並顯示滾動遞減的剩餘件數。

商品卡點開快速預覽彈窗：圖片切換、規格選擇、加入購物車

顏色色票與尺寸選擇器，缺貨斜線、選中彈跳與庫存提示

水平滑動的最近瀏覽商品列，邊緣漸隱與吸附滾動

超商取貨三段選擇：通路→縣市／區→門市清單，含搜尋、營業資訊與已選門市摘要卡；品牌中性、資料由 props 提供

商品頁內嵌分期試算：3／6／12／24 期切換、年利率與手續費、每期金額滾動數字、總利息與 0 利率徽章

多階門檻進度條（免運→贈品→折扣）：「再買 NT$X 享免運」滾動數字、越過門檻變色與小彩帶，可貼在購物車頂欄

直播賣場 UI 疊層：彈幕留言流、「+1」喊單自動計數與浮出、置頂商品卡與庫存倒數、觀看人數脈動與愛心噴發

以人數計的團購卡：已跟團頭像堆疊、階梯團購價、成團倒數，成團瞬間 CTA 變態並慶祝，未成團退款提示