Glass Surface
即時扭曲的玻璃擬態表面，帶折射、鏡面高光與指標傾斜。
以 SVG 位移濾鏡即時扭曲背景，疊上鏡面高光與立體邊緣，呈現 Apple「液態玻璃」的折射質感。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
28
4
1.7
36
0.008
<GlassSurface />
安裝
npx shadcn@latest add https://webberui.com/r/glass-surface.json或在 components.json 設定 registries 後，改用 @webberui/glass-surface 安裝。
安裝依賴後，從 registry JSON（/r/glass-surface.json 的 files[0].content）複製 glass-surface.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { GlassSurface } from "@/components/ui/glass-surface";
<GlassSurface className="w-72">
<p className="text-lg font-semibold text-white">Liquid Glass</p>
</GlassSurface>把玻璃放在有顏色或圖案的背景之上，折射與飽和效果才會明顯。用 className 控制尺寸，padding 控制內距。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
radius | number | 28 | 邊角圓角（px） |
blur | number | 4 | 背景模糊強度（px） |
saturation | number | 1.7 | 背景飽和度倍率，>1 讓穿透的顏色更鮮活 |
distortion | number | 36 | 折射位移量（px），控制邊緣透鏡扭曲幅度 |
frequency | number | 0.008 | 折射噪點頻率，越小波紋越大越平滑 |
tint | string | rgba(255,255,255,0.12) | 玻璃染色（半透明疊層） |
interactive | boolean | true | 指標傾斜、鏡面光跟隨、hover 增強扭曲（僅滑鼠） |
padding | string | "p-6" | 內距 Tailwind 類別 |
className | string | — | 透傳到外層容器（用來設定尺寸） |
可及性
- 使用者系統開啟「減少動態效果」時，關閉折射扭曲與指標傾斜，維持靜態的霧面玻璃
- 折射濾鏡透過
backdrop-filter的url()套用；不支援的瀏覽器會自動退回單純的模糊與飽和，不會破版 - 所有裝飾層皆為
aria-hidden，不影響朗讀內容