How to add a 3D mockup in Framer
Framer has no native 3D device mockups — the usual workaround is rendering a PNG in another tool and re-importing it forever. Here is the five-minute way to get a real, live 3D mockup on your Framer canvas instead.
1. Install a 3D mockup plugin
Open your Framer project, press ⌘K and search the plugin marketplace for a 3D mockup plugin — Mockiosa is built exactly for this. The plugin opens in a side panel; no separate app, no export/import loop.
2. Pick a device and drop your screenshot
Choose your device (iPhone 17 Pro, iPad Pro, MacBook Pro, iMac, Apple Watch Ultra…). Then drag any image or video onto the canvas — it auto-fits the device screen, portrait or landscape. Video files play directly on the screen, looped.
3. Pose the camera and the light
Orbit with the mouse until the angle sells the shot. Pick a device color (official finishes or your brand hex), adjust the studio light, and preview animations: follow-cursor, float, auto-orbit, scroll-rotate.
4. Publish live — or export 4K
Two ways to ship. Export: a 4K PNG with transparency or an MP4/WebM video, rendered in your browser. Or publish LIVE: paste the code component on your page and the real 3D scene renders on your published site, reacting to your visitors.
The live route is what a static mockup can never do — and it updates automatically when you re-pose the scene in the plugin.