iPhone
A modern iPhone drawn in SVG and CSS around a picture, a video or live UI: a titanium frame with its side buttons, a Dynamic Island, a drawn status bar and the home indicator. It scales with its width and keeps the proportions of the real device.
Examples
Live UI
A small screen built from our primitives. The status bar and the home indicator take the colour of the text, so they follow the theme with the screen.
Changing screens
A picture with live UI on top of it. When the picture changes, the new one fades in over the old one and the status bar takes the tone of the new picture.
Finishes
The Safari page composes the iPhone with the browser and the Android phone for a landing page.
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-iphone.jsonComponent API
Iphone
| Prop | Type | Default | Description |
|---|---|---|---|
| imageSrc | string | A picture covering the screen. | |
| videoSrc | string | A muted looping video covering the screen. It wins over imageSrc. | |
| alt | string | '' | The text alternative of the picture or the video. Leave it empty when label already says what the screen shows. |
| finish | 'natural' | 'black' | 'white' | 'black' | The titanium of the frame and the buttons. |
| statusBar | 'auto' | 'light' | 'dark' | 'auto' | The colour of the status bar and the home indicator. auto uses the text colour of the theme; set it for a picture. |
| time | string | '9:41' | The time in the status bar. An empty string leaves it out, as on a lock screen. |
| safeArea | boolean | true | Keeps live UI below the status bar and above the home indicator. Turn it off to draw under them. |
| label | string | 'Phone screen' | The accessible name of the figure. |
| children | ReactNode | Live UI for the screen, drawn above the picture or the video when both are given. It scrolls when it is taller. | |
| className | string | Optional CSS class for the device. Its width sets the size, up to the 438px of the real device. |
Everything is clipped to the corner radius of the screen. Live UI renders at its own size; the hardware, the status bar and the Dynamic Island scale with the width. The device is a size container, so live UI can scale with it too through cqw units, as the lock screen of the second example does.
The device is a figure named by label; the frame, the status bar, the Dynamic Island and the home indicator are hidden from assistive technologies. When imageSrc or videoSrc changes, the new picture fades in over the old one in 240ms. Under reduced motion the fade stays, the video does not play by itself and shows its controls instead.
Credits
Inspired by the device mockups of Magic UI, drawn again on our tokens.