Mockups
Galaxy-style phone
A 3D Android flagship: flat armour frame, centred punch-hole camera and three separate lenses down the back. Same live screen, pointer tilt and drag-to-spin.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { PhoneMockup } from '@vizzele/react';
<PhoneMockup model="galaxy" finish="violet" width={300}>
<MyAppScreen />
</PhoneMockup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
model | 'iphone' | 'galaxy' | — | Use 'galaxy'. |
finish | string | 'black' | black · gray · violet · cream |
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 / statusBarTone / time | … | — | As on the iPhone style. |
Accessibility
- The screen is 396 × 848 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.