How to use Open in Fold

Turn a website or screenshot into a short video of a phone unfolding. You can adjust the device, background, motion, and video size before downloading it.

Make your first video

Choose Website, paste a public URL, and select Preview. Or choose Image and pick a screenshot from your device.
Choose a background and finish in Appearance. Use the play button or timeline to check the fold.
Pick 16:9, 1:1, or 9:16 at the bottom right of the player. Set the duration and motion you want.
Choose a resolution, frame rate, and format, then select Export video. Keep the tab open while it renders.

You can try the editor with the sample image before capturing anything. Editing the preview and exporting a video do not use the website capture allowance.

Websites and images

Website capture opens the address in Cloudflare's remote browser. It takes a picture of the top of the page at 1920 × 1358 CSS pixels, at 1× pixel density, producing a 1920 × 1358 PNG. Both phone displays use the same picture. The smaller outer display shows its right half.

A capture is a still image. It does not record scrolling, video playback, or changes to the website after the capture. Sites that require a login, show a CAPTCHA, or block automated browsers may show a challenge instead of their content. Open in Fold cannot sign in with your browser's cookies.

Use a public HTTP or HTTPS address on its default port. You can leave off https://. Localhost, private IP addresses, and URLs containing usernames or passwords are not accepted.

Image uploads accept PNG, JPEG, and WebP files up to 20 MB. Choose Image, select Choose image, then press Preview to load the file. You can also drop an image anywhere in the editor to preview it immediately. Your image stays in your browser. For the closest fit, use a screenshot with a width-to-height ratio near 1.414. Other shapes may crop to fill the display.

While a website loads, the Preview button and player show a loading state. A slower request gets an update rather than an unexplained spinner. If capture fails, your existing preview remains available and an upload button gives you another way to continue.

Choose a layout for the fold

For the best result, recreate or re-render your page as a two-section composition for the fold. Most portfolios are designed for different screen layouts, so their usual desktop or mobile version may look awkward here.

Not every website will look good in this effect. Open in Fold uses one fixed screenshot. The closed phone shows its right half, then opening the phone reveals the left half alongside it. The website does not rearrange itself during the animation.

A layout with two distinct, balanced sections often works best. Give the right half something that makes sense on its own, such as a product image, a short headline, or a compact profile. Use the left half for supporting content that adds something when the phone opens. Center each section's content within its own half, with some space around the middle fold.

For example, put a product image and name on the right and a short description on the left. The closed phone introduces the product; the open phone reveals the rest. You do not need equal amounts of content on both sides, but avoid an empty right half or important text that crosses the center line.

A site can work well on both mobile and desktop and still look awkward here. Capture uses a 1920-pixel-wide viewport, not a separate mobile screenshot for the cover. A single centered headline may get cut in half when the phone is closed. A page whose useful content sits mostly on the left may hide that content until the phone opens.

Check the start and end of the animation with the timeline. If the closed view feels cropped or confusing, upload a purpose-made two-column image instead. Aim for a 1.414 width-to-height ratio, keep the main subject on the right, and leave room for the reveal on the left. This is a composition choice for the illusion, not a requirement to redesign your site's responsive layouts.

Get a sharper video

Website captures are 1920 × 1358 PNG images. The renderer keeps the full-resolution capture for the sharp screen texture. It also makes blurred copies for the glass and lighting effects. Raising the export resolution does not take a new screenshot. The capture uses a 1920-pixel-wide desktop layout, with a height chosen to match the open phone's proportions. It cannot restore detail missing from a website's own images.

A 1080p setting applies to the whole video frame, including the background. The phone screen fills only part of that frame, so small website text ends up much smaller than it was in the original screenshot. More source pixels alone will not make tiny text readable. Video compression and resizing by a player or social platform can soften it further.

Use larger text and a simpler composition. A few clear elements survive reduction better than a dense page of small labels.
Increase Zoom under Advanced settings to make the whole phone larger in the video. Check that it stays inside the frame throughout the fold. Screen zoom enlarges only the image inside the phone and crops more of its edges.
Try 1440p or 4K when you need more output detail. Use the original uploaded image rather than a small thumbnail or an image that has already been compressed several times.
Inspect the fully open frame at the video's native size. Glass frost deliberately softens the moving display during opening. Lower Glass frost and turn off Weight & drag to compare a cleaner transition. Some edge and angle softening remains part of the rendering.

For a useful comparison, look at the original screenshot, the fully open preview, and the downloaded video. If the source looks sharp but the video does not, the loss happens later in the rendering, scaling, or encoding process. A larger screenshot is not always the fix.

Arrange the workspace

The editor has four panels: Preview, Appearance, Motion, and Export. Drag a panel's handle beside its heading to move it. Drag its bottom-right handle to resize it. The outlined destination shows where it will land. Panels snap to the grid, and panels already in that space move down.

