Pick a preset
Hundreds of them, ready to go.
A Film Set
for Your Product
Pick a scene, drop in your screen or video, and tune it to your brand. The motion is already done.
Open StudioA project by ls.graphics
A Film Set
From screen recording
to a production video.
In minutes.
By the team that's been making mockups for designers for 14 years.
Make it yours
Your media, your colors, your brand.
Export and use it anywhere
Any size — a site, a post, a deck, an ad.
Two modes today, more coming
Studio ↓Origin ↓Studio.
Here you make the motion yourself. Open a preset, drag a point on the timeline, watch it change.
The Linear website is shown for illustration only. mckp.live is not affiliated with or endorsed by Linear.
11 mockups, 69 presets
and counting
Working hard on new presets
iPhone 18 Pro Rock CreviceiPhone 18 Pro in HandiPhone 18 Pro in HandiPhone 18 Pro in HandiPhone 18 Pro in HandiPhone 18 Pro in HandMacBook ProMacBook ProStudio DisplayStudio DisplayStudio DisplayStudio DisplayStudio DisplayStudio DisplayiPhone 18 Pro in HandStudio DisplayiPhone 18 Pro in HandStudio DisplayiPad ProiPad ProiPad ProiPad ProiPad ProiPad ProiPad ProiPad ProiPhone DuoiPhone DuoiPhone DuoiPhone DuoiPhone DuoiPhone DuoiPhone DuoGalaxy Tab S11 UltraiPhone 18 ProiPhone 18 ProiPhone 18 ProiPhone 18 ProiPhone 18 ProiPhone 18 ProiPhone 18 ProPixel FoldPixel FoldPixel FoldiPhone 18 Pro in HandPixel FoldPixel FoldPixel FoldPixel FoldGalaxy Tab S11 UltraGalaxy Tab S11 UltraPixel FoldiPad Pro KeyBoardiPad Pro KeyBoardGalaxy Tab S11 UltraGalaxy Tab S11 UltraGalaxy Tab S11 UltraGalaxy Tab S11 UltraiPad Pro KeyBoardGalaxy Tab S11 UltraiPad Pro KeyBoardiPad Pro KeyBoardiPad Pro KeyBoardiPad Pro KeyBoardiPad Pro KeyBoardMacBook ProMacBook ProMacBook ProMacBook Pro
Origin.
Device mockups, but animated. 389 scenes, lit and shot by our designers. The library keeps growing.
Apple Fitness is shown for illustration only. mckp.live is not affiliated with or endorsed by Apple Inc.
389 scenes
and counting
Working hard on new scenes
Export Code
<mockup-player mockup-id="4f13b895-0839-4b98 width="100vw" height="100vh" trigger="scroll"
One snippet, that's it
Copy it from the editor, paste it anywhere. Webflow, Framer, any site.
Trigger
No TriggerAnimate onClickAnimate onHoverAnimate onScrollScrolled intoViewAnimate onLoadAnimate onCursor Move
Horizontal
20%
20%
Start it how you want
Click, hover, scroll, in view, on load — or follow the cursor.
Live effects
The camera answers the cursor — follow, zoom, shake, dolly.
Progressive mode
A light version appears right away. Full textures load behind it and swap in.
What's new.Fresh from the changelog.
Full changelogPlays nicely with your stack.
Render video or copy code for your platform
Render a video shot in minutes. Stand out without After Effects.
Render a video shot in minutes. Stand out without After Effects.
Paste the embed, ship the site. Interactive mockups, zero plugins.
Paste the embed, ship the site. Interactive mockups, zero plugins.
Embed and forget. Responsive, fast, zero custom code.
Embed and forget. Responsive, fast, zero custom code.
Render square, vertical, or reel-ready videos in one click.
Render square, vertical, or reel-ready videos in one click.
One iframe, infinite possibilities. Any site, any stack.
One iframe, infinite possibilities. Any site, any stack.
Export videos for case studies. Portfolios that come alive.
Export videos for case studies. Portfolios that come alive.
Questions
What is mckp.live?
mckp.live is a browser tool for animated, interactive 3D device mockups. Drop a screenshot or a screen recording onto a 3D iPhone, iPad, MacBook or Android phone, then export a video or embed the live mockup on your website. It is made by ls.graphics, who have been making mockups for designers for 14 years.
What is the difference between Studio and Origin?
Origin is a library of 389 ready-made animated scenes, lit and shot by designers: pick one, add your screen, export or embed it. Studio is where you make the motion yourself — keyframes for the camera and the device on a timeline — starting from one of 69 presets.
Which devices are available?
Origin scenes: iPhone 17 Pro, iPhone Air, iPhone 16 Pro, iPhone 16e, MacBook Air, MacBook Pro, MacBook Neo, MacBook, Nothing Phone (3) and iPad Pro. Studio mockups: iPhone 18 Pro in Hand, Studio Display, iPad Pro, Galaxy Tab S11 Ultra, Pixel Fold, iPad Pro KeyBoard, iPhone Duo, iPhone 18 Pro, MacBook Pro and iPhone 18 Pro Rock Crevice. New devices are added regularly.
Can I put a video on the screen?
Yes. A screen takes an image or a video up to five minutes long. In an embed the video streams, so it starts playing quickly.
How do I embed a mockup on my website?
Copy the embed snippet from the editor and paste it into Framer, Webflow or any HTML page. The scene can play on load, loop, or start on click, hover, scroll or when it comes into view, and the camera can follow the cursor. A light version appears right away while full textures load.
What can I export?
Videos and images at any size and aspect ratio. Scenes with a transparent background export as WebM with real alpha, so the clip sits on top of any page or edit. Long or heavy videos render on our GPU servers, so you don't have to keep the tab busy.
Do I need to install anything?
No. mckp.live runs in the browser. There is also a plugin for Framer.
Is it free?
You can start for free, no card required. Free forever with 3 projects and a watermark. Pro removes the watermark and the limits: $19/month, or $8.25/month billed yearly ($99). Prices exclude VAT. Details: https://mckp.live/pricing/
First videoin a few minutes
No card needed.
Open App