Interactive 3D photos in a portfolio site: photographers, illustrators, 3D artists

A portfolio has one job: make someone stop scrolling and look at a piece for longer than a second. A photo the visitor can turn does that, when the piece has depth to show. This is a guide to using interactive 3D photos in a portfolio without turning it into a gallery of effects — which pieces, which placement, what to do about the badge on client work, and which builders will take the embed.

When a moving photo helps a portfolio, and when it hurts

The rule from the hero guide applies twice as hard here: one moving thing per view. A grid where every thumbnail orbits is a screensaver. The pieces that earn it are the ones where depth is part of the work — a portrait with a real room behind it, a product shot with a surface, a render with volume, a layered illustration. Flat work (typography, flat-lay, graphic design comps) should stay still; it has nothing to reveal.

The other question is whether the depth estimate is right for the piece. A 3D photo is an interpretation: the model guesses distance from the picture. For most photos the guess is good; for some it isn't, and on a portfolio an off guess reads as your error. Make the scene, drag it to the extremes, and only publish the ones you would sign. What helps a photo work is in best photos for a 3D effect.

Photographers

• Portraits and editorial. The strongest case. A subject two metres from an environment, waist-up or three-quarter, is exactly what the depth model reads well, and the orbit gives a sitter presence a still can't. Studio portraits on seamless work in subject-only mode, rendered on the site's own background.
• Product and still life. Three-quarter angles on a surface. The orbit shows the side face; clients get a sense of the object. Avoid glass and chrome (the matte can't separate reflections).
• Travel and documentary. Scenes with a clear foreground, mid and far — a person on a street, a boat on a lake with a shore — are the most dramatic 3D photos there are. Wide empty landscapes have no parallax to show.
• Weddings and events. The couple against a venue works; a crowd doesn't. One or two per gallery, on the portraits.

One craft note: the depth estimate works from the photo, not from your camera's data, so RAW-to-JPEG choices matter only as they affect contrast at the subject's edge. Export at 1,500–3,000 px on the long edge; more adds nothing.

Illustrators

Depth needs cues, and a drawing gives them or doesn't. Work with shading, overlapping forms, atmospheric perspective and a lit subject turns into a scene with real layers — painterly digital work, concept art, book covers with a character in a setting. Flat, outlined, single-tone work comes out as a tilting sheet, because there is no depth in it to find. That is not a flaw in the piece; it is the wrong tool for it.

Two useful tricks. First, subject-only mode on a character drawn on a plain background: the character becomes an object that turns on the page, with no background to guess at. Second, if you paint in layers, the composite of all layers is the input — you don't supply the layers, and you don't need to. Tools that animate illustration by asking for pre-cut layers (the Photoshop-plus-plugin route) are a different workflow; here the separation is estimated from the flat image.

3D and motion artists

Renders are the best input the models see: clean edges, controlled light, unambiguous volume. A still render becomes an interactive scene without shipping a WebGL build, a GLB, or a viewer — one iframe. For a reel of stills, that is the difference between a page of JPEGs and a page a studio lead will play with.

• Character renders on a plain backdrop → subject-only scenes on the site's background. The demo sites in the Framer and Webflow guides are built entirely this way.
• Environment renders → full scenes; the estimated depth will roughly agree with your real Z-buffer for most shots, and be wrong for reflective surfaces and volumetrics.
• Motion designers: a frame from the piece, made orbitable, is a lighter teaser than an autoplaying MP4 and doesn't give the ending away.

Gallery or hero?

On a case-study page the natural spot is the opener: the key visual as a scene, then the stills below. In a masonry or grid gallery, keep the scene the same size as its neighbours; a bigger tile that also moves is two emphases at once.

The badge, and client work

Scenes on a free account carry a small “Made with Gifsy” mark inside the frame. Buying any 3D model credit pack (from $9) removes it from all your embeds, including ones already published. Commercial use is allowed on a free account, so client work is covered; if you stay on free, whether the mark is acceptable on a client's site is a call to make with the client before you ship. The whole depth pass runs on your own machine, which matters for work you are under NDA on: the photo never leaves the browser until you choose to publish the finished scene.

Portfolio builders that take an iframe

• Framer — Embed component, HTML type; publishes on the free plan. Verified. Guide.
• Webflow — Code Embed element on a paid site or Workspace plan; free sites can use the scene's WebM in a Background Video. Verified. Guide.
• Squarespace — Code block on a paid plan. Guide.
• WordPress — Custom HTML block, as an editor or admin. Guide.
• Cargo, Adobe Portfolio, Format, Pixieset and similar — most have an HTML or embed block, some on paid tiers only; not tested here, so check the builder's help before you plan around it. If there is no HTML block, use the WebM export in the video slot.
• Behance and Dribbble — no iframes. Upload the GIF or video export; link to the interactive share page in the description.

The snippet and the sizing wrapper for any of these are in the embed guide.

FAQ

Make a scene from one of your pieces. Related: best photos for a 3D effect, a 3D hero image, and how 3D photos work.