狀態與回饋系統元件
空狀態、錯誤頁、成功動畫、離線提示、載入序列。這些畫面通常最後才做,但使用者遇到問題時看到的就是它們。
共 8 個,其中 7 個免費、不需登入即可安裝。
非同步狀態槽:單一插槽元件在 idle/載入/空狀態/錯誤/內容五態間以高度變形與共享元素過渡——例如空狀態插圖摺疊退場的同時首筆資料滑入補位。
樂觀更新框架:包住任意列表或卡片的樂觀 UI 容器:使用者操作後項目立即以半透明幽靈態插入版面,伺服器確認時凝固實體化,失敗時顫抖回退並將錯誤移交 toast。
懸念揭示佇列:包住多個 Suspense 邊界的載入指揮器:先完成的區塊進入佇列,按作者指定順序與最小間隔依序揭示,遲到區塊自動接補位動畫,杜絕各區隨機 pop-in。
骨架屏交響系統:與最終版面同構的整頁骨架屏系統:骨架區塊按網格位置以方向性波次(左上至右下)逐區 FLIP 變形為真實內容尺寸後實體化,而非整頁同時淡入。
公告廣播列系統:可堆疊多則公告的頂部廣播列系統:訊息依優先級佇列輪播、支援倒數計時與 CTA 變體、關閉狀態記憶於 localStorage,高度變化時以 spring 平滑推擠頁面內容。
介面音效套件:一個 Provider 加 hook,用 Web Audio 即時合成 click、hover、success、error 等輕量介面音效並附加到任意元件,內建音量控制、全域開關與使用者偏好尊重,零音檔零額外請求。
即時動態資訊條:釘在視窗底部的鎖屏式 Live Activity 卡片,左右插槽顯示圖示與即時狀態、中央為進度軌道,狀態更新時數字翻轉,並可在窄條與完整卡之間彈簧展開。
Duolingo 式連續天數火焰:數字增加時火焰爆閃、里程碑變色