媒體
Device Mockup
Safari／iPhone／Android 裝置外框展示，含 hover 3D 傾斜、漂浮與進場動畫。
把任意內容（截圖、live UI）裝進 Safari 桌面瀏覽器或 iPhone／Android 手機外框，附帶跟隨游標的 3D 傾斜與玻璃高光。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add device-mockupPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12
編輯中的呼叫預設屬性
<DeviceMockup/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/device-mockup.json或在 components.json 設定 registries 後，改用 @webberui/device-mockup 安裝。
使用
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]）控制寬度。
攝影棚舞台（studio）
variant="studio" 會把裝置放上暗色攝影棚：頂部徑向光暈、地面與反光光斑；裝置隨頁面捲動從後仰 12° 立正、由 0.92 倍放大到 1 倍。舞台上的外框由 studioDevice 決定，螢幕內容一樣是真 DOM，可以直接放可互動的 UI。
<DeviceMockup variant="studio" studioDevice="safari" url="app.webberui.com" className="w-full max-w-2xl">
<Dashboard />
</DeviceMockup>studio 模式下 className 套在舞台根元素上（控制舞台寬度）；舞台背景固定為暗色，不隨深淺色主題切換。
放在巢狀捲動容器內
預設追蹤的是視窗的捲動。若元件放在固定高度的 overflow-y-auto 容器內，請把該容器的 ref 傳給 container。只有 variant="studio" 會追蹤捲動，其他外框不受影響。
const scrollerRef = React.useRef<HTMLDivElement>(null);
<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
<DeviceMockup variant="studio" container={scrollerRef}>{/* 內容 */}</DeviceMockup>
</div>以整個視窗為捲動容器時可省略 container，行為與原本相同。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "safari" | "iphone" | "android" | "studio" | "safari" | 裝置外框樣式；"studio" 為暗色攝影棚舞台，隨捲動立起 |
studioDevice | "safari" | "iphone" | "android" | "safari" | variant="studio" 時舞台上的外框；其他 variant 忽略 |
url | string | "webberui.com" | Safari 位址列文字（手機不顯示） |
tilt | number | 12 | hover 3D 傾斜最大角度（deg）；設 0 關閉 |
float | boolean | false | 持續上下漂浮 |
reveal | boolean | true | 首次進入視口時淡入上浮 |
children | ReactNode | — | 螢幕內容 |
container | RefObject<HTMLElement> | — | 巢狀捲動容器的 ref；省略則以視窗為捲動容器 |
className | string | — | 套在最外層容器（控制寬度）；studio 時套在舞台根元素 |
screenClassName | string | — | 套在螢幕內容框（背景、內距） |
可及性
- studio 的光暈、地面與反光皆為裝飾層，標記
aria-hidden - 使用者系統開啟「減少動態效果」時，關閉傾斜、漂浮與進場動畫，直接靜態呈現；studio 的捲動立起也停用，固定在終點（0°、1 倍）
- 傾斜僅在滑鼠指標時觸發，觸控裝置不受影響
- 裝飾性外框元素皆標記
aria-hidden，不干擾螢幕內容的朗讀