Depth, from any photo.
COCOON reads an ordinary picture and works out how far away everything in it is. Close things turn white. Far things turn black. That image is a depth map, and it’s the raw material for the cocoon look.
Three steps.
No sign-up, no settings to learn. Everything happens in your browser.
Add a photo.
People, products, streets, rooms. Anything with some sense of space works.
Generate.
The depth map appears next to your photo. Press and hold it to compare the two.
Download.
A 16-bit PNG at the size of your photo, ready for displacement, lens blur or compositing.
Then make it move.
Pick 3 or 6 seconds and tap Animate. COCOON records a clip of the depth map dissolving into your photo, nearest things first, with a slow three-dimensional drift. Turn on Color first and tap the wheel to paint the map with your own closest, middle and farthest colors.
The model.
We tested the newest open depth models and chose the best one that can run privately on a phone.
- Model
- Depth Anything V2 Small, from researchers at HKU and TikTok, published at NeurIPS 2024.
- Licence
- Apache-2.0. Commercial use is allowed.
- Download
- About 27 to 100 MB depending on your device, once. After that it loads from your device in seconds.
- Runs on
- Your graphics chip where the browser supports it, otherwise your processor.
- Output
- 16-bit greyscale PNG, same size as your photo. Phones cap it at 2048 pixels so nothing runs out of memory.
Why not a bigger model?
Research models such as Depth Pro and Depth Anything 3 Large are sharper, but they’re hundreds of megabytes to gigabytes and need a server graphics card, so your photos would have to be uploaded. The larger Depth Anything V2 models are only slightly more accurate and are licensed for non-commercial use only.
How the edges stay clean.
Where your device is fast enough, the model reads your photo twice, once mirrored, and averages the two. Then the map is enlarged to full size using your photo only to decide where edges fall. Every depth value comes from the model, so photo texture and brightness can’t leak into the map.
Animation.
The Animate button recreates a classic After Effects move for you: a Gradient Wipe driven by the depth map.
In COCOON.
Generate a depth map, choose 3 s or 6 s, and tap Animate. Keep the tab open while it records. When it’s done, tap Save video. On iPhone it opens the share sheet so you can save straight to Photos.
In After Effects.
- Put your photo on top and the depth map underneath, then hide the depth map.
- Add Gradient Wipe to the photo, set Gradient Layer to the depth map, and keyframe Transition Completion from 100% to 0%.
- For color, add Colorama to a copy of the depth map and animate Phase Shift.
- Use the map in Displacement Map or Camera Lens Blur for depth effects.
Who it’s for.
Anyone who needs depth without a 3D scan.
Designers
Cover art, posters and the cocoon look.
Motion designers
Depth transitions without rotoscoping.
3D artists
Displacement maps in Blender, Cinema 4D and TouchDesigner.
Photographers
Depth for lens blur and relighting.
Where it came from.
COCOON started as a way to get the pressed-through-a-membrane look from Yeat’s cocoon visuals. Put the depth map on a flat grey surface as displacement, and the photo pushes through it.