Device Mockup
Safari／iPhone／Android 裝置外框展示，含 hover 3D 傾斜、漂浮與進場動畫。
把任意內容（截圖、live UI）裝進 Safari 桌面瀏覽器或 iPhone／Android 手機外框，附帶跟隨游標的 3D 傾斜與玻璃高光。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12
<DeviceMockup />
安裝
npx shadcn@latest add https://webberui.com/r/device-mockup.json或在 components.json 設定 registries 後，改用 @webberui/device-mockup 安裝。
安裝依賴後，從 registry JSON（/r/device-mockup.json 的 files[0].content）複製 device-mockup.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { DeviceMockup } from "@/components/ui/device-mockup";
<DeviceMockup variant="safari" url="webberui.com" className="w-[420px]">
<img src="/screenshot.png" alt="App" className="h-full w-full object-cover" />
</DeviceMockup>;variant 設 "iphone" 或 "android" 即切換為手機外框；手機外框寬度固定，safari 則靠外層 className（如 w-[420px]）控制寬度。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "safari" | "iphone" | "android" | "safari" | 裝置外框樣式 |
url | string | "webberui.com" | Safari 位址列文字（手機不顯示） |
tilt | number | 12 | hover 3D 傾斜最大角度（deg）；設 0 關閉 |
float | boolean | false | 持續上下漂浮 |
reveal | boolean | true | 首次進入視口時淡入上浮 |
children | ReactNode | — | 螢幕內容 |
className | string | — | 套在最外層容器（控制寬度） |
screenClassName | string | — | 套在螢幕內容框（背景、內距） |
可及性
- 使用者系統開啟「減少動態效果」時，關閉傾斜、漂浮與進場動畫，直接靜態呈現
- 傾斜僅在滑鼠指標時觸發，觸控裝置不受影響
- 裝飾性外框元素皆標記
aria-hidden，不干擾螢幕內容的朗讀