Make a depth map

1. Add a photo. Tap the first tile or drag a picture onto it. JPG, PNG and WebP all work. On iPhone, choose photos from your library so Safari can convert HEIC files.
2. Tap Generate. On phones it starts by itself as soon as you pick a photo. On your first visit the depth model downloads in the background while you pick a photo: about 30 to 55 MB depending on your device. The Generate tile shows how far along it is. After that it’s saved on your device and starts in seconds.
3. Download (Save on phones). You get a 16-bit greyscale PNG the same size as your photo. On phones the long side is capped at 2048 pixels so the browser doesn’t run out of memory.

Press and hold the depth map to compare it with your photo. Tap Depth direction to make far things white instead.

Color

Turn on Color, then tap the color wheel to choose three colors (on phones, tap Adjust, then the three dots on Color): one for the closest parts of the photo, one for the middle and one for the farthest. You can also start from a preset. Colored maps download as standard PNGs. For displacement and other technical work, use the grey version.

Depth curve

The curve reshapes how depth is spread between far and near. Left is far, right is near, and the shaded area behind it shows where your photo’s depth sits. Tap the graph to add a point, drag points to bend the curve, and drag a point off the graph to remove it. For exact values, type them into In and Out, or select a point and use the arrow keys.

• Contrast pushes things apart, so the subject separates from the background.
• Soft evens depth out, for gentler displacement and fog.
• Near detail and Far detail give more of the range to the close or far parts of the photo.
• Isolate sends the background to black and keeps the subject.

Moving the end points sets the black and white points. The curve is applied at full 16-bit precision, and it carries through to downloads and Animate. It works on depth itself, so it keeps its meaning when you flip the direction.

Animate

Choose 3 or 6 seconds and tap Animate. The depth map settles into a single tone, then your photo comes through it, closest parts first, until the whole photo is showing. If Color is on, the animation starts from your colored map.

The clip is recorded on your device. Keep the tab open while it records, then tap Save video.

In After Effects

1. Place the depth map on a layer above your photo.
2. Add Gradient Wipe to the depth map layer and set Gradient Layer to the depth map itself.
3. Turn on Invert Gradient so the closest areas clear first, then keyframe Transition Completion from 0% to 100%.
4. Raise Transition Softness for a softer, hazier reveal.

The model

COCOON uses Depth Anything V2 Small, an open-source depth estimation model from researchers at the University of Hong Kong and TikTok, published at NeurIPS 2024 and released under the Apache 2.0 license.

It runs in your browser with ONNX Runtime Web: on your graphics chip through WebGPU where the browser supports it, and on your processor otherwise. Graphics chips use a 16-bit copy of the model, and chips that can’t do 16-bit math unpack it to 32-bit when it starts. Processors use an 8-bit copy. All of them are converted from the original release and served from this website.

To keep edges clean, the map is enlarged to your photo’s size using the photo as a guide for where edges fall. The depth values themselves always come from the model.

Good to know

• Depth maps are estimates. They show relative depth, not measured distance, and can be wrong around glass, mirrors, reflections, sky, water, and very dark or blurry photos. Don’t rely on them for measurement or for anything where safety matters.
• Only use photos you have the right to use. You’re responsible for the images you edit and the results you share.
• COCOON is provided as is, without warranties of any kind.
• COCOON is an independent project. It’s inspired by Yeat’s cocoon visuals, but it isn’t affiliated with, sponsored by or endorsed by Yeat or anyone working with him.

Open the generator

Butterfly photo: “Papilio demoleus butterfly” by Robek, CC BY 2.5. Cut out and paired with its depth map.

Your photos

When you add a photo, your browser reads it from your device and passes it to the depth model, which also runs in your browser. The photo, the depth map and any animation stay in your browser’s memory until you save them or close the tab. COCOON has no server that receives them.

What your browser downloads

To run COCOON, your browser downloads this website’s files, the depth model and the engine that runs it. All of them come from this website’s host, GitHub Pages, which is operated by GitHub. Like any web host, GitHub receives standard technical information with each request, such as your IP address, your browser type and the time of the request, and handles it under the GitHub General Privacy Statement. We don’t have access to those records.

What’s saved on your device

• The depth model and the engine that runs it, so you don’t have to download them again. They’re kept in your browser’s storage for this site.
• Your color choices and depth curve.

Nothing else is saved. To remove the model, use Clear saved model at the bottom of any page. To remove everything, delete this site’s data in your browser’s settings.

No accounts, cookies, ads or analytics

COCOON doesn’t use accounts, cookies, advertising or analytics, and doesn’t track you across websites.

Saving and sharing

When you download or share a file, it goes where you choose, such as your downloads folder, Photos or another app through the share sheet. From there, that app’s own terms and privacy policy apply.

Changes

If anything here changes, this page will be updated and the date at the top will change.

Open the generator