How to embed an interactive iPhone in Framer
A video of a rotating iPhone is fine. An iPhone your visitor can actually grab, orbit and watch follow their cursor is a different landing page. Here is how to embed one in Framer without writing code.
Why live 3D beats an exported video
A video weighs megabytes, blurs on retina, and ignores the visitor. A live WebGL scene weighs about as much as a large image, stays pixel-sharp at any size, and responds — follow-cursor, grab-to-rotate, scroll motion. Interaction is what makes people stop scrolling.
Step 1 — Pose your scene in the plugin
In Mockiosa’s panel, pick the iPhone, drop your app screenshot or a screen recording, choose the finish, set the angle. Toggle the animation you want on the published page: follow-cursor is the crowd favorite for heroes.
Step 2 — Save the scene and copy the component
Save the scene to your library (cloud-synced). The plugin gives you a Framer code component bound to that scene — copy it.
Step 3 — Paste on your page and publish
Paste the component where the mockup should live, size it like any frame, publish. The published page renders the real 3D scene. Re-pose the scene later in the plugin and the site updates — no re-export, no re-upload.
Performance note: the embed is lazy-loaded, pauses off-screen, and caps its frame budget — it will not tank your Lighthouse score.