iPhone — component for devices & mockups (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Dark iPhone frame with Dynamic Island and side buttons, a video playing edge to edge on its screen

Prompt that renders it frame-exact

Use the iPhone mockup from Magic UI (https://magicui.design/docs/components/iphone, MIT) to present an app screen recording: the phone centred in a 16:9 frame or filling most of a 9:16 frame. The frame is a static SVG with the screen area positioned in percentages, and it takes src (an image) or videoSrc. In a render the screen video must follow the composition clock: in HyperFrames place a framework-owned <video class="clip" data-start> in the screen area, in Remotion render <OffthreadVideo> there instead of videoSrc. Animate the phone itself on the timeline (a slow push-in or tilt), and pick a recording that matches the screen's aspect ratio.

Used in

More devices & mockups