Desktop uses 16 columns. Smaller screens use four columns and keep a separate arrangement. Panels grow to fit their controls, and the page can scroll vertically. Changing the video aspect ratio does not resize or move the panels.

Select Reset layout to restore the panel positions and sizes. The Reset button in Appearance also restores the visual and motion settings. Neither reset replaces your loaded image. Layout changes last for the current page session; reloading starts with the defaults.

You can also focus a move or resize handle with Tab and use the arrow keys to change it by one grid cell. Press Escape during a drag to cancel it. The drag handles move panels; use the Image file picker to load a screenshot.

Appearance and framing

Finish: Choose Star White or Night Sky for the phone body.
Background: Choose any solid studio color or wallpaper from the one Background set. The selected background's name appears beside the heading. Advanced settings also has a custom color picker.
Shadow: Show or hide the ground shadow. It starts on. Turning it off keeps the opacity you chose in Advanced settings.
Background glow: Show or hide the blurred color behind the phone. The color comes from your screen image. This starts on and is separate from the glass frost on the display.
Framing: Choose 16:9 for a wide video, 1:1 for a square, or 9:16 for a vertical video. The video fits inside the existing Preview panel. Advanced settings accepts a custom width-to-height ratio from 0.5 to 2.4.

The preview loops while this page is visible. Play pauses and resumes it; Replay starts it again. Background tabs pause playback. Reduced motion disables automatic playback. Exports contain one cycle. Drag the timeline to inspect a particular point. The fullscreen button expands the player when your browser supports it.

Motion controls

Duration: Set the animation length from 2 to 12 seconds. The default is 6 seconds.
Speed: Set playback speed from 0.25× to 2×. Export uses this speed too. A 6-second animation at 2× produces a 3-second video; at 0.5× it produces a 12-second video.
Camera motion: Add a small orbit and tilt while the phone opens. Turn it off to keep the camera still.
Screen zoom: Zoom the image inside the phone in and out during the fold. It starts at 0%, with no zoom. Move the slider up to 50% to add zoom. At 5%, the image goes from 100% to 105% and back to 100%. It does not enlarge the phone or move the camera.
Weight & drag: Add hinge recoil and a slight drag to the image during opening. It starts off. The two strengths have separate sliders in Advanced settings.

Advanced settings

Open Advanced settings in Appearance. Changes update the preview immediately. Select Done or press Escape to close it. These values are visual controls, not physical measurements of a real phone.

Camera

Horizontal orbit, Vertical orbit, Camera roll: Set the strength of each camera movement from 0 to 3. These movements need Camera motion to be on.
Zoom: Scale the whole phone from 0.65 to 1.3. This is independent of Screen zoom.
Horizontal position: Move the phone left or right, from -1 to 1.
Vertical position: Move the phone down or up, from -0.7 to 0.7.

Fold

Hinge recoil: Set the strength of the weighted opening movement from 0 to 2. Turn on Weight & drag to use it.
Screen drag: Set how much the screen image lags during opening, from 0 to 2. It also needs Weight & drag.
Opening delay: Choose when the fold starts, from 0 to 0.2 of the animation. A value of 0.1 starts it one tenth of the way through.
Opening span: Choose how much of the animation the opening takes, from 0.3 to 0.8. Screen zoom follows this same opening interval.
Glass frost: Set the angle-dependent frost on the moving display, from 0 to 2. The frost clears as the phone opens flat.

Device

Thickness: Change body thickness from 0.6 to 1.8.
Bezel width: Change the border around the screen from 0.03 to 0.14.
Corner radius: Change the outer corner rounding from 0.09 to 0.2.
Spine radius: Change the rounding along the hinge from 0.005 to 0.04.
Camera cutout: Change the camera opening from 0 to 1.5. Zero hides it.
Button size: Change the side buttons from 0 to 1.5. Zero hides them.

Lighting

Reflections: Set the metal's reflection strength from 0 to 2.
Metal roughness: Choose sharper or softer reflections, from 0.05 to 0.9. Higher values look less polished.
Exposure: Adjust scene brightness from 0.6 to 1.8.
Screen glow: Adjust the blurred background glow from 0 to 1.5. Background glow must be on to see it.
Shadow opacity: Adjust the ground shadow strength from 0 to 1.5. Shadow must be on to see it.

Export and share

Choose 480p, 720p, 1080p, 1440p, or 4K. The number sets the shorter edge of the video. The longer edge follows your aspect ratio and rounds to an even pixel count. The default is 1080p at 60 fps. Other frame rates are 24, 25, and 30 fps.

