Volume from a plane
Creative Developer · 2026 — present
I wanted to "bring to life" a static portrait without shooting video. The solution came together from three parts. First — background removal: a model separates the person from the backdrop. Second — depth: Depth Anything V2 builds a depth map from a single photo (where the nose, cheekbones, shoulders sit relative to the camera), which gives real volume rather than a flat relief. Third — the render: thousands of dots live on springs, reach toward a target shape, and flow between shapes (portrait → text → figure) as one and the same cloud. Everything is drawn by writing directly into a pixel buffer, so it holds 60fps even with thousands of dots. In the builder, depth is computed right in the browser (transformers.js) — you can upload your own photo, spin the volume, and save a rotation clip or the assets.
The idea
A static portrait on the site is boring, and video is heavy and doesn't fit the LED aesthetic. I wanted the face to "live" out of the same dots that draw the whole site, and to be volumetric rather than a flat effect.
I built a cloud engine: the dots reach toward a target shape on springs, so the transitions come out soft. The same set of particles can be a portrait, text, or any other figure — it flows between them.
The result isn't a single effect but a shape engine. It also stands in the home hero: hover — the face assembles, click — a phrase or a figure.
How it works
Background removal. A model separates the figure from the backdrop — the dots land only on the subject.
Depth. Depth Anything V2 builds a depth map from a single photo: brighter = closer. From it I take a Z for each dot — the nose and cheekbones really stick out, and on rotation you see the volume.
The cloud. Thousands of particles with spring physics reach toward a target; a change of shape is a change of target, and the dots fly over on their own.
Speed. I draw not with a canvas call per dot but by writing directly into a pixel buffer — one putImageData per frame, hence 60fps with thousands of dots.
The builder
Showing a finished portrait isn't enough — it's more interesting to let anyone drop in their own photo and see themselves in 3D dots.
In the builder, depth is computed right in the browser via transformers.js (the same Depth Anything, no server). Right away — a quick preview; on the "Process" button — real depth and background removal. Sliders control dot density, relief, and grain. You can save a rotation clip (webm) or the assets: the silhouette and the depth map.
Drop a photo (we'll compute depth) or a 3D model (.glb/.obj).
Photo: JPEG/PNG/WebP (an iPhone HEIC may not open). 3D: .glb, .gltf or .obj — points are taken straight from the model's surface, the volume is real.
Depth Anything computes depth right in the browser (the model loads once). Hover the canvas — the cloud plays out its volume.
Essentially a small editor: a photo in, a volumetric cloud out, with the option to take the result with you. Try it right here ↓
Why I do this
It matters to me to regularly build something by hand — it keeps a connection to the technical side of design. Here three things I love came together: applied AI, not AI in name only (depth from a single photo), attention to performance (thousands of dots without lag), and product thinking — making it pretty isn't enough, another person has to be able to pick it up and try it on themselves.