Device mockups have never been easier

Your app,
on a real phone.

Create gorgeous device previews in seconds.
All you need is a screenshot of your app, and Screenframe3D does the rest.

See how it’s done Open the playground

The device you are seeing is powered by Screenframe3D, running live in browser.

Your screenshot on the glass Pre-baked image backups HDRI lighting on glass and metal Real 3D phones not a flat PNG Your screenshot on the glass Pre-baked image backups HDRI lighting on glass and metal Real 3D phones not a flat PNG

Built for launch pages, not galleries.

Static PNGs of phones go stale the moment your UI changes. S3D keeps your designers focused on what matters: the app, not the device.

01

A real device, not a flat PNG

Your users see a realistic-looking device, with glass, metal, and reflections. Performant rendering designed for mobile and web.

02

Your screenshot, on the glass

Point it at an image and S3D composites it onto the display — corners, island, and all.

03

Clean flat image fallback.

When you build your app, S3D automatically takes a snapshot of exactly how the final render will look. Loading feels instant and models fall back to a perfect image if they fail to render.

The only free-to-use 3D device mockup library.

Everything on this page is powered by HTML and a few lines of Screenframe3D.

S3D's 3D is powered by Three.js and device models from Sketchfab. 

import { DeviceShowcase } from 'screenframe3d/react'

<DeviceShowcase
  screenshot="/screenshot.png"
  device="apple/iphone-5s"
  zoom={1.8}
  baseTilt={{ x: 0.12, y: -0.38, z: -0.06 }}
/>

import { screenframe } from 'screenframe3d/vite'
export default { plugins: [screenframe()] }