What you get
- PNG mockups in 16:9, 1:1, 4:5 or 9:16 at 1080p, 2K or 4K, transparent or on a background
- A 60 fps MP4 of the phone unfolding, folding or both, with optional camera sway
- The interactive studio source and a single offline HTML build of it
- Three body finishes, ten bundled backgrounds and video background support
- Optional PopNow backdrop, background loop and fold sound, quoted first
Good for
- App store, launch and social images from real screenshots
- A short device clip for a reel, changelog or landing page
- Showing a responsive web app on a large and a small screen at once
Not for
- Mockups of a specific real handset model
- Inventing an interface that does not exist yet
- Full launch films with titles and narration
How to use it
In Claude or ChatGPT
Use the PopNow skill "Phone Mockup Generator" (phone-mockup-generator) for this: Put ./shots/dashboard.png on the phone, open, silver finish, warm background, and give me 16:9 and 4:5 PNGs.
In a coding agent
/popnow-phone-mockup-generator Put ./shots/dashboard.png on the phone, open, silver finish, warm background, and give me 16:9 and 4:5 PNGs.
Then try
Now a 6-second clip of it opening and closing with a soft hinge click. Quote the sound first.
Use the mobile capture ./shots/today.png on the small screen and make a closed 9:16 version.
What to have ready
- A landscape screenshot or recording for the large display (about 1.42:1)
- Optionally a portrait file for the small display
- Node 22 and Chrome for headless exports
- Optional: a PopNow API key for a custom backdrop, loop or sound
Similar skills
View all →Black and White Studio Portrait
+3Turn an everyday photo into a calm black-and-white studio portrait that still looks like you.
Blog Post Illustration Set
+3Three matching illustrations for one article, each showing what its passage actually says.
Brand Kit & DESIGN.md Generator
+3A brand kit from a short brief: checked palette, open fonts, SVG logo, mockups and a DESIGN.md agents follow.
Car Cutaway Anatomy Poster
+3A side-view cutaway of a generic car: color-coded systems, numbered markers and round zoom windows.
Chalkboard Infographic Maker
+3A 16:9 chalkboard-style infographic with exact short copy, chalk drawings and one clear reading path.
Cinematic Storyboard Frames
+3Three storyboard contact sheets for one scene, each a different way to shoot it, with continuity kept.
Consistent Concept Art Set
+3A character, a prop and an environment that clearly belong to the same fictional world.
Cute Crayon Doodle Art
+3Lovably clumsy crayon characters on white paper: wobbly lines, scribbled fills, sharp files, sticker cut-outs.
Editorial Line Illustration
+3Airy black-ink illustrations with one accent color for blog headers, newsletters and social cards.
Engraving Style Article Cover
+3One surreal black-ink engraving per essay: crosshatched, edge to edge, its big idea shown as a single scene.
EV Platform Exploded View
+3An electric car lifted apart layer by layer: battery, motors, cabin and body in color, with callouts.
Product Exploded View Poster
+3A clean exploded-view hero image of a product, with exact part labels from your spec table.
Fantasy Map Generator
+3Parchment, atlas or black-line maps of your own world, every name lettered right, grids that line up.
Regional Food Flavor Map
+3A calm painted map of regions, each with a small taste chart on one shared scale and an honest legend.
Illustrated City Map Maker
+3A hand-drawn style map of a neighborhood or town, true where it matters and labeled exactly.
Ink Sketch Storyboard
+3A rough black-ink storyboard page from a short story: open lines, white space, one beat per panel.
Line Art OG Image Maker
+3Calm link-preview images: off-white card, short black headline and a hand-drawn ink character.
Marine Biology Research Poster
+3A wide research poster around a painted habitat cross-section, with numbered species and a findings chart.
Photo Composition Studies
+3Three photographic takes on one subject, each built on a different composition principle.
Sketchnote Image Generator
+3Turns an article or notes into one hand-drawn 4:3 sketchnote with exact, checked labels.
Social Cover & Thumbnail Generator
+3One message in, a checked set of OG images, post covers and video thumbnails out, every size exact.
Questions
Is this a real phone model?
No. The phone is a generic foldable drawn by code, so it carries no manufacturer's design or logo. That keeps your images free of someone else's trademark.
Do I need to install anything?
Node 22 and Google Chrome (or Chromium or Edge). The scripts use no npm packages: they serve the studio locally and drive the browser to export PNG and MP4 files.
Can the screens show video?
Yes. Both displays take MP4, WebM or MOV as well as images. During export the recording is stepped frame by frame, so it stays in sync with the fold.
What does PopNow add?
Things the studio cannot draw: a backdrop generated for your product, a five-second moving background, and sound for the clip. Each is optional and quoted in credits before it runs.