Safari — 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 Safari browser window with traffic lights and an address bar, a video playing in the page area

Prompt that renders it frame-exact

Use the Safari mockup from Magic UI (https://magicui.design/docs/components/safari, MIT) to frame a website or web-app recording, centred in a 16:9 frame with some margin. The window is a static SVG with the URL in the address bar (url prop) and the page area filled by imageSrc or videoSrc; mode "simple" drops the toolbar icons. In a render the page video must follow the composition clock: in HyperFrames use a framework-owned <video class="clip" data-start> in the page area, in Remotion <OffthreadVideo>. Set url to the real domain, use a 16:10 recording, and move the window on the timeline (scale-in, slow pan) for life.

Used in

More devices & mockups