# WebberUI

> 為 vibe coder 與網頁開發者打造的 React 元件工具，以 WebberUI registry 模式發佈：源碼直接安裝進使用者專案，沒有執行期相依。共 533 個元件（399 個免費）與 104 套整頁模板。提供互動預覽、可調整的動畫元件與整頁模板，文件支援英文及繁體中文。

English version of this index: https://webberui.com/llms.txt

## 安裝方式

免費元件不需授權：`npx webberui@latest add https://webberui.com/r/<name>.json`
Pro 元件需要授權，設定方式見 https://webberui.com/zh-tw/docs/pro-setup
機器可讀的完整索引（含每個項目的 free/pro 層級）：https://webberui.com/r/registry.json
MCP server（讓 AI agent 直接安裝元件）：npm 套件 @webberui/mcp

## 重要頁面

- [元件總覽](https://webberui.com/zh-tw/components)：可搜尋、依分類與 Free/Pro 篩選
- [模板](https://webberui.com/zh-tw/templates)：104 套整頁模板
- [快速開始](https://webberui.com/zh-tw/docs)
- [安裝 Pro 元件](https://webberui.com/zh-tw/docs/pro-setup)
- [區段組裝器](https://webberui.com/zh-tw/composer)：同模板內抽換區段，一鍵安裝整頁
- [Theme Studio](https://webberui.com/zh-tw/theme)：匯出 CSS 變數／Tailwind v4 @theme／Figma tokens
- [定價](https://webberui.com/zh-tw/pricing)
- [授權條款](https://webberui.com/license)：source-available，可商用、可改，不可再散布原始碼

## 元件（依分類）

### 文字動畫

分類頁：https://webberui.com/zh-tw/components/category/text-animation

- [Flip Words](https://webberui.com/zh-tw/docs/flip-words) (free): 自動循環翻閃一組詞語，逐字模糊淡入，容器寬度隨字自適應
- [Split Text Reveal](https://webberui.com/zh-tw/docs/split-text) (free): 逐字/逐詞/逐行 stagger 進場，可設觸發時機
- [Scroll Text Highlight](https://webberui.com/zh-tw/docs/scroll-text-highlight) (free): 滾動時逐字顯色/加深（opacity scrub）
- [Rolling Text](https://webberui.com/zh-tw/docs/rolling-text) (free): hover 時字元上下滾動翻轉
- [Rolling Number](https://webberui.com/zh-tw/docs/rolling-number) (free): 數字滾輪式過渡（價格、統計數）；避開 npm `number-flow` 撞名
- [Scramble Text](https://webberui.com/zh-tw/docs/scramble-text) (free): 亂碼解密效果逐字定型
- [Text Morph](https://webberui.com/zh-tw/docs/text-morph) (free): 兩段文字間平滑變形過渡
- [Velocity Marquee](https://webberui.com/zh-tw/docs/velocity-marquee) (free): 跑馬燈，速度隨滾動速度變化、可反向
- [Gradient Shine Text](https://webberui.com/zh-tw/docs/gradient-shine-text) (free): 掃光/漸層流動文字
- [Handwriting Text](https://webberui.com/zh-tw/docs/handwriting-text) (pro): SVG 路徑手寫描邊動畫
- [3D Rolling Text](https://webberui.com/zh-tw/docs/3d-rolling-text) (pro): 滾動驅動的 3D 圓柱文字
- [Typewriter Text](https://webberui.com/zh-tw/docs/typewriter-text) (free): 逐字打字並帶閃爍游標的經典打字機效果
- [Text Hover Gradient](https://webberui.com/zh-tw/docs/text-hover-gradient) (free): hover 時以漸層輪廓描邊填色（x.ai 風）
- [Text Pressure](https://webberui.com/zh-tw/docs/text-pressure) (free): 字元依游標壓力區即時縮放變形（可變字體）
- [Glitch Text](https://webberui.com/zh-tw/docs/glitch-text) (free): RGB 分離與抖動的故障（glitch）文字效果
- [Text Highlighter](https://webberui.com/zh-tw/docs/text-highlighter) (free): 模擬手繪螢光筆掃過的標記高亮
- [Circular Text](https://webberui.com/zh-tw/docs/circular-text) (free): 字元沿圓形排列並可持續旋轉
- [Curved Text Loop](https://webberui.com/zh-tw/docs/curved-text-loop) (free): 文字沿自訂曲線流動、可拖曳互動
- [Falling Text](https://webberui.com/zh-tw/docs/falling-text) (free): 字元帶重力掉落並彈跳落定
- [Video Text](https://webberui.com/zh-tw/docs/video-text) (free): 文字字腔內填入播放中的背景影片
- [Split Flap Board](https://webberui.com/zh-tw/docs/split-flap-board) (pro): Vestaboard 式機械分裂翻牌字元切換
- [True Focus Text](https://webberui.com/zh-tw/docs/true-focus-text) (free): 逐詞在模糊與清晰之間循環聚焦
- [Line Shadow Text](https://webberui.com/zh-tw/docs/line-shadow-text) (free): 帶移動線性投影的立體標題文字
- [Ascii Art](https://webberui.com/zh-tw/docs/ascii-art) (free): 將圖片轉為可動畫的 ASCII／像素藝術
- [閃粒文字](https://webberui.com/zh-tw/docs/sparkles-text) (free): 文字周圍持續生成、汰換閃爍的四芒星點，增添靈動的魔法感
- [Wave Text](https://webberui.com/zh-tw/docs/wave-text) (free): 每個字素沿正弦波上下起伏，可調振幅、波長與速度，hover 可加速
- [Decrypt Text](https://webberui.com/zh-tw/docs/decrypt-text) (free): 亂碼字元快速跳動後逐一鎖定為真實文字，駭客風解密效果
- [Neon Flicker Text](https://webberui.com/zh-tw/docs/neon-flicker-text) (free): 霓虹燈管質感文字，隨機微閃爍與多層光暈，可自訂色彩
- [Blur Reveal Text](https://webberui.com/zh-tw/docs/blur-reveal-text) (free): 進入視窗時整段文字由重模糊逐行聚焦清晰，適合段落敘事
- [Karaoke Text](https://webberui.com/zh-tw/docs/karaoke-text) (free): 逐字依時間軸上色的歌詞行，當前行放大聚焦
- [Logo Reveal Set](https://webberui.com/zh-tw/docs/logo-reveal-set) (free): 五種常見的 logo 進場：光暈放大、描邊後填色、掃光、圖標先到字標滑出、字標形變，可掛載、進入視口或手動觸發。
- [Strike Reframe Text](https://webberui.com/zh-tw/docs/strike-reframe-text) (free): 句子先被一筆手繪劃線劃掉，再由新句子從下方升起取代，可串接多組，適合「舊說法 → 新說法」的論點翻轉。
- [Liquid Reveal](https://webberui.com/zh-tw/docs/liquid-reveal) (pro): 以 SVG 位移濾鏡讓內容像隔著液滴折射晃動，點擊或進入視口時折射歸零、液面破裂，清楚揭露標誌或標題。
- [Keyword Converge](https://webberui.com/zh-tw/docs/keyword-converge) (free): 散落的關鍵字雲向中心收攏、彼此融合，最後收斂成一句結論，適合把一堆零散想法歸納成核心訊息的段落。

### 背景

分類頁：https://webberui.com/zh-tw/components/category/background

- [Aurora Background](https://webberui.com/zh-tw/docs/aurora-background) (free): 極光流動背景
- [Gradient Mesh](https://webberui.com/zh-tw/docs/gradient-mesh) (free): 動態網格漸層背景
- [Particle Field](https://webberui.com/zh-tw/docs/particle-field) (free): 互動粒子場（游標排斥/連線）
- [Beams Background](https://webberui.com/zh-tw/docs/beams-background) (free): 光束沿路徑流動背景
- [Grain Overlay](https://webberui.com/zh-tw/docs/grain-overlay) (free): 噪點顆粒質感疊層
- [Interactive Dot Grid](https://webberui.com/zh-tw/docs/interactive-dot-grid) (free): 游標互動點陣（波紋/磁吸）
- [Shader Waves](https://webberui.com/zh-tw/docs/shader-waves) (free): WebGL 流體波動背景
- [Spotlight Background](https://webberui.com/zh-tw/docs/spotlight-background) (free): 聚光燈掃射背景
- [Meteors](https://webberui.com/zh-tw/docs/meteors) (free): 背景流星／流星雨劃過效果
- [Globe](https://webberui.com/zh-tw/docs/globe) (free): 自轉可互動的 WebGL 地球（GitHub 風）
- [World Map](https://webberui.com/zh-tw/docs/world-map) (free): 點線程序動畫的世界地圖／連線圖
- [Vortex Background](https://webberui.com/zh-tw/docs/vortex-background) (free): 旋轉漩渦狀波動背景，適合 CTA
- [Retro Grid](https://webberui.com/zh-tw/docs/retro-grid) (free): 合成波風格透視捲動的復古網格
- [Lamp Effect](https://webberui.com/zh-tw/docs/lamp-effect) (free): Linear 風燈光錐聚焦的區塊標頭
- [Sparkles Bg](https://webberui.com/zh-tw/docs/sparkles-bg) (free): 可配置密度／顏色的閃爍星點背景
- [Interactive Box Grid](https://webberui.com/zh-tw/docs/interactive-box-grid) (free): hover 逐格高亮的滿版方格背景
- [Lightning](https://webberui.com/zh-tw/docs/lightning) (free): 程序生成分支閃電並發光
- [Starfield Galaxy](https://webberui.com/zh-tw/docs/starfield-galaxy) (free): 視差星場銀河，游標可互動
- [Hyperspeed](https://webberui.com/zh-tw/docs/hyperspeed) (free): 超空間曲速旅行的隧道動畫
- [Liquid Metal](https://webberui.com/zh-tw/docs/liquid-metal) (free): 反光液態鉻／金屬流動表面
- [Dither Shader](https://webberui.com/zh-tw/docs/dither-shader) (free): 復古有序抖動（dithering）噪點美學
- [Ballpit](https://webberui.com/zh-tw/docs/ballpit) (free): 可互動的物理彈跳球池
- [Light Rays](https://webberui.com/zh-tw/docs/light-rays) (free): 由上／側灑下的體積光束射線
- [Iridescence](https://webberui.com/zh-tw/docs/iridescence) (free): 虹彩偏移波動的著色器背景
- [Warp Background](https://webberui.com/zh-tw/docs/warp-background) (free): 卡片式時空扭曲網格背景
- [Matrix Letter Glitch](https://webberui.com/zh-tw/docs/matrix-letter-glitch) (free): 矩陣式下落字元故障流背景
- [Metaballs](https://webberui.com/zh-tw/docs/metaballs) (free): 平滑融合的液態黏球（metaballs／ferrofluid）
- [Topographic Lines Background](https://webberui.com/zh-tw/docs/topographic-lines-background) (free): SVG 等高線地形圖緩慢漂移變形的裝飾背景
- [Constellation Background](https://webberui.com/zh-tw/docs/constellation-background) (free): canvas 漂浮粒子與鄰近連線，游標靠近時吸附匯聚
- [Floating Orbs Background](https://webberui.com/zh-tw/docs/floating-orbs-background) (free): 大型模糊漸層光球緩慢漂浮交錯，柔和氛圍背景
- [Circuit Lines Background](https://webberui.com/zh-tw/docs/circuit-lines-background) (pro): 電路板線路圖上流動的光脈衝，科技感裝飾背景
- [Falling Petals](https://webberui.com/zh-tw/docs/falling-petals) (free): 季節性飄落背景：櫻瓣／楓葉／雪花三種預設形狀、每瓣翻轉飄搖與風向擾動、密度與風速可調、可依滾動加速
- [Halftone Background](https://webberui.com/zh-tw/docs/halftone-background) (free): 連續半色調點陣背景：點的大小隨捲動進度改變密度，游標附近的點放大，純 CSS 漸層繪製不需圖片。
- [Floating Card Field](https://webberui.com/zh-tw/docs/floating-card-field) (pro): 一群卡片在 3D 空間的不同深度緩慢漂浮：游標視差依深度不同，捲動時整體拉遠並散開，遠景帶景深模糊。
- [Silk Ribbons Background](https://webberui.com/zh-tw/docs/silk-ribbons-background) (pro): 以 Canvas 2D 繪製的絲綢緞帶背景：數條貝茲曲線帶在深色底緩慢擺動流動，沿法線的漸層模擬邊緣光澤，不使用 WebGL。

### 卡片與網格

分類頁：https://webberui.com/zh-tw/components/category/card

- [3D Tilt Card](https://webberui.com/zh-tw/docs/tilt-card) (free): 透視傾斜 + 眩光跟隨卡片
- [Hover Expand Gallery](https://webberui.com/zh-tw/docs/hover-expand-gallery) (free): 橫向擠壓展開圖庫（hover 佔位變化）
- [Bento Grid](https://webberui.com/zh-tw/docs/bento-grid) (free): 便當網格佈局，進場 stagger + hover 聚焦
- [Image Trail Card](https://webberui.com/zh-tw/docs/image-trail-card) (pro): 游標移動殘影圖片軌跡
- [Direction-aware Card](https://webberui.com/zh-tw/docs/direction-aware-card) (free): 進入方向感知的 hover 覆蓋
- [Morph Expand Card](https://webberui.com/zh-tw/docs/morph-expand-card) (free): 點擊卡片無縫放大為詳情（shared layout）
- [Card Deck](https://webberui.com/zh-tw/docs/card-deck) (free): 可拖曳抽牌的堆疊卡組
- [Spotlight Card](https://webberui.com/zh-tw/docs/spotlight-card) (free): 游標聚光燈邊框/背景卡片
- [Infinite Drag Canvas](https://webberui.com/zh-tw/docs/infinite-drag-canvas) (pro): 無限拖曳平移的作品畫布
- [Flip Reveal Card](https://webberui.com/zh-tw/docs/flip-reveal-card) (free): 3D 翻面卡片，正反內容過渡
- [Evervault Card](https://webberui.com/zh-tw/docs/evervault-card) (free): hover 揭示加密亂碼與漸層的卡片
- [Focus Cards](https://webberui.com/zh-tw/docs/focus-cards) (free): hover 聚焦單卡、其餘卡片模糊
- [Hover Highlight Cards](https://webberui.com/zh-tw/docs/hover-highlight-cards) (free): hover 時背景高亮滑動至當前卡片
- [Border Beam](https://webberui.com/zh-tw/docs/border-beam) (free): 沿容器邊框巡遊的發光光束
- [Electric Border](https://webberui.com/zh-tw/docs/electric-border) (free): 抖動電流能量邊框並發光
- [Neon Gradient Card](https://webberui.com/zh-tw/docs/neon-gradient-card) (free): 霓虹漸層邊框發光卡片
- [Card Swap](https://webberui.com/zh-tw/docs/card-swap) (free): 卡片以佈局動畫互換位置與堆疊
- [Pixel Reveal Card](https://webberui.com/zh-tw/docs/pixel-reveal-card) (free): 以像素溶解揭示內容的卡片
- [Lanyard Badge](https://webberui.com/zh-tw/docs/lanyard-badge) (pro): 3D 慣性擺盪的識別證吊牌
- [Tweet Card](https://webberui.com/zh-tw/docs/tweet-card) (free): 顯示推文（頭像／帳號／內容）的卡片
- [Glass Surface](https://webberui.com/zh-tw/docs/glass-surface) (free): 即時扭曲的玻璃擬態表面
- [Masonry Grid](https://webberui.com/zh-tw/docs/masonry-grid) (free): 響應式瀑布流佈局並動畫重排
- [Chroma Grid](https://webberui.com/zh-tw/docs/chroma-grid) (free): 灰階網格 hover 時局部顯色
- [3d Pin](https://webberui.com/zh-tw/docs/3d-pin) (free): hover 展開的漸層 3D 產品圖釘
- [Orbiting Circles](https://webberui.com/zh-tw/docs/orbiting-circles) (free): 沿圓形軌道環繞的圖示／頭像圈
- [Icon Cloud](https://webberui.com/zh-tw/docs/icon-cloud) (free): 可互動的 3D 標籤／圖示球雲
- [3d Image Ring](https://webberui.com/zh-tw/docs/3d-image-ring) (pro): 環形／半球投影的 3D 影像畫廊
- [Model Viewer](https://webberui.com/zh-tw/docs/model-viewer) (pro): three.js 3D 模型軌道檢視器
- [3d Marquee](https://webberui.com/zh-tw/docs/3d-marquee) (pro): 3D 傾斜網格跑馬展示牆
- [Holographic Card](https://webberui.com/zh-tw/docs/holographic-card) (pro): 隨游標角度變化的彩虹全息光澤卡片，附 3D 傾斜
- [Ticket Stub Card](https://webberui.com/zh-tw/docs/ticket-stub-card) (free): 帶打孔虛線與側邊缺口的票券卡片，點擊可撕開票根
- [Peel Sticker Card](https://webberui.com/zh-tw/docs/peel-sticker-card) (pro): hover 時如貼紙般翻起一角露出底下內容，可拖曳撕開
- [Polaroid Scatter Grid](https://webberui.com/zh-tw/docs/polaroid-scatter-grid) (free): 隨機旋轉散落的拍立得相片牆，hover 拉正並浮起
- [Paper Tear Reveal](https://webberui.com/zh-tw/docs/paper-tear-reveal) (pro): 拖曳撕開紙面露出底下內容，鋸齒撕邊與紙屑
- [Postage Stamp Frame](https://webberui.com/zh-tw/docs/postage-stamp-frame) (free): 以純 CSS clip-path 算出四邊扇貝齒孔的郵票外框，可包圖片或任意內容，附可選郵戳疊層。
- [Foil Surface](https://webberui.com/zh-tw/docs/foil-surface) (pro): 可包任何內容的燙金箔表面處理：五層漸層與混合模式隨捲動進度與游標位置變化光澤，不做傾斜。
- [Pixel UI Kit](https://webberui.com/zh-tw/docs/pixel-ui-kit) (free): 像素風介面三件組：步進鋸齒邊框卡片、按下會下沉的像素按鈕、逐格填滿的像素進度條，全部以 box-shadow 與 CSS 繪製。

### 覆蓋層與回饋

分類頁：https://webberui.com/zh-tw/components/category/overlay

- [Morphing Dialog](https://webberui.com/zh-tw/docs/morphing-dialog) (free): 卡片無縫 morph 成彈窗（shared layout）
- [Drawer](https://webberui.com/zh-tw/docs/drawer) (free): 多方向抽屜，拖曳關閉 + 慣性
- [Dynamic Island Toast](https://webberui.com/zh-tw/docs/dynamic-island-toast) (pro): 靈動島式通知堆疊
- [Toast Stack](https://webberui.com/zh-tw/docs/toast-stack) (free): 堆疊收合通知（hover 展開）
- [Cursor Tooltip](https://webberui.com/zh-tw/docs/cursor-tooltip) (free): 跟隨游標的彈性提示框
- [Preloader Collection](https://webberui.com/zh-tw/docs/preloader-collection) (pro): 預載動畫三款：文字/階梯/像素
- [Page Transition](https://webberui.com/zh-tw/docs/page-transition) (pro): 路由過場（View Transitions + 覆蓋揭示）
- [Confetti Feedback](https://webberui.com/zh-tw/docs/confetti-feedback) (free): 成功慶祝粒子/彩帶效果
- [Smooth Follow Cursor](https://webberui.com/zh-tw/docs/smooth-follow-cursor) (free): 彈簧物理自訂游標，含 blob 變形跟隨
- [Splash Cursor](https://webberui.com/zh-tw/docs/splash-cursor) (free): 游標移動產生流體潑濺與漣漪（fluid sim）
- [Click Spark](https://webberui.com/zh-tw/docs/click-spark) (free): 於點擊處迸發火花／粒子的回饋效果
- [Target Cursor](https://webberui.com/zh-tw/docs/target-cursor) (free): 四角準星游標鎖定並框住目標元素
- [Multi Step Loader](https://webberui.com/zh-tw/docs/multi-step-loader) (free): 長任務逐步勾選的清單式載入指示
- [Stepper](https://webberui.com/zh-tw/docs/stepper) (free): 獨立的多步驟進度 stepper 指示器
- [Circular Progress](https://webberui.com/zh-tw/docs/circular-progress) (free): 動畫百分比環形進度／量表
- [Accordion](https://webberui.com/zh-tw/docs/accordion) (free): 帶彈跳過渡的動畫手風琴／FAQ 展開
- [Link Preview](https://webberui.com/zh-tw/docs/link-preview) (free): hover 錨點時浮出動態網站預覽卡
- [Custom Scrollbar](https://webberui.com/zh-tw/docs/custom-scrollbar) (free): 可客製的動畫自訂捲軸
- [Undo Snackbar](https://webberui.com/zh-tw/docs/undo-snackbar) (free): 帶倒數進度環的復原提示條，時間到自動確認動作
- [Swipe Action List](https://webberui.com/zh-tw/docs/swipe-action-list) (pro): 列表項左右滑出封存/刪除操作，過閾值直接執行
- [Emoji Burst Reaction](https://webberui.com/zh-tw/docs/emoji-burst-reaction) (free): 點擊反應按鈕噴發一串上飄表情粒子，連點加倍
- [Pull To Refresh](https://webberui.com/zh-tw/docs/pull-to-refresh) (free): 行動端下拉更新容器：手勢阻尼與門檻、箭頭隨拉距旋轉變 spinner、onRefresh 回傳 Promise、完成打勾回收，桌機提供按鈕後備
- [Cookie Consent Banner](https://webberui.com/zh-tw/docs/cookie-consent-banner) (free): Cookie 同意橫幅＋偏好設定彈窗：必要／分析／行銷分類開關、全接受／全拒絕、同意狀態物件回呼與 localStorage 記憶
- [Popover](https://webberui.com/zh-tw/docs/popover) (free): 按鈕觸發的錨定浮層：依 side／align 定位並在視窗邊緣自動翻轉，淡入、微縮放、沿方向滑入，焦點進出與點外關閉完整處理。
- [Tooltip](https://webberui.com/zh-tw/docs/tooltip) (free): 錨定在元素旁的提示：hover 或 focus 延遲開啟，同群組內快速移動時立即切換，淡入微縮放並在邊緣翻轉，附箭頭。
- [Context Menu](https://webberui.com/zh-tw/docs/context-menu) (free): 在游標位置開啟的右鍵選單：子選單延遲展開、核取與單選項、快捷鍵標示，邊緣自動翻轉，觸控長按也能開啟。
- [Confirm Dialog](https://webberui.com/zh-tw/docs/confirm-dialog) (free): 需要明確回應的確認對話框：遮罩淡入、面板微縮放進場，焦點鎖定與捲動鎖定，危險操作可改為長按填滿才觸發。

### 應用殼層與面板

分類頁：https://webberui.com/zh-tw/components/category/app-shell

- [Tri-Pane Workspace Shell](https://webberui.com/zh-tw/docs/tri-pane-workspace-shell) (pro): 三欄工作區殼層：導航欄＋列表欄＋詳情欄的主從式應用殼層，內建完整響應式狀態機：面板可摺疊成圖示欄、平板降級為覆蓋層、手機轉為逐頁推進，所有轉換以彈簧序列編排。
- [Docked Inspector Rail](https://webberui.com/zh-tw/docs/docked-inspector-rail) (free): 停靠檢視欄：右側上下文檢查器面板以推擠模式展開，主內容同步以寬度動畫重排而非被遮罩覆蓋，面板內分節可摺疊並支援拖曳調整寬度。
- [Anchored Settings Shell](https://webberui.com/zh-tw/docs/anchored-settings-shell) (free): 錨點設定頁框架：左側 scroll-spy 錨點導覽、右側設定區塊的兩欄設定頁版面，捲動時導覽指示器平滑跟隨目前區塊，表單有未儲存變更時底部儲存列以彈簧滑入。
- [Setup Checklist Rail](https://webberui.com/zh-tw/docs/setup-checklist-rail) (free): 安裝引導進度欄：固定於應用側邊的 onboarding 檢查清單面板，完成項目時打勾、該列摺疊並以計數動畫推進頂端進度環，全部完成後整條欄位縮小為可展開的浮動徽章。
- [Notification Triage Panel](https://webberui.com/zh-tw/docs/notification-triage-panel) (free): 通知分流面板：依日期與來源分組的通知中心面板版面，含未讀／全部分頁、群組摺疊與批次清除，清除時項目依序橫掃離場、群組高度以彈簧收合補位。
- [Miller Column Browser](https://webberui.com/zh-tw/docs/miller-column-browser) (pro): 米勒欄層級瀏覽版面：Finder 式多欄層級版面，每深入一層就從右側彈簧推入一欄，超出寬度時整排平滑橫移，並以麵包屑同步高亮當前路徑。
- [Elastic Split Workspace](https://webberui.com/zh-tw/docs/elastic-split-workspace) (pro): 彈性分割工作區：多欄可拖曳分割的面板工作區版面，分隔線拖曳帶彈簧物理回饋，面板可一鍵收合成細條或展開至預設比例，收合時鄰近面板以寬度彈性動畫即時重排。
- [Zen Mode Shell](https://webberui.com/zh-tw/docs/zen-mode-shell) (free): 專注模式殼層：一鍵進入專注模式時側欄、頂欄與輔助面板依 GSAP 時間軸依序淡出滑離，主內容緩動重新置中放大，退出時逆向編排復原整個殼層。
- [Slide Over Panel](https://webberui.com/zh-tw/docs/slide-over-panel) (free): 滑覆浮動面板：一塊非模態的窄版浮動面板滑覆於內容之上，可拖曳磁吸至左右任一側、快甩即收合為邊緣把手，全程彈簧跟手。
- [Control Center Panel](https://webberui.com/zh-tw/docs/control-center-panel) (free): 控制中心面板：由玻璃模組方塊組成的控制面板網格，長按任一控制會原地彈簧放大為精細控制卡（滑桿、分段切換），背景同步模糊下沉，放開回彈歸位。
- [Now Playing Sheet](https://webberui.com/zh-tw/docs/now-playing-sheet) (free): 迷你播放器展開層：常駐底部的迷你播放列，點按後封面以共享元素放大、整層彈簧展開為全螢幕播放頁，下拉依手勢速度回收為迷你列。
- [Large Title Collapse Header](https://webberui.com/zh-tw/docs/large-title-collapse-header) (free): 大標題摺疊頁首：iOS 式大標題頁首在捲動時以共享元素縮移為置中小標題，下拉可拉出搜尋列並帶橡皮筋回彈，各區段標題依序吸附在頁首之下。
- [Ornament Toolbar](https://webberui.com/zh-tw/docs/ornament-toolbar) (free): 視窗裝飾工具列：工具列如 visionOS ornament 懸浮於內容面板邊緣之外、略帶 Z 軸抬升與跟隨視差，捲動時自動縮合為膠囊、停下時展開完整控制。
- [Inbox Split View](https://webberui.com/zh-tw/docs/inbox-split-view) (pro): 列表+閱讀窗格的郵件收件匣，選取滑動高亮、未讀徽章
- [File Manager Grid](https://webberui.com/zh-tw/docs/file-manager-grid) (free): 檔案/資料夾網格，框選多選、右鍵選單與檢視切換
- [Calendar Agenda View](https://webberui.com/zh-tw/docs/calendar-agenda-view) (pro): 月曆與當日議程聯動的行事曆面板，事件色籤
- [Shortcut Cheatsheet](https://webberui.com/zh-tw/docs/shortcut-cheatsheet) (free): 按 ? 呼出的快捷鍵速查浮層：分組列表、kbd 鍵帽、搜尋過濾
- [Palette Generator](https://webberui.com/zh-tw/docs/palette-generator) (free): 取一個主色自動衍生和諧配色：色卡翻牌、一鍵複製、鎖定重骰
- [Gradient Builder](https://webberui.com/zh-tw/docs/gradient-builder) (pro): 拖曳色停駐點編輯漸層：角度旋鈕、CSS 一鍵複製、預設庫
- [Clip Timeline](https://webberui.com/zh-tw/docs/clip-timeline) (pro): 影音剪輯式多軌時間軸：片段可拖移與拉長、吸附格線、播放頭拖曳與播放、時間尺隨縮放換刻度、留言釘與音訊波形。

### 資料展示

分類頁：https://webberui.com/zh-tw/components/category/data-display

- [Animated Stats](https://webberui.com/zh-tw/docs/animated-stats) (free): 進入視口計數統計組
- [Avatar Stack](https://webberui.com/zh-tw/docs/avatar-stack) (free): 頭像堆疊 + hover 展開提示
- [Testimonial Wall](https://webberui.com/zh-tw/docs/testimonial-wall) (free): 三欄反向滾動評價牆
- [Pricing Table](https://webberui.com/zh-tw/docs/pricing-table) (free): 月/年切換數字滾動定價表
- [Animated Charts](https://webberui.com/zh-tw/docs/animated-charts) (free): 折線/長條圖生長進場（SVG）
- [Activity Feed](https://webberui.com/zh-tw/docs/activity-feed) (free): 自動插入項目的動態列表
- [Animated Terminal](https://webberui.com/zh-tw/docs/animated-terminal) (free): 逐行打字模擬的命令列終端機
- [Code Block](https://webberui.com/zh-tw/docs/code-block) (free): 語法高亮程式碼區塊含複製鈕
- [Code Comparison](https://webberui.com/zh-tw/docs/code-comparison) (free): 並排 diff 的程式碼比較
- [File Tree](https://webberui.com/zh-tw/docs/file-tree) (free): 資料夾／檔案結構的樹狀展示
- [Animated Beam](https://webberui.com/zh-tw/docs/animated-beam) (free): 節點間流動光束，適合整合示意圖
- [Tracing Beam](https://webberui.com/zh-tw/docs/tracing-beam) (free): 沿 SVG 路徑隨捲動前進的光束
- [KPI Sparkline Cards](https://webberui.com/zh-tw/docs/kpi-sparkline-cards) (free): 數值滾動進場、內嵌 sparkline 折線與漲跌徽章的指標卡
- [Org Chart Tree](https://webberui.com/zh-tw/docs/org-chart-tree) (pro): 可收合展開的組織樹，SVG 連接線隨節點動畫重排
- [Leaderboard Podium](https://webberui.com/zh-tw/docs/leaderboard-podium) (free): 前三名頒獎台柱升起+其餘名次列表進場的排行榜
- [JSON Tree Viewer](https://webberui.com/zh-tw/docs/json-tree-viewer) (free): 可收合的 JSON 樹：型別配色、路徑複製、展開動畫
- [Weather Widget](https://webberui.com/zh-tw/docs/weather-widget) (free): 動畫天氣卡：太陽光暈/雨滴/雲飄/雪花場景、日夜配色、週預報
- [Sortable Data Table](https://webberui.com/zh-tw/docs/sortable-data-table) (pro): 通用資料表：點欄頭排序時列以 FLIP 滑到新位置、sticky 表頭、列展開明細、勾選與批次操作列、空狀態
- [Status Badge](https://webberui.com/zh-tw/docs/status-badge) (free): 帶計數的徽章：數字變化逐位滾動，可關閉並縮小退場、鄰居平順補位，另有直播用的脈衝變體。
- [Avatar](https://webberui.com/zh-tw/docs/avatar) (free): 頭像元件：圖片載入前顯示首字母，載入完成交叉淡接，附線上狀態呼吸點與 hover 描邊擴張，五種尺寸兩種外形。
- [Keycap Shortcut](https://webberui.com/zh-tw/docs/keycap-shortcut) (free): 鍵帽樣式的快捷鍵標示：可組合多鍵，開啟監聽時使用者實際按下對應鍵，鍵帽會下沉並回彈。
- [Issue Cascade Board](https://webberui.com/zh-tw/docs/issue-cascade-board) (pro): 暗色環境光暈上的議題列表：議題卡依序瀑布滑入，狀態膠囊切換時以版面動畫重排，hover 時卡片邊緣微光，適合產品發表區塊。
- [Multi-Source Queue](https://webberui.com/zh-tw/docs/multi-source-queue) (free): 電子郵件、電話、表單、櫃台等來源的請求從各自的圖示飛入同一條佇列，每筆保留來源徽章，可依來源篩選。

### 版面構圖

分類頁：https://webberui.com/zh-tw/components/category/layout

- [Data View Morph](https://webberui.com/zh-tw/docs/data-view-morph) (pro): 資料檢視變形：同一資料集在清單、表格、看板、卡片網格四種版面之間切換時，每筆項目以共享元素動畫連續變形飛至新位置，維持使用者的空間記憶。
- [Hero Condense Header](https://webberui.com/zh-tw/docs/hero-condense-header) (pro): 英雄收攏頁首：捲動時 hero 區的標題、頭像與 meta 資訊以共享元素 FLIP 逐一遷移收攏進吸頂頁首的對應插槽，向上捲回時再依序展開歸位。
- [Drill Stack Panels](https://webberui.com/zh-tw/docs/drill-stack-panels) (pro): 鑽入堆疊面板：層層鑽入的詳情面板系統：每開一層新面板從右推入，下層面板向後縮退並帶視差與調暗，麵包屑可逐層依序彈出回退，支援 URL 同步。
- [Synced Outline Reader](https://webberui.com/zh-tw/docs/synced-outline-reader) (free): 同步大綱閱讀版面：內容欄＋大綱欄的雙欄閱讀版面：大綱側的指示脊椎隨閱讀位置在標題間「連續伸縮滑動」而非跳格，對應內文段落同步微微升起聚焦。
- [Parallel Text Columns](https://webberui.com/zh-tw/docs/parallel-text-columns) (pro): 對照雙欄版面：雙語或雙版本內容以左右對頁欄並排、句子層級互相配對，捲動時兩欄自動對齊對應段落，hover 任一句時另一欄的對應句同步以底色高亮連動。
- [Archive Index](https://webberui.com/zh-tw/docs/archive-index) (pro): 檔案索引頁：工作室檔案館式的全頁索引表格（年份／專案／類別多欄），欄位可排序並以 FLIP 重排，點擊某列時該列撐開成滿版詳情區塊、其餘列以彈性讓位下沉。
- [String Pinboard](https://webberui.com/zh-tw/docs/string-pinboard) (pro): 紅線釘板版面：卡片像釘在軟木板上的線索，彼此用會自然下垂的紅線（SVG 懸鏈線）連接，拖動任一張卡時所有相連的線即時改變鬆緊與垂度，適合流程說明、roadmap 與故事地圖。
- [Art Direction Morph](https://webberui.com/zh-tw/docs/art-direction-morph) (pro): 藝術指導換版：同一組標題、圖片與內文可在多套雜誌級版面構圖（瑞士網格、粗獷不對稱、古典置中）之間以 FLIP 佈局動畫無縫變形，切換時元素飛行重排、字級欄寬同步過渡，並附鍵盤/分頁指示切換器。
- [Paste-Up Assembly](https://webberui.com/zh-tw/docs/paste-up-assembly) (pro): 拼版組稿：區塊初始如散落在工作檯上的剪貼稿（隨機位移、旋轉、疊放），滾動進入時全部元素以 FLIP 飛回各自網格位置組成乾淨版面，反向滾動則重新散開。
- [Stage Manager Scenes](https://webberui.com/zh-tw/docs/stage-manager-scenes) (pro): 舞台調度版面：主內容置中如舞台，其餘場景以傾斜縮圖疊列於側欄，點選後以共享元素 FLIP 與中央內容對調位置，並帶景深模糊完成切換。
- [Era Strata Layout](https://webberui.com/zh-tw/docs/era-strata-layout) (pro): 年代地層版面：把年代／階段疊成水平地層帶的手風琴式版面，滾動或點擊時目標地層垂直擴張、其餘壓縮，層內內容帶視差浮出，適合公司沿革與產品演進頁。
- [View Continuity Grid](https://webberui.com/zh-tw/docs/view-continuity-grid) (pro): 視圖延續網格：卡片網格頁與詳情頁之間做「真實路由切換」的構圖：被點卡片的圖片與標題以 View Transitions API 跨頁變形延續，其餘卡片依距離向外退散、返回時依序歸位。
- [Expose Overview](https://webberui.com/zh-tw/docs/expose-overview) (pro): 總覽縮放版面：一鍵讓整頁各區塊以 FLIP 同時縮小飛入縮圖網格總覽，點選任一縮圖即放大回到該區塊位置，形成頁面級的空間導航地圖。
- [Live Preview Wizard](https://webberui.com/zh-tw/docs/live-preview-wizard) (free): 即時預覽精靈：左欄分步表單、右欄即時預覽畫布的頁面級雙欄 onboarding 版面，輸入即時 morph 反映到預覽 mock，步驟切換時表單方向性滑動、預覽交叉淡變。
- [Diagonal Section Divider](https://webberui.com/zh-tw/docs/diagonal-section-divider) (free): 多種造型的區段交界分隔：斜切、波浪、鋸齒、弧形
- [Overlap Collage Layout](https://webberui.com/zh-tw/docs/overlap-collage-layout) (free): 元素互相交疊的雜誌拼貼構圖，hover 各自浮起
- [Elastic Rope Divider](https://webberui.com/zh-tw/docs/elastic-rope-divider) (free): 可撥彈的橡皮筋分隔線，拉起放開會彈跳波動
- [Scroll Fade List](https://webberui.com/zh-tw/docs/scroll-fade-list) (free): 上下邊緣漸隱高度隨剩餘可捲距離即時變化的捲動清單：到頂不顯示上方漸層、到底不顯示下方漸層。
- [Paper Layers Scene](https://webberui.com/zh-tw/docs/paper-layers-scene) (free): 3 到 5 層撕邊紙片疊成的場景，隨捲動或游標做分層視差，每層有柔和紙張陰影與不規則撕邊，適合故事型首頁與編輯排版。

### 輸入元件

分類頁：https://webberui.com/zh-tw/components/category/input

- [Smooth Caret Input](https://webberui.com/zh-tw/docs/smooth-caret-input) (free): 彈簧物理平滑游標輸入框
- [OTP Input](https://webberui.com/zh-tw/docs/otp-input) (free): 驗證碼分格輸入，錯誤抖動/成功波紋
- [Tag Input](https://webberui.com/zh-tw/docs/tag-input) (free): 標籤輸入，新增/刪除彈性動畫
- [Vanish Input](https://webberui.com/zh-tw/docs/vanish-input) (free): 送出時文字粒子化消散
- [File Dropzone](https://webberui.com/zh-tw/docs/file-dropzone) (free): 拖放上傳，磁吸邊框 + 進度環
- [Multi-step Form](https://webberui.com/zh-tw/docs/multi-step-form) (pro): 多步驟表單，方向感知滑動過場 + 進度指示
- [Inline Edit Field](https://webberui.com/zh-tw/docs/inline-edit-field) (free): 點擊即編輯，佈局無縫 morph
- [Elastic Slider](https://webberui.com/zh-tw/docs/elastic-slider) (free): 把手拉伸帶彈簧物理的滑桿
- [Password Strength Input](https://webberui.com/zh-tw/docs/password-strength-input) (free): 即時強度計、規則檢查清單與顯示切換的密碼輸入
- [Range Dual Slider](https://webberui.com/zh-tw/docs/range-dual-slider) (free): 雙 handle 選取數值區間，附即時數值氣泡，適合價格篩選
- [Mention Textarea](https://webberui.com/zh-tw/docs/mention-textarea) (pro): 輸入 @ 觸發人員選單，插入高亮提及籤條的文字區
- [Signature Pad](https://webberui.com/zh-tw/docs/signature-pad) (free): canvas 手寫簽名：筆壓粗細、清除重寫、匯出 PNG
- [Credit Card Input](https://webberui.com/zh-tw/docs/credit-card-input) (pro): 擬真信用卡隨輸入即時更新，CVC 聚焦時卡片翻面
- [Emoji Rating Slider](https://webberui.com/zh-tw/docs/emoji-rating-slider) (free): 拖曳滑桿時表情從哭到愛心漸變，臉部隨值變形
- [Wheel Time Picker](https://webberui.com/zh-tw/docs/wheel-time-picker) (pro): iOS 風格 3D 滾輪選時間：慣性滾動、吸附、透視弧面
- [Pattern Lock](https://webberui.com/zh-tw/docs/pattern-lock) (free): 九宮格連線解鎖：拖曳畫圖形、成功/失敗回饋動畫
- [Star Rating](https://webberui.com/zh-tw/docs/star-rating) (free): 經典星星評分：半星、hover 預覽填色、鍵盤方向鍵、唯讀模式與評分人數、點選時星星彈跳，可自訂圖示與顆數
- [Quantity Stepper](https://webberui.com/zh-tw/docs/quantity-stepper) (free): 電商數量 ± 步進器：長按加速、上下限與到界抖動、可直接輸入、歸零變垃圾桶圖示、數字逐位滾動，緊湊／膠囊兩種樣式
- [NPS Survey Card](https://webberui.com/zh-tw/docs/nps-survey-card) (free): NPS 淨推薦值調查卡：0–10 分段按鈕依貶損／被動／推薦者著色、選後展開追問文字欄、送出後感謝態與分數計算
- [Select](https://webberui.com/zh-tw/docs/select) (free): 按鈕觸發的選擇器：目前值交叉淡接、選單錨定並在邊緣翻轉，群組與分隔、首字跳轉與方向鍵巡覽，高亮列滑動。
- [Drawn Checkbox](https://webberui.com/zh-tw/docs/drawn-checkbox) (free): 勾選時勾號描邊畫出、方塊微縮放回彈的核取方塊，半選橫線與勾號之間平滑變形，群組全選逐項錯開。
- [Radio Group](https://webberui.com/zh-tw/docs/radio-group) (free): 單選群組：選中圓點以彈簧放大，卡片變體的選中外框在選項間滑動，方向鍵切換也同樣滑動。
- [Form Field](https://webberui.com/zh-tw/docs/form-field) (free): 表單欄位容器：標籤、說明、錯誤訊息與前後綴整合，錯誤以高度展開收合不跳版，前後綴與輸入框共用聚焦外框。
- [Combobox](https://webberui.com/zh-tw/docs/combobox) (pro): 輸入即篩選的選擇器：注音組字中不過濾也不誤選，清單錨定並在邊緣翻轉，高亮列滑動，多選時選項化成可移除的標籤。
- [Dial Knob](https://webberui.com/zh-tw/docs/dial-knob) (free): 可拖曳轉動的旋鈕輸入：外圈 SVG 刻度、吸附點微震、指針彈簧到位、讀數逐位滾動，支援滾輪與方向鍵。
- [Switch-to-Slider Morph](https://webberui.com/zh-tw/docs/switch-to-slider-morph) (free): 開關與滑桿共用同一顆把手：開啟後把手跳上垂直或水平滑桿可拖曳調整數值，關閉時把手跳回開關，適合「啟用後再調強度」的設定。

### 按鈕與切換

分類頁：https://webberui.com/zh-tw/components/category/button

- [Magnetic Button](https://webberui.com/zh-tw/docs/magnetic-button) (free): 游標磁吸位移按鈕
- [Theme Toggle](https://webberui.com/zh-tw/docs/theme-toggle) (free): View Transitions 圓形擴散明暗切換
- [Play/Pause Morph](https://webberui.com/zh-tw/docs/play-pause-morph) (free): 播放/暫停圖形 morph 按鈕
- [Hold-to-Confirm](https://webberui.com/zh-tw/docs/hold-to-confirm) (free): 長按填充確認按鈕（危險操作）
- [Gooey Button](https://webberui.com/zh-tw/docs/gooey-button) (free): 液態黏滯效果按鈕（SVG filter）
- [Draggable Snap Button](https://webberui.com/zh-tw/docs/draggable-snap-button) (free): 可拖曳並回彈吸附的按鈕
- [Stateful Button](https://webberui.com/zh-tw/docs/stateful-button) (free): idle→loading→success/error 狀態機按鈕
- [Shimmer Button](https://webberui.com/zh-tw/docs/shimmer-button) (free): 光沿按鈕周邊流動的微光按鈕
- [Ripple Button](https://webberui.com/zh-tw/docs/ripple-button) (free): 點擊擴散漣漪的按鈕
- [Rainbow Button](https://webberui.com/zh-tw/docs/rainbow-button) (free): 彩虹漸層流動動畫按鈕
- [Moving Border Button](https://webberui.com/zh-tw/docs/moving-border-button) (free): 邊框繞行發光的凸顯按鈕
- [Liquid Fill Button](https://webberui.com/zh-tw/docs/liquid-fill-button) (free): hover 時液面自底部帶波浪漲滿按鈕，文字反色
- [Slide To Unlock](https://webberui.com/zh-tw/docs/slide-to-unlock) (free): 拖曳滑塊到底才觸發的確認控制，防誤觸
- [Segmented Morph Toggle](https://webberui.com/zh-tw/docs/segmented-morph-toggle) (free): 選中底塊以 spring 流動變形至新選項的分段控制
- [Equalizer Toggle](https://webberui.com/zh-tw/docs/equalizer-toggle) (free): 聲音開關：開啟時等化器條跳動、關閉凍結灰階
- [Tactile Button](https://webberui.com/zh-tw/docs/tactile-button) (free): 兩層結構的實體按鍵：面板浮在底座上，滑過微沉 2px、按下沉到底，實心色塊做出深度，不靠陰影模糊。
- [Switch](https://webberui.com/zh-tw/docs/switch) (free): 以彈簧位移的開關：thumb 可直接拖曳切換，可在 thumb 內放 icon 交叉淡接，另有壓下態的切換鈕變體。
- [Labeled Mode Switch](https://webberui.com/zh-tw/docs/labeled-mode-switch) (free): 兩態文字開關（例如「詢問｜自動」），玻璃質感把手以彈簧滑動，文字隨把手位置交叉淡接，適合切換助理或系統的運作模式。

### 滾動效果

分類頁：https://webberui.com/zh-tw/components/category/scroll

- [Card Stack Scroll](https://webberui.com/zh-tw/docs/card-stack-scroll) (free): 滾動堆疊卡片（縮放+吸頂）（示範元件）
- [Parallax Section](https://webberui.com/zh-tw/docs/parallax-section) (free): 多層視差區塊
- [Horizontal Scroll Section](https://webberui.com/zh-tw/docs/horizontal-scroll-section) (pro): 直向滾動驅動橫向位移區段
- [Sticky Reveal](https://webberui.com/zh-tw/docs/sticky-reveal) (free): 吸頂圖文對照揭示（左文右圖切換）
- [Image Sequence Scrub](https://webberui.com/zh-tw/docs/image-sequence-scrub) (pro): 滾動刷影格序列（產品頁式逐格播放）
- [Zoom Parallax](https://webberui.com/zh-tw/docs/zoom-parallax) (free): 滾動放大穿越圖片
- [Scroll Progress Set](https://webberui.com/zh-tw/docs/scroll-progress-set) (free): 進度指示三款：頂欄/圓環/側邊節點
- [Velocity Skew](https://webberui.com/zh-tw/docs/velocity-skew) (free): 滾動速度傾斜/模糊內容
- [Scroll Timeline](https://webberui.com/zh-tw/docs/scroll-timeline) (free): 滾動驅動時間軸（線條生長+節點亮起）
- [Section Snap Pin](https://webberui.com/zh-tw/docs/section-snap-pin) (pro): 區段釘選 + 吸附滾動編排
- [Container Scroll 3d](https://webberui.com/zh-tw/docs/container-scroll-3d) (free): 捲動時容器 3D 旋轉揭示內容
- [Hero Parallax Grid](https://webberui.com/zh-tw/docs/hero-parallax-grid) (pro): 多列反向視差的產品／作品牆
- [Parallax Depth Cards](https://webberui.com/zh-tw/docs/parallax-depth-cards) (free): 滾動時多層卡片以不同速度位移，形成景深視差
- [Scroll Spy Dots](https://webberui.com/zh-tw/docs/scroll-spy-dots) (free): 固定側邊圓點追蹤當前區段，點擊平滑跳轉，附標籤展開
- [Scroll Morph Blob](https://webberui.com/zh-tw/docs/scroll-morph-blob) (pro): 隨滾動進度在多個有機形狀間變形的漸層斑點

### 行銷展示區塊

分類頁：https://webberui.com/zh-tw/components/category/marketing

- [Roadmap Lane Board](https://webberui.com/zh-tw/docs/roadmap-lane-board) (free): 路線圖泳道板：Now / Next / Later 三欄泳道版面，項目卡以 shared layout 動畫在欄間晉升搬移，各欄含狀態色帶與數量徽章，支援唯讀展示或互動拖曳兩種模式。
- [Case Study Dossier](https://webberui.com/zh-tw/docs/case-study-dossier) (pro): 案例卷宗版面：卷宗式案例研究頁版面：左側 sticky 指標欄（ROI、留存等數字）隨右側長文滾動到對應章節時逐一點亮並滾動計數，全幅 pull-quote 區塊定期打斷雙欄節奏形成呼吸感。
- [Patchbay Integrations](https://webberui.com/zh-tw/docs/patchbay-integrations) (pro): 接線盤整合區塊：錄音室接線盤隱喻的整合展示區：左側是產品的輸出埠、右側是整合服務插孔網格，hover 或拖曳時 SVG 纜線帶垂墜鬆弛的物理曲線插入插孔並亮起指示燈。
- [Queue Waitlist Section](https://webberui.com/zh-tw/docs/queue-waitlist-section) (free): 排隊等候區塊：遊戲化 waitlist 區塊：提交 email 後翻轉顯示你的隊列號碼與前方人潮的視覺化隊伍，複製推薦連結後可看到自己的位置以插隊動畫即時前移。
- [Depth Mask Hero](https://webberui.com/zh-tw/docs/depth-mask-hero) (free): 鎖屏景深主視覺：主視覺採「大字級標題被去背主體局部遮擋」的鎖定畫面景深構圖，捲動時主體、標題與背景以不同速率分離產生真實深度。
- [Quest Map Section](https://webberui.com/zh-tw/docs/quest-map-section) (free): 關卡地圖區塊：區塊內是一條蜿蜒穿過多欄內容節點的遊戲關卡路徑，捲動時一枚標記沿 SVG 路徑前進，抵達節點時該站內容彈出、旗幟升起並留下已完成印記，適合 onboarding 與課程大綱。
- [Trophy Case](https://webberui.com/zh-tw/docs/trophy-case) (free): 成就獎盃牆：成就以玻璃櫃網格陳列，未解鎖為暗色剪影，解鎖時獎盃從底座升起並掃過一道高光與輕量紙屑，hover 可 3D 端詳並顯示取得條件與進度條。
- [Blueprint Process Section](https://webberui.com/zh-tw/docs/blueprint-process-section) (free): 藍圖流程區塊：工程藍圖風格的 how-it-works 版面：方格紙底上每個步驟是一個帶編號的標註工位，滾動時虛線引線、尺寸標註與剖面符號以 SVG 描邊動畫依序繪出。
- [Spec Label Section](https://webberui.com/zh-tw/docs/spec-label-section) (free): 規格標籤區塊：營養標示風格的產品規格區塊：粗細規則線構成的黑白表格排版呈現功能與數值，滾入視窗時逐列蓋章浮現，任一列可展開顯示註解與佐證連結。
- [Milestone Unlock Meter](https://webberui.com/zh-tw/docs/milestone-unlock-meter) (free): 里程碑解鎖量表：全幅進度區塊：液面／色塊隨數據或滾動上升充滿整個 section，每越過一個門檻刻度，對應的里程碑卡片即彈出解鎖並亮起。
- [Balance Scale Compare](https://webberui.com/zh-tw/docs/balance-scale-compare) (free): 天平比較版面：雙欄比較版面架在一座天平上，使用者把功能籌碼勾進左右任一側時，兩欄依累計權重物理下沉與翹起、支點槓桿同步傾斜，最後停在反映實際差距的角度。
- [Changelog Timeline Section](https://webberui.com/zh-tw/docs/changelog-timeline-section) (free): 版本更新時間軸區塊：版本徽章、類型籤條、進場動畫
- [FAQ Accordion Section](https://webberui.com/zh-tw/docs/faq-accordion-section) (free): 含即時搜尋過濾與分類籤的常見問題手風琴區塊
- [Pricing Calculator](https://webberui.com/zh-tw/docs/pricing-calculator) (pro): 用量滑桿即時試算月費的互動定價區塊，方案自動推薦
- [Feature Compare Matrix](https://webberui.com/zh-tw/docs/feature-compare-matrix) (pro): 方案功能對照表：sticky 首欄與表頭、差異列高亮、勾叉動畫
- [Prompt Showcase](https://webberui.com/zh-tw/docs/prompt-showcase) (free): 行銷用的提示框自動演出：發光邊框輸入框逐字打出提示、假游標滑入點擊送出、結果卡彈出，循環播放。
- [Integration Connect Grid](https://webberui.com/zh-tw/docs/integration-connect-grid) (free): 整合服務卡依序落下排成網格，再逐一切換到「已連接」狀態並描繪勾號，可自動播放或由使用者點擊連接。
- [Pain Point Orbit](https://webberui.com/zh-tw/docs/pain-point-orbit) (free): 在輸入框打字時，周圍的痛點卡片依序向中心靠攏、越來越擁擠，送出後一起散開消失，適合呈現「零散工具帶來的困擾」。

### 中文在地化

分類頁：https://webberui.com/zh-tw/components/category/chinese-localization

- [Zhuyin Ruby Text](https://webberui.com/zh-tw/docs/zhuyin-ruby-text) (free): 文字上方標註注音或拼音的 ruby 排版，hover 高亮、可切換模式
- [CJK Number Roller](https://webberui.com/zh-tw/docs/cjk-number-roller) (free): 數字以中文小寫/大寫/阿拉伯三種形式滾動切換，金額大寫自動轉換
- [Lunar / Gregorian Date Picker](https://webberui.com/zh-tw/docs/lunar-date-picker) (pro): 國曆農曆對照月曆：農曆日、節氣、傳統節日標註，雙曆切換
- [Taiwan Address Picker](https://webberui.com/zh-tw/docs/taiwan-address-picker) (free): 縣市/鄉鎮市區二級聯動選單，自動帶出郵遞區號
- [Taiwan Business Tax ID Input](https://webberui.com/zh-tw/docs/tax-id-input) (free): 台灣統編 8 碼輸入：即時檢查碼驗證、格式化、對錯動畫回饋
- [Taiwan Phone Input](https://webberui.com/zh-tw/docs/taiwan-phone-input) (free): 09 開頭手機號自動格式化 09xx-xxx-xxx，市話/手機自動判別
- [E-Invoice Carrier Input](https://webberui.com/zh-tw/docs/invoice-carrier-input) (pro): 手機條碼載具輸入：/ 開頭 8 碼驗證、Code39 條碼即時視覺化
- [Line Chat Bubbles](https://webberui.com/zh-tw/docs/line-chat-bubbles) (pro): 台灣人最熟的聊天 UI 組件：綠白氣泡、已讀、貼圖、日期分隔
- [Traditional Simplified Toggle](https://webberui.com/zh-tw/docs/traditional-simplified-toggle) (free): 繁體/簡體切換開關，內文逐字交叉淡變轉換
- [Vertical Couplet](https://webberui.com/zh-tw/docs/vertical-couplet) (free): 上下聯直書+橫批的春聯版面：紅底金字、逐字落筆進場
- [Seal Stamp](https://webberui.com/zh-tw/docs/seal-stamp) (pro): 方圓印章元件：朱文白文、蓋章壓印動畫與印泥暈染
- [Red Envelope Button](https://webberui.com/zh-tw/docs/red-envelope-button) (pro): 開紅包互動：待機微搖、點擊拆封、金額滾動與金幣噴發
- [Taiwan Id Input](https://webberui.com/zh-tw/docs/taiwan-id-input) (free): 台灣身分證字號輸入：檢查碼驗證、預設遮罩顯示、性別區徽章
- [Chinese Zodiac Wheel](https://webberui.com/zh-tw/docs/chinese-zodiac-wheel) (free): 十二生肖環形輪盤：旋轉選擇、選中生肖展開年份與特質卡
- [CJK Vertical Nav](https://webberui.com/zh-tw/docs/cjk-vertical-nav) (free): 漢字直書的側邊導覽列：writing-mode 直排、當前項墨線標記
- [ROC (Minguo) Date Picker](https://webberui.com/zh-tw/docs/roc-date-picker) (free): 民國／西元一鍵切換的日期選擇器：年月日格狀月曆＋民國年下拉，可解析「115/08/18」文字輸入，輸出 ISO 日期
- [Chinese Amount Input](https://webberui.com/zh-tw/docs/chinese-amount-input) (free): 輸入阿拉伯數字金額即時鏡射「新臺幣壹萬貳仟元整」大寫，千分位格式化、角分處理、一鍵複製
- [IME-Aware Search](https://webberui.com/zh-tw/docs/ime-aware-search) (free): 注音／拼音組字中不觸發查詢與 Enter 的搜尋框：compositionend 後才 debounce、組字狀態指示、結果關鍵字高亮、/ 快捷聚焦
- [Invoice Lottery Checker](https://webberui.com/zh-tw/docs/invoice-lottery-checker) (pro): 輸入發票號碼末 3 碼或全 8 碼即時比對獎號（獎號由 props 提供），中獎彩帶＋獎金滾動、未中獎安慰動畫
- [Moon Blocks Toss](https://webberui.com/zh-tw/docs/moon-blocks-toss) (free): 點擊擲出兩枚筊杯的 3D 翻轉動畫，落地判定聖杯／笑杯／陰杯並可綁 onResult 做趣味決策
- [Solar Terms Timeline](https://webberui.com/zh-tw/docs/solar-terms-timeline) (free): 以二十四節氣為主體的橫向時間軸：依日期定位當前節氣、距下一節氣倒數、四季色帶與物候說明卡
- [Taiwan Tile Map](https://webberui.com/zh-tw/docs/taiwan-tile-map) (pro): 22 縣市方塊格地圖（無需地理資料）：依數值著色的 choropleth、hover 提示、點選回呼，可當視覺化篩選器
- [Almanac Day Card](https://webberui.com/zh-tw/docs/almanac-day-card) (pro): 農民曆日曆卡：國曆大字＋農曆日期、宜／忌條列、沖煞與吉時，撕日曆翻頁動畫切換日期
- [Taiwan Stock Quote Card](https://webberui.com/zh-tw/docs/tw-stock-quote-card) (free): 台股慣例報價卡：紅漲綠跌、漲跌停鎖死配色、價格逐位滾動與閃動、漲跌幅徽章、成交量條與五檔簡表（假資料）
- [CJK Word Count Textarea](https://webberui.com/zh-tw/docs/cjk-word-count-textarea) (free): 中英混排字數統計 textarea：字數／字元／位元組三種計法即時切換、上限進度環、接近與超限警示、IME 組字中不誤計
- [Language Flip Text](https://webberui.com/zh-tw/docs/language-flip-text) (free): 同一句話在多種語言之間翻牌或垂直滾動切換，可停在指定語言，示範繁中、英文、日文，適合「現在支援多國語言」的公告。

### 導航

分類頁：https://webberui.com/zh-tw/components/category/navigation

- [Dock](https://webberui.com/zh-tw/docs/dock) (free): macOS 風格放大 dock 導航
- [Dynamic Island Nav](https://webberui.com/zh-tw/docs/dynamic-island-nav) (pro): 靈動島式膠囊導航，狀態 morph 展開
- [Expandable Tabs](https://webberui.com/zh-tw/docs/expandable-tabs) (free): 圖示→展開文字的分頁導航
- [Gooey Menu](https://webberui.com/zh-tw/docs/gooey-menu) (free): 液態黏滯展開選單
- [Scroll-aware Navbar](https://webberui.com/zh-tw/docs/scroll-aware-navbar) (free): 滾動收縮/隱藏/變寬的導航列
- [Mega Menu](https://webberui.com/zh-tw/docs/mega-menu) (pro): 大型下拉選單，高度自適應 morph
- [Fullscreen Menu](https://webberui.com/zh-tw/docs/fullscreen-menu) (pro): 全螢幕覆蓋選單（Nike 風格階梯揭示）
- [Command Palette](https://webberui.com/zh-tw/docs/command-palette) (free): ⌘K 命令面板，模糊搜尋 + 分組動畫（生態標配，免費搶用戶）
- [Pill Nav](https://webberui.com/zh-tw/docs/pill-nav) (free): 作用中項目滑動高亮的極簡藥丸導航
- [Bubble Menu](https://webberui.com/zh-tw/docs/bubble-menu) (free): 浮動圓形泡泡逐一展開的選單
- [Morphing Breadcrumbs](https://webberui.com/zh-tw/docs/morphing-breadcrumbs) (free): 層級切換時項目滑入滑出、當前層放大的動態麵包屑
- [Radial Orbit Menu](https://webberui.com/zh-tw/docs/radial-orbit-menu) (pro): 中心按鈕展開環繞排列的放射狀選單，依序彈出
- [Fluid Tabs](https://webberui.com/zh-tw/docs/fluid-tabs) (free): 指示條如液體般拉伸跟隨的頁籤，內容方向感切換
- [Dropdown Menu](https://webberui.com/zh-tw/docs/dropdown-menu) (free): 按鈕觸發的下拉選單：群組、分隔線、子選單、核取與單選項、快捷鍵標示，高亮列滑動、鍵盤與首字跳轉完整支援。
- [Pagination](https://webberui.com/zh-tw/docs/pagination) (free): 當前頁底塊在頁碼間滑動的分頁器：省略號可點開中間頁碼並錯開淡入，另有只顯示「3 / 12」且數字滾動的精簡變體。
- [Menubar](https://webberui.com/zh-tw/docs/menubar) (pro): 桌面應用式頂部選單列：開啟一個選單後 hover 相鄰項即直接切換，面板滑動到新位置而非關開，方向鍵完整巡覽。
- [Glass Tab Bar](https://webberui.com/zh-tw/docs/glass-tab-bar) (free): 手機底部的玻璃質感分頁列：圖示掛載時依序彈出、選取底塊滑動、選中項標籤展開，可選中央凸起主按鈕與徽章數字。

### 互動編排

分類頁：https://webberui.com/zh-tw/components/category/interaction

- [Mutation List Choreographer](https://webberui.com/zh-tw/docs/mutation-list-choreographer) (pro): 增刪編排列表：完整 CRUD 列表編排系統：新增時先撐開間隙再讓項目落入、刪除時鄰項合攏補位、排序以 FLIP 連續移動、批次操作以級聯波次執行，並附 undo 幽靈項。
- [Filter Composer Bar](https://webberui.com/zh-tw/docs/filter-composer-bar) (free): 濾鏡組合列：Linear 式的過濾器組合列，新加入的條件以膠囊 chip 彈入排列，chip 內欄位可原地展開編輯，移除時周圍 chip 以 FLIP 補位收攏。
- [Lasso Select Stage](https://webberui.com/zh-tw/docs/lasso-select-stage) (free): 套索多選舞台：在任意網格上拖出選取框，框到的項目依序浮起亮邊，放開後選取計數徽章聚合變形為浮動批次操作列，取消時操作列散回各項目。
- [Focus Recession Stage](https://webberui.com/zh-tw/docs/focus-recession-stage) (free): 焦點退場舞台：頁面級焦點系統：任一區域進入編輯或聚焦模式時，其餘版面整體向後退場——縮小、調暗、模糊成景深背景——Esc 或點擊外部時彈簧回彈歸位。
- [Roving Highlight System](https://webberui.com/zh-tw/docs/roving-highlight-system) (free): 漫遊選取高亮系統：單一共享的變形高亮面可跨容器在頁面任何註冊元素間旅行——從 tabs 滑到側欄再到網格卡片——並內建 roving tabindex 鍵盤導航與焦點環同步。
- [Column Transit Board](https://webberui.com/zh-tw/docs/column-transit-board) (free): 跨欄轉運看板：多欄狀態版面（任務看板式），卡片因程式狀態改變（而非拖曳）沿弧線飛越欄位：目標欄先撐開落點、原欄鄰卡合攏、飛行卡帶投影抬升。
- [Coachmark Tour Flow](https://webberui.com/zh-tw/docs/coachmark-tour-flow) (free): 導覽聚焦流程：產品導覽 overlay 以 SVG 遮罩在目標元素之間 morph 移動聚焦框，說明卡片沿最佳方位錨定並隨步進飛行跟隨，支援捲動追蹤目標位置。
- [Physics Tags](https://webberui.com/zh-tw/docs/physics-tags) (pro): 標籤像實體一樣掉落堆疊、可抓起拋擲，2D 物理模擬
- [Magnetic Fridge Poetry](https://webberui.com/zh-tw/docs/magnetic-fridge-poetry) (free): 冰箱磁鐵字卡可自由拖曳排列組句，微旋轉與吸附感
- [Drag Reorder List](https://webberui.com/zh-tw/docs/drag-reorder-list) (free): 長按拖曳重排的清單，其他項目讓位流動，附把手
- [Sticky Note Board](https://webberui.com/zh-tw/docs/sticky-note-board) (pro): 軟木板上的彩色便利貼：拖曳、新增、揉掉刪除
- [Konami Code](https://webberui.com/zh-tw/docs/konami-code) (free): 監聽按鍵序列觸發彩蛋效果的隱藏互動，附進度提示
- [Mouse Parallax Scene](https://webberui.com/zh-tw/docs/mouse-parallax-scene) (free): 多層元素隨滑鼠位移形成景深，附陀螺儀後備
- [Fanned Cards](https://webberui.com/zh-tw/docs/fanned-cards) (free): 像手中持牌般扇形展開的卡片組：滑過抽起、鄰卡讓位，往上拖曳或快甩即出牌飛到牌堆，卡面可放任意內容。
- [Flashcard Deck](https://webberui.com/zh-tw/docs/flashcard-deck) (free): 背單字式的字卡組：點擊或空白鍵翻面、左右拖曳或方向鍵分成「會／不會」，底部進度，結束顯示統計並可重來。
- [Node Wire Canvas](https://webberui.com/zh-tw/docs/node-wire-canvas) (pro): AI 工作流式的節點接線畫布：節點可自由拖曳、埠與埠之間以貝茲曲線相連、從埠拖出新連線、執行時沿線流動光點，支援平移縮放。
- [Radius & Shadow Tuner](https://webberui.com/zh-tw/docs/radius-shadow-tuner) (free): 可直接拖曳把手調整方塊的圓角、陰影與內距，並即時顯示數值讀數與對應 CSS，適合文件站示範設計 token。
- [Master Switch Cascade](https://webberui.com/zh-tw/docs/master-switch-cascade) (free): 翻動一個總開關，下方網格中的各個子開關依與總開關的距離依序跟著亮起或關閉，像漣漪擴散，也能單獨切換子開關。
- [Permission Wave Grid](https://webberui.com/zh-tw/docs/permission-wave-grid) (free): 管理者翻動一個開關，SVG 線路從開關沿路描繪到成員網格，成員頭像依波次逐列解鎖亮起，直觀呈現「一次授權給所有人」。
- [Keystroke Card Deck](https://webberui.com/zh-tw/docs/keystroke-card-deck) (free): 一疊待回應的卡片，按數字鍵 1、2、3 直接選擇答案，卡片帶著選項方向飛走、下一張補位，鍵盤優先、滑鼠也能點。
- [Folder Filing Grid](https://webberui.com/zh-tw/docs/folder-filing-grid) (free): 散落的文件卡片依分類飛進對應的資料夾，資料夾開口張合並累加數量，可自動整理也可手動拖曳歸檔。

### 電商購物體驗

分類頁：https://webberui.com/zh-tw/components/category/ecommerce

- [Cart Arc](https://webberui.com/zh-tw/docs/cart-arc) (free): 拋物入袋：點擊加入購物車時商品縮圖沿貝茲弧線飛向購物車圖示，圖示受擊產生果凍擠壓、徽章數字彈跳遞增，並支援連續點擊時多顆縮圖併發飛行。
- [Chromatic Variant Stage](https://webberui.com/zh-tw/docs/chromatic-variant-stage) (free): 變體色彩舞台：商品展示舞台在點選色票時同步演出三重轉場：背景以放射漸層從色票位置暈開至該變體色、商品圖交叉溶接、價格與型號文字翻轉更新。
- [Bundle Builder](https://webberui.com/zh-tw/docs/bundle-builder) (pro): 組合搭售機：上方商品格與下方組合插槽構成的搭售區塊，點選商品縮圖以 FLIP 飛入插槽、總價滾動更新，集滿指定件數時折扣環進度填滿並觸發折扣解鎖動畫。
- [Anchored Buy Rail](https://webberui.com/zh-tw/docs/anchored-buy-rail) (pro): 錨定購買欄：左欄媒體與內容區塊自由長捲動、右欄購買面板黏性跟隨，並隨捲動位置將價格、已選變體與 CTA 以 FLIP 濃縮成迷你結帳膠囊，逼近頁尾評論區時再自動展開回完整面板。
- [Product Drop Countdown](https://webberui.com/zh-tw/docs/product-drop-countdown) (free): 限時發售看板：發售區塊內建三態狀態機：倒數中翻牌時鐘逐格翻落，開賣瞬間 CTA 彈性放大解鎖並啟動庫存消耗條，售罄後整區降飽和並滑入補貨通知表單。
- [Receipt Cart](https://webberui.com/zh-tw/docs/receipt-cart) (free): 收據式購物車：購物車以熱感應收據紙為隱喻：品項如出單機逐行打印進場、鋸齒紙緣隨內容增長延伸、小計與免運門檻進度在紙尾滾動更新，移除品項時該行被劃線撕出。
- [Versus Tray](https://webberui.com/zh-tw/docs/versus-tray) (pro): 對決比較盤：在商品網格勾選商品後底部滑出收集盤，點擊比較時縮圖以 FLIP 飛入展開的全幅規格表，接著逐列掃描並對每列優勝者以底色脈衝標記差異、可一鍵隱藏相同列。
- [Parcel Journey](https://webberui.com/zh-tw/docs/parcel-journey) (free): 包裹旅程：售後追蹤頁區塊：包裹圖示沿垂直虛線路徑隨訂單狀態前進，已完成節點依序打勾點亮、當前節點呼吸脈動，預計送達日以日曆翻頁動畫呈現。
- [Stock Pulse](https://webberui.com/zh-tw/docs/stock-pulse) (free): 庫存脈動計：庫存量條以液面下降動畫呈現消耗，跨越門檻時顏色分段轉換並輕微震動，進入低庫存後整條呼吸脈動並顯示滾動遞減的剩餘件數。
- [Product Quick View](https://webberui.com/zh-tw/docs/product-quick-view) (pro): 商品卡點開快速預覽彈窗：圖片切換、規格選擇、加入購物車
- [Variant Swatch Picker](https://webberui.com/zh-tw/docs/variant-swatch-picker) (free): 顏色色票與尺寸選擇器，缺貨斜線、選中彈跳與庫存提示
- [Recently Viewed Rail](https://webberui.com/zh-tw/docs/recently-viewed-rail) (free): 水平滑動的最近瀏覽商品列，邊緣漸隱與吸附滾動
- [Convenience Store Pickup](https://webberui.com/zh-tw/docs/convenience-store-pickup) (pro): 超商取貨三段選擇：通路→縣市／區→門市清單，含搜尋、營業資訊與已選門市摘要卡；品牌中性、資料由 props 提供
- [Installment Calculator](https://webberui.com/zh-tw/docs/installment-calculator) (free): 商品頁內嵌分期試算：3／6／12／24 期切換、年利率與手續費、每期金額滾動數字、總利息與 0 利率徽章
- [Free Shipping Meter](https://webberui.com/zh-tw/docs/free-shipping-meter) (free): 多階門檻進度條（免運→贈品→折扣）：「再買 NT$X 享免運」滾動數字、越過門檻變色與小彩帶，可貼在購物車頂欄
- [Live Shopping Overlay](https://webberui.com/zh-tw/docs/live-shopping-overlay) (pro): 直播賣場 UI 疊層：彈幕留言流、「+1」喊單自動計數與浮出、置頂商品卡與庫存倒數、觀看人數脈動與愛心噴發
- [Group Buy Progress](https://webberui.com/zh-tw/docs/group-buy-progress) (free): 以人數計的團購卡：已跟團頭像堆疊、階梯團購價、成團倒數，成團瞬間 CTA 變態並慶祝，未成團退款提示
- [Coupon Code Input](https://webberui.com/zh-tw/docs/coupon-code-input) (free): 電商折扣碼輸入：套用成功票券撕角動畫＋折抵金額滾動、失敗抖動提示、已套用 chip 可移除，支援大小寫規格化
- [Receipt Printer](https://webberui.com/zh-tw/docs/receipt-printer) (pro): 付款完成後模擬熱感應出單機逐行送紙的收據元件：處理中、出單、完成三階段，紙底鋸齒、可撕下與重播。
- [Transaction List](https://webberui.com/zh-tw/docs/transaction-list) (free): 金融 App 式交易清單：依日期自動分組、金額逐位滾動與正負色、新交易插入時鄰列順移，可置頂與顯示狀態標籤。
- [Payment Success Sheet](https://webberui.com/zh-tw/docs/payment-success-sheet) (free): 底部付款面板的完整流程：面板滑上、付款鈕縮成處理中圓環、圓環形變成勾並脈衝一次、訂單摘要依序展開。

### 資料視覺敘事

分類頁：https://webberui.com/zh-tw/components/category/data-storytelling

- [Drilldown Stat Grid](https://webberui.com/zh-tw/docs/drilldown-stat-grid) (free): 下鑽統計網格：KPI 磚牆網格中點擊任一磚塊即在其所在列下方展開全寬詳情區塊，其餘磚塊以 FLIP 讓位下移，再次點擊收回原網格。
- [Callout Stat Hero](https://webberui.com/zh-tw/docs/callout-stat-hero) (free): 註解數據主視覺：以單一巨型數字撐滿首屏的 hero 版面，SVG 引導線從數字各部位動畫延伸至周邊註解卡，滾動時引導線逐條描繪、註解依序浮現。
- [Weighted Metric Wall](https://webberui.com/zh-tw/docs/weighted-metric-wall) (free): 權重指標牆：整面 KPI 磁磚牆，每塊磁磚的 grid 跨欄跨列尺寸依數值權重自動計算（數字越大版面越大），進場時由大到小瀑布式浮現，hover 展開明細層。
- [Year Pulse Grid](https://webberui.com/zh-tw/docs/year-pulse-grid) (free): 年度脈動格：GitHub 風的整年 365 日格牆作為互動導覽：載入時波浪掃過點亮強度色階，hover 單日浮出事件卡，點擊日格可過濾聯動旁欄清單。
- [Rank Shuffle Board](https://webberui.com/zh-tw/docs/rank-shuffle-board) (free): 排名洗牌榜：排行榜元件：資料更新時列以 FLIP 動畫互換位置、名次升降箭頭閃動、前三名自動升起頒獎台頭部，支援自動輪播更新模式。
- [Isotype Proportion Grid](https://webberui.com/zh-tw/docs/isotype-proportion-grid) (free): 圖標比例格：「每 X 人中有 Y 人」的 isotype 圖標方陣：數百個小圖示排成格陣，對應比例的圖示隨滾動波浪式變色點亮，並可逐步驟切換不同比例敘述。
- [Guess Gap Reveal](https://webberui.com/zh-tw/docs/guess-gap-reveal) (free): 猜測落差揭曉：先讓讀者拖曳滑桿或畫出趨勢線猜答案，放手後真實數據以動畫揭曉，並以色塊標示「你的猜測 vs 真實」的落差與其他讀者的猜測分佈。
- [Radar Skill Chart](https://webberui.com/zh-tw/docs/radar-skill-chart) (free): 多維度雷達圖：進場繪製動畫、hover 頂點數值、雙資料疊比
- [Bump Rank Chart](https://webberui.com/zh-tw/docs/bump-rank-chart) (pro): 多期名次連線圖：曲線描邊動畫、hover 高亮單一項目路徑
- [Gauge Meter](https://webberui.com/zh-tw/docs/gauge-meter) (free): 指針儀表盤：spring 擺動指針、分段色弧、數值滾動
- [Word Cloud](https://webberui.com/zh-tw/docs/word-cloud) (free): 權重字雲：字級映射權重、螺旋佈局、hover 浮起顯示數值
- [Orbit Timeline](https://webberui.com/zh-tw/docs/orbit-timeline) (free): 事件沿同心軌道環繞排列，選中事件展開詳情卡
- [Funnel Chart](https://webberui.com/zh-tw/docs/funnel-chart) (free): SVG 轉換漏斗：分層梯形生長進場、層間轉換率標籤、hover 高亮與提示、橫向直向雙模式
- [Sankey Flow](https://webberui.com/zh-tw/docs/sankey-flow) (pro): 桑基圖：節點欄位自動佈局、流帶寬度按值等比、漸層流動動畫、hover 追蹤整條路徑並淡化其他（自寫佈局，無 d3）
- [Route Map Card](https://webberui.com/zh-tw/docs/route-map-card) (pro): 導航 App 風格的路線地圖卡：格線底圖與確定性街道、路線逐段描繪、導航點沿線前進、街名依序淡入，附 ETA 讀數。
- [Duration Compare Bars](https://webberui.com/zh-tw/docs/duration-compare-bars) (free): 兩條或多條時長以同一比例尺生長比較，例如 30 分鐘對六週，單位自動換算並顯示倍數差距，適合「省下多少時間」的敘事。
- [Diagram Kit](https://webberui.com/zh-tw/docs/diagram-kit) (pro): 資料驅動的十一種 SVG 圖解：樞紐分流、泳道序列、循環、時間軸、放射分支、漏斗、層級金字塔、錨點標註、分支揭露、四象限與文氏圖，進場皆以描線與節點依序登場。
- [Balance Chart](https://webberui.com/zh-tw/docs/balance-chart) (free): 以零軸為中心的雙向長條圖：收入向上、支出向下，進場自零軸生長，hover 或鍵盤聚焦顯示當期淨額。
- [Event Bar Chart](https://webberui.com/zh-tw/docs/event-bar-chart) (free): 甘特感的事件區段圖：多條泳道上的時間區段條，拖曳或方向鍵平移瀏覽，hover 或聚焦展開事件卡。
- [Stacked Column Chart](https://webberui.com/zh-tw/docs/stacked-column-chart) (free): 多層堆疊長條圖：點擊圖例收合某一層，其餘層以彈簧下沉補位、座標軸同步重算，hover 顯示該欄組成。
- [Summary Line Chart](https://webberui.com/zh-tw/docs/summary-line-chart) (free): 多條折線搭配右側即時摘要欄：線條以描邊動畫畫出，游標移動時摘要欄的數值與變化率逐位滾動到該時點。
- [Paired Column Chart](https://webberui.com/zh-tw/docs/paired-column-chart) (free): 兩組序列並排的成對長條圖：切換期間時長條以 layout 動畫重新排序與伸縮，hover 顯示兩者差距。
- [Spectrum Monitor](https://webberui.com/zh-tw/docs/spectrum-monitor) (pro): 即時捲動的頻譜／熱度帶：canvas 逐幀繪製頻段強度瀑布圖，可暫停、hover 讀值，離開視口自動停止。
- [Spreadsheet Grid](https://webberui.com/zh-tw/docs/spreadsheet-grid) (pro): 可編輯的試算表網格：方向鍵移動選取、雙擊或 Enter 編輯、公式列顯示原始內容、支援簡易公式，首列首欄凍結。
- [System Map Canvas](https://webberui.com/zh-tw/docs/system-map-canvas) (pro): 可平移縮放的系統架構圖：節點與連線由資料產生，群組可展開收合，選取節點時高亮相連路徑並顯示詳情。
- [Knowledge Graph](https://webberui.com/zh-tw/docs/knowledge-graph) (pro): 力導向的知識關聯圖：由 Markdown 或結構資料產生節點與連線，星座般的暗色畫布可拖曳縮放、搜尋，點選節點查看出處引用。

### 媒體

分類頁：https://webberui.com/zh-tw/components/category/media

- [Custom Video Player](https://webberui.com/zh-tw/docs/custom-video-player) (pro): 自訂控制列播放器，控件淡出
- [Audio Visualizer](https://webberui.com/zh-tw/docs/audio-visualizer) (pro): 音訊頻譜視覺化（Web Audio API）
- [Image Compare](https://webberui.com/zh-tw/docs/image-compare) (free): 拖曳分割前後對比
- [Zoom Lens](https://webberui.com/zh-tw/docs/zoom-lens) (free): 圖片放大鏡
- [Device Mockup](https://webberui.com/zh-tw/docs/device-mockup) (free): Safari／iPhone／Android 裝置外框展示
- [Macbook Scroll](https://webberui.com/zh-tw/docs/macbook-scroll) (pro): 捲動時畫面自 MacBook 螢幕升起
- [Hero Video Dialog](https://webberui.com/zh-tw/docs/hero-video-dialog) (free): 點擊播放的 hero 影片彈窗
- [Progressive Blur](https://webberui.com/zh-tw/docs/progressive-blur) (free): 捲動內容邊緣的漸進模糊遮罩
- [Ken Burns Slideshow](https://webberui.com/zh-tw/docs/ken-burns-slideshow) (free): 緩慢縮放平移的經典紀錄片式幻燈片，交叉淡接
- [Waveform Scrubber](https://webberui.com/zh-tw/docs/waveform-scrubber) (pro): 音訊波形視覺化進度條，可拖曳 seek，已播區高亮
- [Vinyl Record Player](https://webberui.com/zh-tw/docs/vinyl-record-player) (pro): 可播放的黑膠唱盤：唱片旋轉、唱針擺入、可拖碟搓盤
- [Lightbox Gallery](https://webberui.com/zh-tw/docs/lightbox-gallery) (pro): 縮圖牆點擊放大的全螢幕燈箱：滾輪／捏合縮放與拖曳平移、雙擊放大、滑動與鍵盤切換、計數與說明列、Esc／背景關閉
- [Cassette Player](https://webberui.com/zh-tw/docs/cassette-player) (pro): 擬物卡帶外觀的音訊播放器：捲軸隨播放時間旋轉、兩側磁帶量隨進度增減，倒帶動畫、可拖曳進度條與字幕軌。
- [Device Stage 3D](https://webberui.com/zh-tw/docs/device-stage-3d) (pro): 純 CSS 3D 手機／平板／筆電舞台，五種編排：游標傾斜、捲動環繞、Y 軸翻轉、三台扇形陣列、捲動微距拉回；螢幕是真 DOM。
- [Cover Wall](https://webberui.com/zh-tw/docs/cover-wall) (free): 由中心向外逐格填入的封面格子牆，中央疊放滾動計數與文案，滑過單格推近、鄰格微退。
- [Image Strobe](https://webberui.com/zh-tw/docs/image-strobe) (free): 全幅圖片極快連續翻頁、中央內容固定不動的頻閃效果，播放結束停在最後一張；可由進入視口觸發。

### 網頁簡報

分類頁：https://webberui.com/zh-tw/components/category/presentation

- [Slide Deck Shell](https://webberui.com/zh-tw/docs/slide-deck-shell) (free): 16:9 網頁簡報容器：等比縮放、鍵盤／觸控翻頁、四種轉場、進度條與頁碼、講者備註、網址同步頁碼與列印成每頁一張，內建九種版面子元件。

### 頁面區塊 Sections

分類頁：https://webberui.com/zh-tw/components/category/sections

- [Hero Collection 01](https://webberui.com/zh-tw/docs/hero-collection-01) (free): 3 款動畫 Hero（漸層/粒子/分割文字）
- [Hero Collection 02](https://webberui.com/zh-tw/docs/hero-collection-02) (pro): 3 款進階 Hero（WebGL/3D/影片遮罩）
- [Feature Section Set](https://webberui.com/zh-tw/docs/feature-section-set) (pro): 3 款特色區塊（bento/滾動對照/卡片）
- [CTA + Footer Set](https://webberui.com/zh-tw/docs/cta-footer-set) (pro): 行動呼籲區 + 2 款動畫 Footer
- [Auth Pages](https://webberui.com/zh-tw/docs/auth-pages) (pro): 登入/註冊頁組（含表單動效）
- [Pricing Section](https://webberui.com/zh-tw/docs/pricing-section) (pro): 完整定價區塊（含 FAQ 手風琴）
- [Team + Logo Wall](https://webberui.com/zh-tw/docs/team-logo-wall) (pro): 團隊展示 + 客戶 logo 跑馬牆
- [Testimonial Section](https://webberui.com/zh-tw/docs/testimonial-section) (pro): 完整社會證明區塊
- [Contact Section](https://webberui.com/zh-tw/docs/contact-section) (pro): 含表單與微互動的聯絡我們區塊
- [Team Grid Section](https://webberui.com/zh-tw/docs/team-grid-section) (free): 團隊成員卡網格：漸層頭像、hover 翻出社群連結
- [Newsletter Signup Section](https://webberui.com/zh-tw/docs/newsletter-signup-section) (free): 訂閱表單區塊：輸入動畫、送出成功變身與社會證明
- [Angled Gallery Hero](https://webberui.com/zh-tw/docs/angled-gallery-hero) (free): 標題在左、右側一面 3D 傾斜排列的圖片畫廊緩慢橫移，兩列反向，hover 時暫停。
- [Contact Bar Hero](https://webberui.com/zh-tw/docs/contact-bar-hero) (free): 標題下方一條浮起的聯絡列：電子郵件一鍵複製、電話撥號與預約按鈕，捲出首屏後可吸附在視窗底部。
- [Count-Up Stats Hero](https://webberui.com/zh-tw/docs/count-up-stats-hero) (free): 暗色主視覺，標題下方三個關鍵數字進入視口時依序計數，分隔線同步描出。
- [Drifting Logos Hero](https://webberui.com/zh-tw/docs/drifting-logos-hero) (free): 置中標題背後散落一群合作夥伴符號緩慢漂移，各自不同速度與方向，游標移動時產生輕微視差。
- [Film Strip Hero](https://webberui.com/zh-tw/docs/film-strip-hero) (free): 標題下方一條帶齒孔的膠片帶無限橫捲，捲動頁面越快膠片跑得越快，hover 單格放大。
- [Image Tile Grid Hero](https://webberui.com/zh-tw/docs/image-tile-grid-hero) (free): 標題在左、右側圖磚網格自中心向外依序進場，hover 單塊放大、其他圖磚微暗。
- [Ink Ridgeline Hero](https://webberui.com/zh-tw/docs/ink-ridgeline-hero) (free): 層疊的墨色山脊曲線由程式產生並逐層描繪，標題文字先描邊再填色，捲動時山脊分層視差。
- [Integration Hub Hero](https://webberui.com/zh-tw/docs/integration-hub-hero) (free): 整合服務圖示網格環繞中央產品圖示，光束沿連線依序流向中心，hover 某個服務時點亮它的那條連線。
- [Blur-In Headline Hero](https://webberui.com/zh-tw/docs/blur-in-headline-hero) (free): 極簡置中主視覺：標題逐字模糊淡入上浮，唯一的行動按鈕帶緩慢呼吸光環，其餘保持安靜。
- [Particle Field Hero](https://webberui.com/zh-tw/docs/particle-field-hero) (free): 互動粒子場背景上的主視覺：粒子緩慢漂移並在鄰近時連線，游標靠近會推開粒子，標題清楚浮在上方。
- [Browser Frame Hero](https://webberui.com/zh-tw/docs/browser-frame-hero) (free): 右側一個大型瀏覽器裝置框佔滿版面，隨頁面捲動從微傾角度轉正並放大，框內可放任意產品畫面。
- [Skyline Scroll Hero](https://webberui.com/zh-tw/docs/skyline-scroll-hero) (free): 由捲動驅動的分段城市天際線：往下捲時天色由黃昏轉入夜，建築一段段點亮窗燈，標題隨段落切換。
- [Magnetic Lattice Hero](https://webberui.com/zh-tw/docs/magnetic-lattice-hero) (free): 暗色科技格線主視覺：格點與連線受游標磁力牽引彎曲，點擊時從落點擴散出一圈漣漪波。
- [Sketchnote Pricing](https://webberui.com/zh-tw/docs/sketchnote-pricing) (free): 筆記本紙張風格的三欄方案卡：手繪邊框與勾選記號逐筆描出，推薦方案有手繪圈選標註，月繳／年繳切換時價格補間。
- [Masonry Review Wall](https://webberui.com/zh-tw/docs/masonry-review-wall) (free): 不等高評價卡組成的瀑布流牆，各欄以不同速度隨捲動視差位移，背景有緩慢變形的生成式色塊，可展開更多。
- [Case Note Pile](https://webberui.com/zh-tw/docs/case-note-pile) (free): 把每則評價做成一份案例筆記：欄位化的導入資訊、迴紋針固定的照片與螢光筆劃重點，點選時從紙堆中抽到最前。
- [Portrait Overlay Quote](https://webberui.com/zh-tw/docs/portrait-overlay-quote) (free): 全幅人像畫面上疊放引言文字，切換時影像交叉淡接並緩慢推近，文字逐行由遮罩中升起，可自動播放。
- [Business Card Reel](https://webberui.com/zh-tw/docs/business-card-reel) (free): 名片式的評價卡排成橫向捲帶，可拖曳或捲動吸附，越靠近中央的卡片越大越清楚，兩側逐漸縮小變淡。
- [Instant Photo Stack](https://webberui.com/zh-tw/docs/instant-photo-stack) (free): 一疊歪斜擺放的拍立得相片，最上面一張附上引言，點擊或甩動把它丟到最底，下一張翻上來、整疊重新錯開。
- [Color Block Quotes](https://webberui.com/zh-tw/docs/color-block-quotes) (free): 大面積色塊承載引言，右側姓名列表切換時，色塊以 layout 動畫滑到對應位置並換色，引言交叉淡接。
- [Filterable Review Grid](https://webberui.com/zh-tw/docs/filterable-review-grid) (free): 高密度的小型評價卡網格，依產業分類篩選時卡片以 layout 動畫重排，hover 浮起並沿游標亮起邊框。
- [Fanned Quote Deck](https://webberui.com/zh-tw/docs/fanned-quote-deck) (free): 評價卡像撲克牌一樣扇形展開，hover 時該張抬起、鄰卡讓位，點擊把卡片抽到中央放大閱讀，可依序翻下一張。
- [Flip Portrait Tiles](https://webberui.com/zh-tw/docs/flip-portrait-tiles) (free): 方形人像磚組成的牆面，hover 或點按時人像以 3D 翻面轉到背面露出引言，觸控與鍵盤同樣可翻。
- [Star-Rated Reviews](https://webberui.com/zh-tw/docs/star-rated-reviews) (free): 一列附星等的評價卡，頂部總評分數字計數進場，各卡星星依序填滿並支援小數星等，搭配商品縮圖。
- [Autoplay Quote Card](https://webberui.com/zh-tw/docs/autoplay-quote-card) (free): 一張置中的大型評價卡自動輪播，底部進度條顯示下一則倒數，切換時內容滑動淡接，可暫停與手動切換。
- [3D Tilt Review Card](https://webberui.com/zh-tw/docs/3d-tilt-review-card) (free): 一張微微歪斜的評價卡，隨游標做 3D 透視傾斜與光澤反射，引言浮在卡面之上，切換時卡片翻轉換面。
- [Quote & Result Columns](https://webberui.com/zh-tw/docs/quote-result-columns) (free): 三欄並排的靜態評價，每欄一則重點引言與成效數字，進場時欄間分隔線由上而下描出、數字計數、欄位依序浮現。
- [Numbered Quote Slider](https://webberui.com/zh-tw/docs/numbered-quote-slider) (free): 左側巨大的 01／02／03 編號以逐位滾輪切換，右側引言依方向滑入，支援拖曳、方向鍵與進度分數顯示。
- [Orbiting Customer Avatars](https://webberui.com/zh-tw/docs/orbiting-customer-avatars) (free): 客戶頭像沿一到兩圈軌道緩慢環繞，點選或聚焦某個頭像時軌道暫停，該位客戶的引言在圓心交叉淡入。
- [Avatar Tab Quotes](https://webberui.com/zh-tw/docs/avatar-tab-quotes) (free): 左側直列頭像與姓名作為分頁，選中標記沿列滑動，右側引言以模糊交叉淡接切換，頭像同步放大。
- [Review Ticker](https://webberui.com/zh-tw/docs/review-ticker) (free): 單行無限捲動的短評跑馬燈，評語以星號分隔、兩端淡出，可加第二行反向捲動，hover 或聚焦時暫停。
- [Typed Quote Row](https://webberui.com/zh-tw/docs/typed-quote-row) (free): 一列並排的評價卡輪流以打字機效果逐字打出引言並帶游標閃爍，打完停留後換下一位，其他卡顯示淡化全文。
- [One-Line Quote Carousel](https://webberui.com/zh-tw/docs/one-line-quote-carousel) (free): 只放一句大字評價的極簡輪播，句子上下交叉淡接帶輕微模糊，下方僅留作者與細點指示，背景有緩慢流動的細線。
- [Bento Case Studies](https://webberui.com/zh-tw/docs/bento-case-studies) (free): 不等尺寸的便當盒拼貼：一格大型主打案例、數據磚、短評磚與合作字標磚混排，進場依序浮現，hover 露出閱讀案例連結。
- [Social Post Reviews](https://webberui.com/zh-tw/docs/social-post-reviews) (free): 以通用社群貼文樣式呈現的評價動態牆，新貼文會定時從頂端滑入、按讚數輕跳，兩欄瀑布排列。
- [Dark Portrait Spotlight](https://webberui.com/zh-tw/docs/dark-portrait-spotlight) (free): 暗色版面中的大幅人像與引言並列，下方縮圖列切換客戶，人像由灰階轉彩色交叉淡入，姓名與職稱滑入。
- [Magazine Pull Quote](https://webberui.com/zh-tw/docs/magazine-pull-quote) (free): 雜誌跨頁式的評價：巨型引號、襯線大字拉引、首字放大與雙欄內文，進場時引號放大落定、文字逐行浮現。

### AI 應用元件

分類頁：https://webberui.com/zh-tw/components/category/ai

- [AI Prompt Input](https://webberui.com/zh-tw/docs/ai-prompt-input) (free): AI 對話輸入框：自動長高 + 送出動畫（示範元件，第一階段先做核心）
- [AI Prompt Input Pro](https://webberui.com/zh-tw/docs/ai-prompt-input-pro) (pro): 進階版：附件、模型選單、語音波形、斜線指令、@提及、串流狀態
- [AI Message Stream](https://webberui.com/zh-tw/docs/ai-message-stream) (pro): 串流訊息列表：打字淡入、markdown 漸現、停止/重試動畫
- [AI Reasoning Panel](https://webberui.com/zh-tw/docs/ai-reasoning-panel) (free): 思考過程摺疊面板（reasoning 展開/收合動效）
- [AI Tool Call Card](https://webberui.com/zh-tw/docs/ai-tool-call-card) (pro): 工具呼叫狀態卡：執行中/成功/失敗過渡
- [AI Model Picker](https://webberui.com/zh-tw/docs/ai-model-picker) (free): 模型下拉選擇器：能力星級、速度/成本徽章與推薦籤
- [AI Token Usage Meter](https://webberui.com/zh-tw/docs/ai-token-usage-meter) (pro): 上下文視窗用量儀表：分段色條、即時累加與超限警示
- [AI Source Citations](https://webberui.com/zh-tw/docs/ai-source-citations) (pro): AI 回答內嵌引用角標，hover 浮出來源預覽卡
- [AI Voice Orb](https://webberui.com/zh-tw/docs/ai-voice-orb) (pro): Siri 式語音球：待機呼吸、聆聽波動、思考旋轉、說話脈動四態
- [AI Diff Suggestion](https://webberui.com/zh-tw/docs/ai-diff-suggestion) (pro): AI 建議以行內 diff 呈現：刪除線紅/新增綠、逐項接受或拒絕
- [AI Plan Steps](https://webberui.com/zh-tw/docs/ai-plan-steps) (free): agent 計畫清單：步驟由資料驅動在待辦→執行中→完成／失敗間流轉，含工具圖示、巢狀子步驟、目前步驟呼吸脈動與完成率
- [AI Model Arena](https://webberui.com/zh-tw/docs/ai-model-arena) (pro): LMArena 式雙欄並排：兩個匿名回覆同步串流打字，投票 A／B／平手／都差後翻牌揭曉模型名並計分
- [AI Attachment Tray](https://webberui.com/zh-tw/docs/ai-attachment-tray) (free): 可掛在任何輸入框上方的附件托盤：拖入／貼上檔案成縮圖 chip、上傳進度環、失敗重試、類型圖示、超限提示與拖曳重排
- [AI Branch Switcher](https://webberui.com/zh-tw/docs/ai-branch-switcher) (free): 同一則回覆的多版本切換器 ‹ 2／3 ›：內容依方向滑動、重生成即開新分支、分支縮圖樹與鍵盤左右鍵
- [Chat Scroller](https://webberui.com/zh-tw/docs/chat-scroller) (pro): 對話用的捲動容器：串流中貼底自動跟隨，離開底部時浮出「新訊息」膠囊，載入歷史不跳位，可程式捲到任一則訊息。
- [Scripted Chat Thread](https://webberui.com/zh-tw/docs/scripted-chat-thread) (free): 依腳本自動播放的對話展示：使用者氣泡 spring 彈入、三點打字指示、助理逐字串流回覆與程式碼區塊，可循環。
- [Code Change Explainer](https://webberui.com/zh-tw/docs/code-change-explainer) (pro): 步驟式程式差異導讀：每一步高亮一段刪除或新增的程式行，右側說明卡同步推進，用白話向非工程師解釋這次改了什麼。
- [Synced Typing Grid](https://webberui.com/zh-tw/docs/synced-typing-grid) (free): 多格同步打字展示：同一句提示詞在 N 個不同外殼的輸入框裡同時逐字打出，適合比較多個介面或展示「到哪都能用」。
- [Generate-and-Pick Flow](https://webberui.com/zh-tw/docs/generate-and-pick-flow) (pro): 輸入提示詞後先顯示骨架，再讓一排生成結果橫向滑入，使用者挑選其中一張放大確認，是圖像與影片生成產品的標準流程。
- [Agent Relay Workspaces](https://webberui.com/zh-tw/docs/agent-relay-workspaces) (pro): 多個代理工作區以 3D 翻轉輪流登場，每個工作區跑一段假任務進度，完成後把成果交棒給下一位，最後彙整成總結果。
- [Tool Permission Card](https://webberui.com/zh-tw/docs/tool-permission-card) (free): 代理請求執行工具時的權限確認卡：顯示工具名與參數摘要，允許、拒絕或永遠允許，決定後收合成一行紀錄。
- [Agent Task Queue](https://webberui.com/zh-tw/docs/agent-task-queue) (free): 代理的待執行任務佇列：可拖曳排序，執行中項目呼吸脈動，完成的任務滑出到可摺疊的「已完成」群組。
- [Stack Trace Viewer](https://webberui.com/zh-tw/docs/stack-trace-viewer) (free): 錯誤堆疊檢視器：逐幀列出呼叫位置，高亮使用者程式碼、摺疊第三方框架幀，可展開單幀看原始碼片段並一鍵複製。
- [Subagent Status Card](https://webberui.com/zh-tw/docs/subagent-status-card) (free): 巢狀在父訊息下的子代理狀態卡：顯示任務、進度條與目前步驟，可展開查看其串流輸出，完成後收成摘要。
- [Follow-up Suggestion Chips](https://webberui.com/zh-tw/docs/follow-up-suggestion-chips) (free): 回覆下方的建議提問列：膠囊逐一錯開進場，點擊後膠囊飛進輸入框並化為文字，其餘膠囊收合退場。
- [Test Results Panel](https://webberui.com/zh-tw/docs/test-results-panel) (free): 測試結果面板：通過、失敗與略過計數逐位滾動，比例條平順增長，失敗項可展開查看預期與實際值的差異。

### 雜誌編輯版面

分類頁：https://webberui.com/zh-tw/components/category/editorial

- [Leader Line Captions](https://webberui.com/zh-tw/docs/leader-line-captions) (free): 引線圖說系統：編號圖說沿圖片邊欄縱向排列，每則以 SVG 引線連至圖中對應細節點，進場時引線逐條描繪、編號依序點亮，hover 圖說時對應區域聚焦、其餘畫面壓暗。
- [Marginalia Article](https://webberui.com/zh-tw/docs/marginalia-article) (pro): 旁註文章版式：Tufte 式邊註閱讀版面：正文主欄搭配固定比例旁註欄，內文上標編號以細線連至對應旁註，捲動至該段時旁註淡入並與正文同步高亮，窄螢幕自動降級為行內展開註。
- [Cover Story Hero](https://webberui.com/zh-tw/docs/cover-story-hero) (pro): 封面故事主視覺：雜誌封面構圖 hero：刊名以影像遮罩壓在主體人像後方、封面標語沿四角安全區排布、含期號與條碼細節，滑鼠移動時刊名/主體/標語以不同深度視差，捲動時封面線逐條飛出讓位內文。
- [Interview Spread](https://webberui.com/zh-tw/docs/interview-spread) (free): 訪談對話版式：雜誌訪談版面：問句以窄欄粗體靠左、答句以寬欄襯線靠右交錯落版，超大引號錨定版面，捲動時當前發言者標記沿邊欄滑動、問答依序浮現。
- [Dot Leader Contents](https://webberui.com/zh-tw/docs/dot-leader-contents) (free): 點線目錄頁：書籍目錄版式：章節標題與頁碼之間的點狀引線於進場時逐點延伸連上編號，hover 條目時引線加粗、對應預覽縮圖自邊欄浮現，點擊平滑捲動跳至對應區塊。
- [Running Head Folio](https://webberui.com/zh-tw/docs/running-head-folio) (free): 書眉頁碼列：書籍書眉系統：sticky 細列左側顯示當前章名、右側顯示依捲動位置換算的「頁碼」，跨章時章名以翻頁式翻轉切換、頁碼連動遞增，中央可選配書名或閱讀進度細線。
- [Pull Quote Lift](https://webberui.com/zh-tw/docs/pull-quote-lift) (free): 抽言浮出：捲動至段落時，指定句子從行內原位以 FLIP 動畫「抽出」放大為跨欄 pull quote（附引號與分隔線），原段落即時重排補位，回捲時句子退回原文位置。
- [Vertical Writing Spread](https://webberui.com/zh-tw/docs/vertical-writing-spread) (pro): 直排跨頁版面：以 CSS writing-mode 建構的中日文直排編輯版面：直排大標與正文欄自右向左流動、橫排引文與圖片穿插其間，進場時直欄逐行自上而下顯影，並支援水平捲動推進欄序。
- [Chaptered Report Shell](https://webberui.com/zh-tw/docs/chaptered-report-shell) (pro): 章節式報告框架：年報／白皮書式頁面骨架：左側 sticky 章節導軌自動由內容生成、巨型章節數字跨章交叉淡出、章與章之間以全幅色塊過場，並附閱讀進度標記。
- [Brand Swatch Board](https://webberui.com/zh-tw/docs/brand-swatch-board) (free): 品牌書式的色票板：色塊由上而下依序填滿，自動換算 RGB／CMYK／對比度，滑過抬起、點擊複製色碼。

### 網格系統

分類頁：https://webberui.com/zh-tw/components/category/grid

- [Paginated Wave Grid](https://webberui.com/zh-tw/docs/paginated-wave-grid) (free): 分頁波次網格：帶分頁器的網格版面：換頁時出場項目朝翻頁方向依距離波次退場、新頁項目自反方向湧入補位，頁碼與總數同步滾動變形。
- [Zoomable Density Grid](https://webberui.com/zh-tw/docs/zoomable-density-grid) (free): 密度縮放網格：如 iOS 照片 App 以滑桿或捏合在 2/4/6 欄密度間切換的網格版面，所有格子以 FLIP 共享位置動畫平滑重排，且保持視覺錨點不跳動。
- [Editorial Interleave Grid](https://webberui.com/zh-tw/docs/editorial-interleave-grid) (free): 編輯式穿插網格：商品網格每隔 N 張卡片依設定節奏自動插入全幅編輯影像、品牌引言或影片區塊形成雜誌式韻律，插入區塊以 clip-path 擴張進場、商品卡交錯淡入。
- [Sieve Filter Grid](https://webberui.com/zh-tw/docs/sieve-filter-grid) (free): 篩選沉降網格：帶篩選列的網格版面：被濾掉的項目縮小並飛向觸發它的篩選 chip（chip 計數同步跳動），存留項目 FLIP 重排收攏成新網格。
- [Shove Reflow Grid](https://webberui.com/zh-tw/docs/shove-reflow-grid) (free): 推擠重排網格：可篩選網格在切換分類時，新進卡片會「擠進」隊伍、把鄰近卡片物理推開再彈簧回位，離場卡片被擠出邊緣掉落，整個重排像人群讓位而不是淡入淡出。
- [Widget Board](https://webberui.com/zh-tw/docs/widget-board) (free): 小工具看板網格：依 iOS 桌面 widget 尺寸階級（小/中/大）構成的響應式網格版面，進入編輯模式全體微幅搖晃，拖曳重排以 FLIP 彈簧回流，格位還可放入自動輪播的 Smart Stack 疊層。
- [Agenda Tracks Grid](https://webberui.com/zh-tw/docs/agenda-tracks-grid) (free): 議程軌道網格：時間 × 軌道的會議議程版面：sticky 時間軸欄固定於左側，切換軌道或講者篩選時場次卡片以 FLIP 重排補位，點擊場次原位展開講者與摘要。
- [Contact Sheet Gallery](https://webberui.com/zh-tw/docs/contact-sheet-gallery) (free): 印樣畫廊：攝影印樣版式：帶齒孔膠片邊框的等格網格、格號與底片邊緣標記俱全，hover 時油性筆圈選記號以 SVG 描邊畫出，選中格放大為工作樣張並附手寫式批註。

### 動態字體排印

分類頁：https://webberui.com/zh-tw/components/category/typography

- [Overprint Register](https://webberui.com/zh-tw/docs/overprint-register) (free): 套印對位標題：標題以 CMYK 四色版疊印（mix-blend-mode multiply）呈現，初始各色版錯位，捲動時逐版滑入精準套準完成對位，hover 再度輕微失準並露出色版邊緣與裁切標記。
- [Leading Unfold](https://webberui.com/zh-tw/docs/leading-unfold) (free): 行距展開敘事：整段文字初始以負行距壓縮成一塊近乎實心的墨塊，捲動進度驅動 line-height 與字距逐步展開為可讀段落，版面高度隨之生長並推移後續區塊。
- [Lineup Poster Section](https://webberui.com/zh-tw/docs/lineup-poster-section) (free): 演出陣容海報：音樂祭海報式版面：名字依 tier 分行排列、字級逐層遞減，行內以分隔符齊行撐滿，hover 或點擊某名字時它以共享布局動畫升格到更大的 tier 行，其餘名字重新齊行。
- [Type Scale Playground](https://webberui.com/zh-tw/docs/type-scale-playground) (free): 字級比例遊樂場：互動式模組化字階展示版面：選擇比例（1.25／黃金比等）或拖動比例滑桿，整頁示範版面（標題、副標、內文、註腳）的所有字級以彈簧動畫同步重算重排。
- [Type Specimen Stage](https://webberui.com/zh-tw/docs/type-specimen-stage) (pro): 字體樣張展示台：仿字體鑄造廠樣張頁的 section 級版面：左側巨型單字形、右側字重階梯欄與字級縮放列，底部軸向滑桿（wght/wdth/opsz）拖動時整張樣張以 Motion 同步補間重排。
- [Glyph Portal Layout](https://webberui.com/zh-tw/docs/glyph-portal-layout) (pro): 字形視窗版面：以巨型字母的字腔（counter）作為遮罩視窗的版面：每個字母內嵌獨立影像／影片並在捲動時於字腔內視差移動，字母群同時是排版骨架，周邊小字內容繞排其間。
- [Alphabet Ledger](https://webberui.com/zh-tw/docs/alphabet-ledger) (free): 字母索引卷軸：以海報級巨型首字母作為每個區段的 sticky 錨點，區段內容在字母旁捲動，捲到下一區段時新字母將前一個推出並在交接瞬間做字重由細到粗的交棒動畫。
- [Woodtype Flush Block](https://webberui.com/zh-tw/docs/woodtype-flush-block) (free): 木活字齊行標題：多行標題塊中每行透過可變字體 wdth 軸自動求解拉伸至齊行撐滿容器（不同字數的行皆左右切齊），進場時各行從極窄字寬依序彈開到解出的寬度。
- [Launch Title Sequence](https://webberui.com/zh-tw/docs/launch-title-sequence) (pro): 產品發表式的連續字幕卡：每張不同進場（模糊進、逐字、大字重擊、超大平移、漸層關鍵字），卡間背景翻轉，附 HUD 角標，可自動播放或隨捲動切換。
- [Material Fill Text](https://webberui.com/zh-tw/docs/material-fill-text) (free): 大字以程序生成的材質填滿（木紋、拉絲金屬、紙張噪點等），hover 或自動輪播時材質交叉淡接切換，不用任何外部材質圖。

### 狀態與回饋系統

分類頁：https://webberui.com/zh-tw/components/category/feedback

- [Async State Slot](https://webberui.com/zh-tw/docs/async-state-slot) (free): 非同步狀態槽：單一插槽元件在 idle／載入／空狀態／錯誤／內容五態間以高度變形與共享元素過渡——例如空狀態插圖摺疊退場的同時首筆資料滑入補位。
- [Optimistic Mutation Frame](https://webberui.com/zh-tw/docs/optimistic-mutation-frame) (free): 樂觀更新框架：包住任意列表或卡片的樂觀 UI 容器：使用者操作後項目立即以半透明幽靈態插入版面，伺服器確認時凝固實體化，失敗時顫抖回退並將錯誤移交 toast。
- [Suspense Reveal Queue](https://webberui.com/zh-tw/docs/suspense-reveal-queue) (pro): 懸念揭示佇列：包住多個 Suspense 邊界的載入指揮器：先完成的區塊進入佇列，按作者指定順序與最小間隔依序揭示，遲到區塊自動接補位動畫，杜絕各區隨機 pop-in。
- [Skeleton Orchestra](https://webberui.com/zh-tw/docs/skeleton-orchestra) (free): 骨架屏交響系統：與最終版面同構的整頁骨架屏系統：骨架區塊按網格位置以方向性波次（左上至右下）逐區 FLIP 變形為真實內容尺寸後實體化，而非整頁同時淡入。
- [Broadcast Bar System](https://webberui.com/zh-tw/docs/broadcast-bar-system) (free): 公告廣播列系統：可堆疊多則公告的頂部廣播列系統：訊息依優先級佇列輪播、支援倒數計時與 CTA 變體、關閉狀態記憶於 localStorage，高度變化時以 spring 平滑推擠頁面內容。
- [UI Sound Kit](https://webberui.com/zh-tw/docs/ui-sound-kit) (free): 介面音效套件：一個 Provider 加 hook，用 Web Audio 即時合成 click、hover、success、error 等輕量介面音效並附加到任意元件，內建音量控制、全域開關與使用者偏好尊重，零音檔零額外請求。
- [Live Glance Strip](https://webberui.com/zh-tw/docs/live-glance-strip) (free): 即時動態資訊條：釘在視窗底部的鎖屏式 Live Activity 卡片，左右插槽顯示圖示與即時狀態、中央為進度軌道，狀態更新時數字翻轉，並可在窄條與完整卡之間彈簧展開。
- [Streak Flame Counter](https://webberui.com/zh-tw/docs/streak-flame-counter) (free): Duolingo 式連續天數火焰：數字增加時火焰爆閃、里程碑變色
- [Logo Trace Loader](https://webberui.com/zh-tw/docs/logo-trace-loader) (free): 一段短虛線沿 logo 描邊路徑繞行的載入器，完成時收合成完整描邊再淡入填色；預設使用 WebberUI 品牌曲線，可換成自己的 path。
- [Alert Callout](https://webberui.com/zh-tw/docs/alert-callout) (free): 五種語意的提示區塊：短淡入上移進場，關閉時以高度收合讓下方內容平順補位，內容更新時圖示輕彈一次。
- [Progress Bar](https://webberui.com/zh-tw/docs/progress-bar) (free): 以彈簧補間的線性進度條：百分比數字逐位滾動，支援不確定進度掃光與緩衝層，達成 100% 時脈衝一次並顯示勾。
- [Spinner Set](https://webberui.com/zh-tw/docs/spinner-set) (free): 四款載入指示：圓環、圓點、長條與品牌標誌描邊循環，可調尺寸與標籤，減少動態偏好時改為靜態圖示加文字。
- [Quiz Card](https://webberui.com/zh-tw/docs/quiz-card) (free): 單選／複選測驗卡：選答後正確選項描出勾、錯誤選項抖動、解說展開，下一題方向性滑入，含進度、分數與結束頁。
- [Drawn Capsule Stepper](https://webberui.com/zh-tw/docs/drawn-capsule-stepper) (free): 一條 SVG 描邊先畫出膠囊外框，再讓內部的步驟膠囊逐一點亮推進，適合設定精靈、任務進度與上線流程。

### 輪播

分類頁：https://webberui.com/zh-tw/components/category/carousel

- [Perspective Carousel](https://webberui.com/zh-tw/docs/perspective-carousel) (free): 3D 透視輪播
- [Swipe Cards](https://webberui.com/zh-tw/docs/swipe-cards) (free): Tinder 式滑卡（拖曳判定+飛出）
- [Cover Carousel](https://webberui.com/zh-tw/docs/cover-carousel) (free): 封面卡片輪播；滾動 scrub 驅動的視差推進 + 完整鍵盤導航與 a11y
- [ClipPath Carousel](https://webberui.com/zh-tw/docs/clippath-carousel) (free): clip-path 揭示過場輪播
- [Thumbnail Gallery](https://webberui.com/zh-tw/docs/thumbnail-gallery) (free): 主圖與縮圖同步的畫廊
- [Stacked Peek Carousel](https://webberui.com/zh-tw/docs/stacked-peek-carousel) (free): 卡片堆疊後層窺視的輪播，滑動時後卡遞補上前
- [Vertical Story Carousel](https://webberui.com/zh-tw/docs/vertical-story-carousel) (pro): 限時動態式直式輪播：頂部分段進度條、自動播放與點按切換
- [Radial Burst Gallery](https://webberui.com/zh-tw/docs/radial-burst-gallery) (free): 圖片從中心爆開排成一圈後緩慢公轉，點選任一張飛到中央放大、其餘縮回環上，支援鍵盤切換。
- [Velocity Scene Slider](https://webberui.com/zh-tw/docs/velocity-scene-slider) (pro): 以拖曳初速銜接切換的場景卡滑軌：放手時的速度直接成為下一張的彈簧初速，底部膠囊指示條隨進度伸縮。

### 滾動敘事

分類頁：https://webberui.com/zh-tw/components/category/scrollytelling

- [Exploded View Scroll](https://webberui.com/zh-tw/docs/exploded-view-scroll) (pro): 捲動分解圖：區塊釘住後商品的分層去背圖像隨捲動沿 Z 軸炸開，各層由引線標註的規格文案依序浮現，捲畢層片收攏回完整商品再釋放至下一區塊。
- [Recap Story Scroll](https://webberui.com/zh-tw/docs/recap-story-scroll) (pro): 年度回顧故事卷軸：全螢幕逐幕（scene-based）滾動故事版面，每一幕 scroll-snap 定格並編排一組數據的進場——巨型數字縮放、關鍵詞逐幕接力、背景色隨主題整幕切換，內建幕別進度點與自動播放模式。
- [Scrollytelling Stage](https://webberui.com/zh-tw/docs/scrollytelling-stage) (pro): 滾動敘事舞台：左側 sticky「數據舞台」＋右側步驟文章欄的雙欄版面，滾到每個步驟時舞台上的圖形狀態、高亮區域與註解標線依 step index 補間 morph 切換。
- [Atlas Plate](https://webberui.com/zh-tw/docs/atlas-plate) (pro): 圖鑑圖版：一側釘住滿幅圖版、另一側為編號說明清單，滾動至某條說明時鏡頭平移縮放至圖上對應熱點並點亮編號引線，構成圖鑑式導讀。
- [Strata Headers](https://webberui.com/zh-tw/docs/strata-headers) (free): 層積章節標頭：長頁面各章節標題列在被滾過後依序黏附於視口頂端層層堆疊，逐漸積成一份由閱讀行為累積出的可點擊即時目錄，點擊回跳時堆疊逐層剝離。
- [Waypoint Stage](https://webberui.com/zh-tw/docs/waypoint-stage) (pro): 航點舞台：把各 section 以宣告式座標擺在一張超大平面畫布上，滾動驅動攝影機沿航點路徑平移、縮放、旋轉，依序飛抵每個構圖完成 Prezi 式空間敘事。
- [Data Duel Split](https://webberui.com/zh-tw/docs/data-duel-split) (pro): 資料對決分屏：頁面級 A/B 對決版面：左右兩陣營各佔半屏，逐回合滾動揭示對比指標時，中央分界線像拔河般依該回合數據優勢滑移，底部累計比分同步跳動。

### 完整模板 Templates

分類頁：https://webberui.com/zh-tw/components/category/templates

- [Web3 Crypto Landing](https://webberui.com/zh-tw/docs/web3-crypto-landing) (pro): 加密貨幣／web3 產品行銷整站模板

## 教學指南

- [動態漸層邊框的三種做法（conic-gradient、@property、mask）](https://webberui.com/zh-tw/guides/animated-gradient-border)：動態漸層邊框的三種 CSS 做法：旋轉 conic-gradient、用 @property 動畫角度、用 mask 挖空中央，附 Tailwind v4 寫法與瀏覽器支援比較。
- [動畫 React 元件庫比較：WebberUI、Aceternity UI、Magic UI、React Bits](https://webberui.com/zh-tw/guides/animated-react-component-libraries)：比較 WebberUI、Aceternity UI、Magic UI、React Bits 四個動畫 React 元件庫的安裝、授權、依賴、元件數量、付費方案與語言。
- [2026 React 動畫套件怎麼選：Motion、GSAP、React Spring 與動畫元件庫](https://webberui.com/zh-tw/guides/react-animation-libraries)：比較 Motion、GSAP、React Spring 三個 React 動畫套件的 API、大小、授權與 Next.js 用法，並說明動畫元件庫在選型中的位置。
- [視差滾動網頁怎麼做：CSS、Motion useScroll 與現成 React 元件](https://webberui.com/zh-tw/guides/react-parallax-scroll)：視差滾動怎麼做：CSS perspective、滾動驅動動畫（附 2026 年瀏覽器支援）與 Motion useScroll，以及效能、減少動態效果與手機注意事項。
- [Tailwind 無限跑馬燈：暫停、反向與 prefers-reduced-motion](https://webberui.com/zh-tw/guides/tailwind-marquee)：用 Tailwind CSS v4 的 @theme 做網頁無限跑馬燈：懸停暫停、反向、邊緣淡出、暫停按鈕與 prefers-reduced-motion，附 React 程式碼。
- [身分證字號驗證規則與 React 實作](https://webberui.com/zh-tw/guides/taiwan-id-validation)：身分證字號驗證規則：首字母轉碼表、權數與檢查碼算法，含 2021 年新式外來人口統一證號，附測試過的 TypeScript 驗證函式與 React 元件。
- [統一編號驗證規則（2023 新制）與 React 輸入元件](https://webberui.com/zh-tw/guides/taiwan-tax-id-validation)：統一編號檢查碼怎麼算：權數 1,2,1,2,1,2,4,1、第 7 碼為 7 的特例，與 2023 年改為被 5 整除的新制，附 TypeScript 函式與 React 元件。

## 整頁模板

全部為 Pro。安裝後落在專案的 app/ 底下。

- [開發者作品集](https://webberui.com/zh-tw/templates/developer-portfolio) (pro): 個人/開發者作品集整站：Hero、精選專案、關於、技能、聯絡
- [SaaS 落地頁](https://webberui.com/zh-tw/templates/saas-landing) (pro): SaaS 產品行銷站：Hero、功能、Bento、社會證明、定價、CTA
- [AI 產品落地頁](https://webberui.com/zh-tw/templates/ai-product-landing) (pro): AI Agent/應用落地頁：AI 輸入示意、功能、效益、定價
- [開發者工具落地頁](https://webberui.com/zh-tw/templates/dev-tool-landing) (pro): 開發者工具/API 落地頁：程式碼片段、功能亮點、定價
- [新創落地頁](https://webberui.com/zh-tw/templates/startup-landing) (pro): 早期新創極簡落地頁：Hero、功能、定價
- [通用行銷落地頁](https://webberui.com/zh-tw/templates/marketing-landing) (pro): 可重用多區段行銷落地頁：全核心行銷區段
- [代理商/工作室](https://webberui.com/zh-tw/templates/agency-studio) (pro): 代理商/創意工作室：服務、方案、作品、定價
- [專業服務](https://webberui.com/zh-tw/templates/professional-services) (pro): 律師/顧問等專業服務企業形象站
- [行動 App 落地頁](https://webberui.com/zh-tw/templates/mobile-app-landing) (pro): App 落地頁：互動式 App 預覽、行動優先、下載 CTA
- [單品/電商落地頁](https://webberui.com/zh-tw/templates/product-ecommerce-landing) (pro): 單一產品發表落地頁：展示、規格、購物車/評論
- [SaaS 全端啟動套件](https://webberui.com/zh-tw/templates/saas-starter) (pro): 生產級 SaaS 起手式：行銷頁 + 認證/儀表板預覽區
- [部落格](https://webberui.com/zh-tw/templates/blog) (pro): 可客製 MDX 部落格：文章列表、精選、分類
- [個人寫作站](https://webberui.com/zh-tw/templates/personal-writing-site) (pro): 個人網站：about/work/writing + spotlight hover + 內建部落格
- [變更日誌](https://webberui.com/zh-tw/templates/changelog) (pro): 乾淨時間軸產品更新/版本發布
- [文件/API 參考](https://webberui.com/zh-tw/templates/docs-api-reference) (pro): 深色程式碼導向 API 參考/產品文件站
- [Podcast 節目站](https://webberui.com/zh-tw/templates/podcast-show) (pro): Podcast 站：節目介紹、單集列表、播放器
- [線上課程](https://webberui.com/zh-tw/templates/online-course) (pro): 課程/資訊型產品落地頁 + 課綱 + 報名
- [研討會/活動](https://webberui.com/zh-tw/templates/conference-event) (pro): 活動發表站：議程、講者、票種、地點
- [目錄名錄站](https://webberui.com/zh-tw/templates/directory-site) (pro): 商業名錄站：搜尋、篩選、列表卡、詳情
- [管理後台儀表板](https://webberui.com/zh-tw/templates/admin-dashboard) (pro): 後台儀表板：側欄、指標卡、圖表、表格、活動流
- [AI 生成工具](https://webberui.com/zh-tw/templates/ai-generation-tool) (pro): AI 生成應用 + 行銷頁：生成 UI、token 經濟、市集
- [沉浸式滾動敘事](https://webberui.com/zh-tw/templates/immersive-scroll-story) (pro): 長篇 scrollytelling：單一連續敘事逐段展開、滾動綁定動畫
- [水平滾動作品展示](https://webberui.com/zh-tw/templates/horizontal-scroll-showcase) (pro): 垂直滾動驅動左右橫移瀏覽作品的畫廊
- [3D 產品揭示](https://webberui.com/zh-tw/templates/product-3d-reveal) (pro): 滾動驅動 CSS 3D 產品旋轉/拆解/定位，規格逐步揭示
- [視差敘事](https://webberui.com/zh-tw/templates/parallax-narrative) (pro): 多層景深故事，前中後景不同速度營造立體滾動
- [互動案例研究](https://webberui.com/zh-tw/templates/interactive-case-study) (pro): 專案深度頁：背景影像隨區段變形填滿、融合動態與文案
- [動態字體主視覺頁](https://webberui.com/zh-tw/templates/kinetic-type-hero-page) (pro): 超大可變字體 Hero，字母隨滾動與游標伸縮重組
- [Canvas 主視覺頁](https://webberui.com/zh-tw/templates/webgl-canvas-hero-page) (pro): 全視窗 canvas Hero：流體/粒子/扭曲隨游標與滾動反應
- [釘固逐格序列](https://webberui.com/zh-tw/templates/pinned-sticky-sequence) (pro): sticky 釘固視窗，幀序列/步驟故事原地播放
- [全屏吸附幻燈片](https://webberui.com/zh-tw/templates/snap-fullpage-deck) (pro): 全螢幕 snap 區段逐一吸附，各帶入場動畫
- [游標驅動藝廊](https://webberui.com/zh-tw/templates/cursor-driven-gallery) (pro): 影像隨游標扭曲/磁吸/傾斜/拖尾的觸感探索藝廊
- [無限畫布探索](https://webberui.com/zh-tw/templates/infinite-canvas-explorer) (pro): 多方向可拖曳的圖磚畫布，地圖般非線性探索
- [沉浸式 3D 旅程](https://webberui.com/zh-tw/templates/immersive-3d-journey) (pro): CSS 3D 空間旅程，滾動穿越走廊/門揭示各章內容
- [影片滾動擦除](https://webberui.com/zh-tw/templates/cinematic-video-scrub) (pro): 滾動逐幀推進背景影片的電影感 Hero + 文字疊層
- [滾動劇場首頁](https://webberui.com/zh-tw/templates/codex-scroll-theater) (pro): 置頂畫布劇場隨捲動換幕，章節文字同步淡入（Codex 式滾動敘事）
- [終端打字首頁](https://webberui.com/zh-tw/templates/terminal-typing-home) (pro): 英雄區是會打字執行的終端機，指令逐行輸出、游標閃爍、輸出驅動下方內容亮起
- [游標引力首頁](https://webberui.com/zh-tw/templates/cursor-gravity-home) (pro): 滿版粒子場受游標引力/斥力擾動，標題字元也被輕微吸引
- [程式碼變形首頁](https://webberui.com/zh-tw/templates/code-morph-home) (pro): 英雄程式碼區塊在多種語言/框架間平滑 morph，行號與高亮同步過渡
- [章節釘固首頁](https://webberui.com/zh-tw/templates/sticky-chapter-home) (pro): 左側章節文字捲動、右側視覺釘固換場，進度点導覽可點擊跳章
- [磁吸導覽首頁](https://webberui.com/zh-tw/templates/magnetic-nav-home) (pro): 導覽與 CTA 磁吸游標，英雄大字逐字浮起，區塊進場帶方向感
- [流場粒子首頁](https://webberui.com/zh-tw/templates/canvas-flowfield-home) (pro): canvas 流場（flow field）粒子隨 Perlin 式向量場流動，游標攪動流向
- [滾動擦除首頁](https://webberui.com/zh-tw/templates/scroll-scrub-frames-home) (pro): 捲動進度擦除英雄「幀序列」（程序生成漸層幀），文字疊層逐段換
- [傾斜場景首頁](https://webberui.com/zh-tw/templates/tilt-scene-home) (pro): 英雄是多層 3D 傾斜卡場景，滑鼠移動整組視差傾斜，卡片各自景深
- [巨字遮罩首頁](https://webberui.com/zh-tw/templates/text-mask-home) (pro): 超巨標題字腔內填動態漸層/粒子，捲動時字縮放成視窗遮罩穿入內容
- [聚光燈首頁](https://webberui.com/zh-tw/templates/spotlight-follow-home) (pro): 深色頁面由游標聚光燈照亮，區塊被照到才顯影，CTA 常亮
- [多層跑馬首頁](https://webberui.com/zh-tw/templates/layered-marquee-home) (pro): 三層反向速差跑馬燈與大字交錯，hover 減速、點擊反向
- [拖曳展示首頁](https://webberui.com/zh-tw/templates/drag-showcase-home) (pro): 作品輪播可拖曳帶慣性回彈，拖曳速度影響卡片傾斜
- [液態變形首頁](https://webberui.com/zh-tw/templates/blob-morph-home) (pro): 背景多個液態 blob 緩慢融合變形（metaball 感），跟隨捲動改變配色
- [鍵盤互動首頁](https://webberui.com/zh-tw/templates/keyboard-hero-home) (pro): 英雄提示「按任意鍵」，按鍵觸發對應動畫（字母彈出/波紋/音符感）
- [分屏同步首頁](https://webberui.com/zh-tw/templates/split-sync-home) (pro): 左右分屏反向同步捲動敘事，中線把手可拖曳改變比例
- [網格顯影首頁](https://webberui.com/zh-tw/templates/grid-reveal-home) (pro): 滿版格網 hover 逐格顯影內容縮圖，點擊格子放大為區塊
- [縮放門戶首頁](https://webberui.com/zh-tw/templates/zoom-portal-home) (pro): 捲動穿越一連串放大門戶（圓形/方形遮罩），每層是一個章節
- [即時遊樂場首頁](https://webberui.com/zh-tw/templates/live-playground-home) (pro): 左側程式碼可切換範例、右側預覽即時演示動畫效果（模擬 playground）
- [律動反應首頁](https://webberui.com/zh-tw/templates/pulse-reactive-home) (pro): 模擬音訊等化器律動驅動背景與卡片縮放，可點擊切換節奏
- [極簡置中首頁](https://webberui.com/zh-tw/templates/minimal-center-home) (pro): 大量留白置中排版：一句話+CTA+單一產品視覺
- [分割英雄首頁](https://webberui.com/zh-tw/templates/split-hero-home) (pro): 左文右視覺 50/50 分割，捲動後轉為交錯區塊
- [Bento 首頁](https://webberui.com/zh-tw/templates/bento-home) (pro): 整頁以 Bento 網格組織：英雄/功能/數據/評價都在格子裡
- [雜誌編輯首頁](https://webberui.com/zh-tw/templates/editorial-home) (pro): 雜誌式網格與襯線標題、首字放大、欄位分欄
- [側欄導覽首頁](https://webberui.com/zh-tw/templates/sidebar-dock-home) (pro): 左側固定側欄導覽+右側內容捲動（app 感官網）
- [滿版視覺首頁](https://webberui.com/zh-tw/templates/fullbleed-visual-home) (pro): 滿版漸層/圖形視覺為主，文字疊在視覺上，區塊間滿版切換
- [產品優先首頁](https://webberui.com/zh-tw/templates/product-shot-home) (pro): 大產品截圖（CSS 視窗框）為主角，功能點環繞標註
- [長敘事首頁](https://webberui.com/zh-tw/templates/long-story-home) (pro): 單欄長文敘事流，段落間穿插視覺與數據
- [作品牆首頁](https://webberui.com/zh-tw/templates/portfolio-wall-home) (pro): 磚牆式作品縮圖直接當首頁，hover 顯示資訊
- [定價優先首頁](https://webberui.com/zh-tw/templates/pricing-first-home) (pro): 英雄直接是定價卡，功能對比表緊隨其後
- [功能網格首頁](https://webberui.com/zh-tw/templates/feature-grid-home) (pro): 均勻功能卡網格為主體，上方精簡英雄
- [口碑主導首頁](https://webberui.com/zh-tw/templates/testimonial-led-home) (pro): 用戶評價牆開場，數據與 logo 牆佐證
- [儀表板首頁](https://webberui.com/zh-tw/templates/dashboard-home) (pro): 首頁即產品儀表板 mock：指標卡+圖表+表格
- [路線圖首頁](https://webberui.com/zh-tw/templates/roadmap-home) (pro): 時間軸路線圖為主體：已完成/進行中/計畫中
- [瀑布藝廊首頁](https://webberui.com/zh-tw/templates/masonry-gallery-home) (pro): 不等高瀑布流圖卡藝廊，篩選 pills
- [文件樞紐首頁](https://webberui.com/zh-tw/templates/docs-hub-home) (pro): 搜尋框+熱門主題卡+分類索引（docs 門戶）
- [社群樞紐首頁](https://webberui.com/zh-tw/templates/community-home) (pro): 成員頭像牆+活動列表+討論精選
- [發佈公告首頁](https://webberui.com/zh-tw/templates/launch-home) (pro): 倒數+訂閱+特性預告的產品發佈頁
- [不對稱首頁](https://webberui.com/zh-tw/templates/asymmetric-home) (pro): 不對稱網格與重疊元素，打破欄位的編輯感
- [多語 SaaS 首頁](https://webberui.com/zh-tw/templates/i18n-saas-home) (pro): 語言切換示意+在地化內容區塊的國際化 SaaS 排版
- [餐廳小酒館](https://webberui.com/zh-tw/templates/restaurant-bistro) (pro): 法式小酒館形象站：主廚故事、季節菜單、訂位、氛圍展示
- [房地產仲介](https://webberui.com/zh-tw/templates/real-estate-agency) (pro): 精品房仲：精選物件卡、地區搜尋、成交數據、顧問團隊
- [健身工作室](https://webberui.com/zh-tw/templates/fitness-studio) (pro): 高強度健身房：課表、教練、方案價格、學員蛻變數據
- [旅遊行程社](https://webberui.com/zh-tw/templates/travel-tour-agency) (pro): 深度旅遊行程：目的地卡、行程日程軸、旅客評價、季節推薦
- [婚禮邀請頁](https://webberui.com/zh-tw/templates/wedding-invitation) (pro): 單頁婚禮邀請：倒數、故事時間軸、流程、地點、出席回覆
- [法律事務所](https://webberui.com/zh-tw/templates/law-firm) (pro): 律師事務所形象站：專業領域、律師團隊、案例成果、預約諮詢
- [牙醫診所](https://webberui.com/zh-tw/templates/dental-clinic) (pro): 親切牙科診所：服務項目、醫師介紹、就診流程、線上預約
- [兒童學習中心](https://webberui.com/zh-tw/templates/kids-learning-center) (pro): 兒童教育機構：課程色卡、師資、教室環境、體驗課報名
- [咖啡烘焙所](https://webberui.com/zh-tw/templates/coffee-roastery) (pro): 精品咖啡烘焙：豆單、烘焙哲學、風味輪、訂閱配送
- [建築事務所](https://webberui.com/zh-tw/templates/architecture-firm) (pro): 極簡建築事務所：作品集網格、設計理念、獎項、委託流程
- [樂團巡演站](https://webberui.com/zh-tw/templates/music-band-tour) (pro): 獨立樂團官網：巡演日程、最新專輯、MV、周邊、歌迷通訊
- [攝影工作室](https://webberui.com/zh-tw/templates/photography-studio) (pro): 人像攝影工作室：作品集瀑布流、方案價格、拍攝流程、檔期預約
- [時裝電商首頁](https://webberui.com/zh-tw/templates/fashion-store-home) (pro): 服飾品牌電商首頁：新品輪播、分類入口、造型精選、會員招募
- [商品詳情頁](https://webberui.com/zh-tw/templates/product-detail-page) (pro): 完整商品詳情頁：圖廊、規格選擇、評價、推薦、置底購買列
- [球鞋發售站](https://webberui.com/zh-tw/templates/sneaker-drop-store) (pro): 限量球鞋抽籤發售：倒數、尺寸登記、發售日曆、抽籤規則
- [美妝品牌店](https://webberui.com/zh-tw/templates/beauty-brand-store) (pro): 保養美妝品牌：明星商品、成分故事、膚質測驗、套組優惠
- [家具家居店](https://webberui.com/zh-tw/templates/furniture-store) (pro): 北歐家具電商：情境分區、材質故事、空間靈感、量尺服務
- [生鮮外送](https://webberui.com/zh-tw/templates/grocery-delivery) (pro): 生鮮雜貨快送：分類速購、限時特惠、食譜連購、配送時段
- [金融儀表板](https://webberui.com/zh-tw/templates/finance-dashboard) (pro): 個人理財儀表板：資產總覽、收支圖表、預算進度、交易列表
- [專案看板應用](https://webberui.com/zh-tw/templates/project-kanban-app) (pro): 看板專案管理介面：多欄任務卡、篩選列、成員頭像、進度統計
- [聊天通訊應用](https://webberui.com/zh-tw/templates/chat-messenger-app) (pro): 即時通訊介面：對話列表、聊天氣泡、輸入中指示、貼圖面板
- [郵件客戶端](https://webberui.com/zh-tw/templates/email-client-app) (pro): 三欄郵件應用：資料夾、郵件列表、閱讀窗格、撰寫彈窗
- [音樂播放器](https://webberui.com/zh-tw/templates/music-player-app) (pro): 音樂串流介面:正在播放、歌單網格、歌詞滾動、播放佇列
- [加密交易所](https://webberui.com/zh-tw/templates/crypto-exchange-app) (pro): 交易所介面：行情列表、K 線區、下單面板、資產分佈
- [新聞雜誌站](https://webberui.com/zh-tw/templates/news-magazine) (pro): 數位新聞雜誌首頁：頭條、分類區塊、專題、即時榜、訂閱牆
- [食譜集](https://webberui.com/zh-tw/templates/recipe-collection) (pro): 食譜內容站：精選食譜卡、步驟頁示意、食材清單、分類探索
- [影評網站](https://webberui.com/zh-tw/templates/movie-review-site) (pro): 電影評論站：本週影評、評分星等、片單專題、影人訪談
- [線上研討會落地頁](https://webberui.com/zh-tw/templates/webinar-event-landing) (pro): Webinar 報名頁：議程、講者、倒數、報名表單、常見問題
- [新書發表落地頁](https://webberui.com/zh-tw/templates/book-launch-landing) (pro): 新書預購頁：書封展示、章節搶先讀、作者介紹、預購方案
- [手機遊戲落地頁](https://webberui.com/zh-tw/templates/mobile-game-landing) (pro): 手遊預約頁：世界觀、角色圖鑑、玩法特色、事前登錄獎勵