Widgets
可重用的 catalog widget、cookbook hero 範本與 cookbook 片段的彙整目錄。
Catalog 元件
以 {% widget %} 短碼重複使用 1 項Cookbook hero 範本
Tier-1 行內圖樣板 4 項Cookbook 片段
Tier-2 能力片段 15 項-
前後對比滑桿
兩張圖疊在一起,中間一條可拖曳的分隔線,左右滑動揭露差異。
-
Canvas 2D rAF 迴圈
Canvas 動畫最精簡的主迴圈,內建暫停 / 重置與 DPR-aware 尺寸處理。
-
CSS 3D 變換
用 perspective + rotateX/Y/Z 做分層結構圖,讓堆疊關係有立體感。
-
CSS Container Query
用 @container 讓 widget 依容器寬度自適應排版,而非依視窗寬度。
-
可拖曳 SVG 把手
用 pointer events 在 SVG 內拖一個圓(或任意元素),並把座標夾在 viewBox 範圍內。
-
IntersectionObserver 進場揭露
元素進入 / 離開視窗時觸發 callback:scroll 敘事、延遲初始化、段落閱讀追蹤的基礎建材。
-
平實資料表
Spectral serif 表頭 + tabular 數字的資料表,選用時可加排序 JS。
-
Range 輸入綁定
把 <input type=range> 接上即時數值讀出與重畫 callback。
-
堆疊卡片 + SVG 降級
堆疊型 widget(N 層 / N 階段)的雙渲染:手機顯示會自然換行的 HTML 卡片,桌機顯示寬版 SVG 圖,同一組 radio 驅動兩者。
-
SVG 路徑變形
在兩個 SVG path d 屬性之間內插,做出平滑的形狀過場。
-
純 CSS 分頁切換
用 :has() + radio 做分頁,零 JS。被選的分頁內容顯示,其餘隱藏。
-
時間軸刷桿
水平時間軸加一個可拖曳的把手,圖隨把手位置更新到對應時間點。
-
CSS Anchor 定位的 Tooltip / Popover
用 CSS anchor-positioning 讓 popover 相對錨點元素定位,並提供 @supports 降級。
-
View Transition API
用 document.startViewTransition() 跑一段 callback,再為前後狀態之間的差異補上過場動畫。
-
Web Animations API
用 element.animate() 取得 CSS keyframes 之外更精確的時間控制。