iPhone Mock

iPhone Mock is a phone frame u drop an image or a video into, and the whole handset is drawn in CSS so it stays sharp from a thumbnial all the way up to a full bleed hero. Every part of it is a control, so if the island or the side buttons arent right for the page ur building u can jsut turn them off.

Features

• image or video, upload an MP4 or paste a link

• the iPhone is drawn, not an image, so it stays sharp at any size

• Island, notch or nothing, and the screen goes 9:19.5, 9:16, 3:4 or ur own ratio

• bezel, corner radius, island and home bar are all a share of the width, so nothing distorts when it scales

• no measuring pass, so it never flashes an empty box before it draws

• draws the real thing on the canvas, in exports and in thumbnails, not a grey placeholder

• video pauses itself when it scrolls out of view, and only restarts the ones it paused, so a video u stopped by hand stays stopped

• respects reduce motion, and the media takes a screen reader label

Customization

Six groups so u dont have to hunt, Content and Screen are the ones u actually touch, Playback only turns up when ur showing a video. Recolour the frame, the buttons, the bar and the screen behind the media, set the border width and the roundness, and the side rails, home bar, glare and shadow each swtich off on there own. Crop to fit, show all or stretch, plus a focus point and a zoom for when the shot isnt framed how u want it.

Perfect for

• app landing pages

• porduct and feature launches

• agency and studio sites

• portfolio case studies

• anywhere u want a screenshot to actually look like a phone

Support

Something broken or u just want a hand setting it up, reach me at mail at kaialanrazz@gmail.com or X and il get back to u