Foldable Phone Prototyper: see your screens fold

I was updating my app Forgettable so it works properly on the new iPhone Duo. For the landing page I built a small hero animation: the phone sits folded, then opens like a book and shows the app across both halves of the inner display.

When I watched it play, I thought: wait, this could be useful on its own. Every designer adapting an app for the Duo needs to see their screens on the device, and needs a video and stills to show it. So I turned the animation into a standalone tool.

Try it: foldable-phone-prototyper.pages.dev

How it works

1. Add your screens. The outer display (what you see when the phone is folded) and the inner display, as one landscape image or as two halves.

2. Fold and unfold. Click the phone and it opens like a book or closes again.

3. Export. Download a 6-second MP4 (folded, unfolds, holds open, folds back) and 4K PNGs of both states, with a transparent background if you need one.

Everything runs in your browser. The screens you upload never leave your computer.

Making it feel real

What I care about most here is that the device looks real and the motion feels smooth. A mockup that looks like a cardboard cut-out undersells the design you put on it.

The proportions. The inner display is landscape at √2:1 and the outer display is portrait at 1:√2. Folded, the phone is exactly one half of the open device, so both states always line up.

The motion. The fold uses the same 1.5 s cubic-bezier(0.65, 0, 0.35, 1) curve as the Forgettable hero. One value drives both the hinge angle and the slide back to centre, so the device never drifts while it turns. While the inside of the right half faces away from you, it darkens, so it reads as turning away from the light.

The body. Each half is a solid 3D slab, not a flat card: glass front and back, metal sides with rounded edges, and reflections from a studio light setup. A soft shadow underneath follows the device as it opens. You can pick a black, natural or silver finish.

The video. A browser can't record CSS 3D animations to a video file, so the device is drawn in WebGL (three.js). The export doesn't record the screen in real time. It renders every frame on its own, 360 frames at 60 fps, and encodes them to an H.264 MP4. No dropped frames, even on a slow machine, and the last frame matches the first, so the clip loops without a jump.

How I built it

I prompted my way to the finished project with Claude Code; I didn't write the code by hand. I made the product decisions and set the design direction: a free public tool, two ways to upload the inner display, MP4 as the default video format so it drops straight into Keynote and Figma, a background colour picker plus transparent PNGs, and a clean, light interface. Claude Code proposed the stack, wrote the three.js scene and the export pipeline, and tested the downloads in Chrome before we published.

One decision came from a legal check rather than design. The tool started out as "iPhone Duo Prototyper", but "iPhone" is Apple's trademark and can't be part of a product's name. So I renamed it Foldable Phone Prototyper and mention the iPhone Duo only in the description.

If you're designing for the iPhone Duo, give it a try, and if you like it, you can buy me a coffee.