Every framed iPhone capture on this site takes the same path: I drop a screenshot or a screen recording into a folder and it comes out baked into a device bezel. I never open an image editor. I never line up a frame. The Dot review has dozens of these and I made exactly none of them by hand.
Two of them, exactly as the pipeline produced them. A baked screenshot, one flat PNG that is transparent outside the phone:
And a baked screen recording. Toggle this site’s theme and watch the corners follow, because what you are seeing is a light version and a dark version swapped with CSS:
That pipeline is now DKBezeler, a CLI you can run with npx. It reads your capture’s resolution and picks the right device frame on its own. It measures any frame PNG’s screen cutout automatically by flood-filling the alpha channel, so when Apple ships a new iPhone you download the new bezel and nothing else changes. init fetches Apple’s official product bezels onto your machine in one command. Screen recordings come out as a light version and a dark version with corners matched to your page backgrounds, and the display component swaps them instantly when your site changes theme with no JavaScript.
My favorite parts are the pixels you will never see. Around a phone’s rounded corners a naive composite lets the screen bleed through the frame’s antialiased edge: invisible on white, a crusty dotted rim in dark mode. DKBezeler recomputes every one of those pixels precisely on every bake. The source is on GitHub and the CLI is on npm. Your screenshots deserve a nicer frame than a rectangle.
Chat about this?
Send a comment