Mockups
iPhone-style phone
A 3D phone with a titanium frame, Dynamic-Island cutout and a real camera plateau on the back. Put your app inside — it stays live and clickable. Turns toward the pointer, spins when you drag the frame.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { PhoneMockup } from '@vizzele/react';
<PhoneMockup model="iphone" finish="natural" width={300}>
<MyAppScreen /> {/* or <img src="/screenshot.png" alt="…" /> */}
</PhoneMockup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
model | 'iphone' | 'galaxy' | 'iphone' | Which phone. |
finish | string | 'natural' | natural · black · white · blue |
children | ReactNode | — | Screen content: an <img>, a <video>, or a live React app — it stays clickable. |
width | number | string | — | Rendered width; the device scales to fit. |
rotate | [x, y] | — | Resting angle in degrees (each device has a flattering default). |
tilt | number | 8 | How far (deg) it turns toward the pointer. 0 = still. |
drag | boolean | true | Drag the frame to spin it; a fling spins it round and it settles on a spring. |
float | boolean | true | Gently float and sway. |
statusBar | boolean | true | Time, signal and battery. |
statusBarTone | 'light' | 'dark' | 'light' | White text for dark apps, black for light ones. |
time | string | '9:41' | Clock in the status bar. |
Accessibility
- The screen is 394 × 836 CSS px, like the real thing, so your UI renders at its true size and the device scales it. Pad content with var(--vz-safe-top) / var(--vz-safe-bottom) to clear the status bar and home indicator.
- The device itself is decoration (aria-hidden); only your screen content is exposed, and it stays fully interactive — focus, clicks and scrolling work inside the screen.
- Dragging starts only from the frame, never from the screen, so using the app never spins the phone.
- With reduced motion it stays still at its resting angle: no float, no tilt, no spin; the laptop starts open.
- Pure CSS 3D: no WebGL, no images to download. It only animates while on screen and idles when nothing moves.