Mockups
Laptop
A 3D laptop whose lid swings open when it scrolls into view — aluminium body, full keyboard, trackpad and speaker grilles. The screen holds a live site at 1280 × 800.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LaptopMockup } from '@vizzele/react';
<LaptopMockup finish="silver">
<MyDashboard /> {/* rendered at 1280 × 800 */}
</LaptopMockup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
finish | string | 'silver' | silver · space · midnight |
open | number | 108 | Lid angle in degrees. It opens to this when scrolled into view; 0 = closed. |
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 | false | Gently float and sway. |
Accessibility
- The screen is 1280 × 800 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.