{"id":"4576944d-3009-4998-a9c9-8c9f7abb669d","name":"iPhone Frame","slug":"iphone-frame","category":"device-frames","description":"Just the iPhone frame — Dynamic Island, side buttons, layered bezel — on a transparent canvas with a chroma-green screen. Pass any screenshot as the screen image_url param to fill the display, or keep the green and composite it yourself.","sample_params":{"screen":"https://media0.subprocess.io/example-og.webp"},"spec":{"name":"iphone-frame","width":660,"height":1330,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml, body { width: 100vw; height: 100vh; overflow: hidden; }\nbody { background: transparent; display: flex; align-items: center; justify-content: center; padding: 10px; }\n.phone {\n  position: relative; width: 100%; height: 100%; border-radius: 111px;\n  background: #101116; padding: 22px;\n  box-shadow: inset 0 0 0 6px #4a4e58, inset 0 0 0 12px #16171c;\n}\n.side { position: absolute; background: #3c404a; border-radius: 4px; }\n.s-mute  { left: -7px; top: 286px; width: 7px; height: 63px; }\n.s-volup { left: -7px; top: 407px; width: 7px; height: 111px; }\n.s-voldn { left: -7px; top: 547px; width: 7px; height: 111px; }\n.s-power { right: -7px; top: 441px; width: 7px; height: 174px; }\n.screen { position: relative; width: 100%; height: 100%; border-radius: 92px; overflow: hidden; background: #00b140; }\n.screen img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.island { position: absolute; top: 27px; left: 50%; transform: translateX(-50%);\n  width: 184px; height: 53px; border-radius: 28px; background: #000; z-index: 3; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='phone'\u003e\n  \u003cdiv class='side s-mute'\u003e\u003c/div\u003e\u003cdiv class='side s-volup'\u003e\u003c/div\u003e\u003cdiv class='side s-voldn'\u003e\u003c/div\u003e\u003cdiv class='side s-power'\u003e\u003c/div\u003e\n  \u003cdiv class='island'\u003e\u003c/div\u003e\n  \u003cdiv class='screen'\u003e{{if .screen}}\u003cimg src='{{.screen}}' alt=''\u003e{{end}}\u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"screen":{"type":"image_url","description":"Screenshot URL shown inside the display (portrait ~9:19.5 works best; object-fit cover). Fetched server-side. Leave empty for the chroma-green screen."}}}}