Export to MP4 or WebM. Encoding happens in your browser and needs HTTPS, WebGL, and WebCodecs support. If MP4 fails, try WebM or a lower resolution. Rendering can take longer than the finished video's duration, especially at 4K. The percentage on the Export button shows progress.

Downloads use the captured website's hostname or uploaded image's filename, followed by a UTC timestamp. For example, example.com-2026-09-11T12-30-00-000Z.webm. The sample preview uses screenshot as its name.

After the download starts, a small dialog offers Share on Twitter and Copy app link. Twitter opens a draft that you can edit. Attach the downloaded video yourself before posting. Copy app link shares Open in Fold, not your image, video, settings, or website address. Select Done or press Escape to return to editing.

The browser controls where downloads go and may ask you to allow them. Open in Fold cannot confirm that you saved the file to disk.

Limits and troubleshooting

The browser waits one minute between new capture requests, including failed attempts. It reuses up to three recent screenshots for five minutes in your browsing session. Revisiting the same URL during that time makes no capture request, even during a cooldown. If browser storage is unavailable, this cache lasts until you reload.

Cloudflare's built-in screenshot cache also uses a five-minute lifetime. It can reuse output across users of this service without a separate storage service. Cache hits depend on Cloudflare's cache; reuse across countries is not guaranteed. A cached screenshot may not show changes made to the website in the last five minutes.

Cloudflare's free Browser Run plan includes 10 minutes of browser time per day, shared across this service's account. That is capture time, not the length of videos you export. The allowance resets at midnight UTC. Cloudflare also limits free screenshot requests to one every 10 seconds across the account.

Open in Fold allows roughly one capture attempt per minute per IP address. People sharing a Wi-Fi network may share that limit. Cloudflare's counters update across nearby servers, so a short burst can sometimes pass before the limit takes effect.

You've reached the IP limit: Wait for the retry timer, or select Upload a screenshot instead. Uploads and exports do not use the capture quota.
Today's free capture time is used up: Upload a screenshot to keep working. When Cloudflare identifies a daily quota error, the message explains the midnight UTC reset. The app cannot display an exact remaining-minute balance.
The screenshot service is busy: Other users may be capturing pages. Wait before trying again. A generic capacity error may also mean the shared allowance is unavailable.
A website takes too long or won't load: Check the address. The service waits up to 15 seconds for the page and up to 5 seconds for the screenshot action. The app stops waiting after 35 seconds if the network stalls. Use an uploaded image for pages that block remote browsers.
Your image won't open: Use a valid PNG, JPEG, or WebP under 20 MB. Try opening it on your device first, then export a fresh copy if necessary.
The 3D preview won't start: Enable hardware acceleration and WebGL, then reload. Try a current desktop browser if your device cannot run the preview.
Export fails or runs slowly: Try 720p or 480p, reduce the frame rate, or choose WebM. Keep the tab open until the download starts.

See Cloudflare's current Browser Run limits and pricing. An error does not remove the image already in your preview.

Keyboard and accessibility

Use Tab and Shift+Tab to move through buttons, switches, inputs, and panel handles. Use Enter or Space on buttons. Arrow keys adjust focused sliders and the timeline. Focused panel handles also accept arrow keys. Escape cancels a drag or closes a dialog.

Controls have accessible names. Switches announce whether they are on, background swatches announce selection, and status messages report loading and errors. Panel moves announce their grid position and size. Dialogs keep focus inside until you close them, then return focus to the editor.

The interface respects your device's reduced-motion setting. UI transitions stop, camera motion starts off, and enabling reduced motion turns Screen zoom off. You can still start playback or export deliberately. The 3D canvas has a text label, but a screen reader cannot describe the rendered image in detail.

Credits and privacy

Action icons come from Lucide, used under its ISC license.

Made by Anas Khan, @anxkhn.

The wallpaper collection comes from Screenshot Studio by opennookorg, used under the Apache License 2.0.

The phone model and motion are original reconstructions inspired by Apple's iPhone Duo imagery. This is not an Apple product or Apple's production model. The editor uses Three.js for 3D rendering and Mediabunny for browser video encoding. Cloudflare hosts the app and captures websites.

Hosted website capture is currently disabled in the hardened deployment. Upload a PNG, JPEG, or WebP screenshot instead, up to 20 MB and 16 million pixels. If the owner re-enables capture, it sends the submitted URL to Cloudflare. The service does not forward your browser cookies or login credentials. Do not submit URLs containing private query tokens. Cloudflare may briefly cache screenshot output as described in its data handling FAQ. Uploaded images and exported videos stay in your browser; this app does not save them to a gallery or create public video links.

The editor uses Microsoft Clarity for usage analytics and session recordings. Clarity's default masking applies to sensitive content. See Microsoft's privacy statement. Sharing is optional and opens Twitter only when you select it.

Back to the editor