hub 3d-photo embed websites

Interactive 3D photos for websites: the complete guide (2026)

Turn one photo into a 3D scene visitors can drag, then embed it in Webflow, Framer, Squarespace or WordPress. What it is, why interactive beats a video, how it works, what to shoot, what it costs — with a live scene to try.

Aman Jha·September 18, 2026·14 min read

An interactive 3D photo is a single photo that a visitor can drag on your web page: the subject separates from its background and the view shifts with the pointer, so the picture reads as having depth. It is made from one ordinary photo, it embeds as one iframe, and — unlike the 3D photo videos most tools export — it stays live on the page.

This is the guide to the whole topic: what the term means, why the interactive version is worth choosing over a video on a website, how it works, which photos to shoot, how to put one on Webflow, Framer, Squarespace, WordPress or anything else, and what it costs. Each chapter hands off to a deeper guide. Try one first — drag the scene below.

What an interactive 3D photo is — and the three things people mean by “3D photo”

Search for “3D photo” and you will find three different products under one name. Knowing which one you want saves a lot of wrong turns.

A 360° spin. Dozens of photos of a product on a turntable, stitched so you can rotate it. Real all-round geometry, but it needs a rig and a photographer, and it is a product-photography tool, not something you make from one picture.
A 3D mesh. Tools like Meshy and Tripo generate a GLB or OBJ model from an image. You can rotate it fully or 3D-print it. The output is a model file that needs a heavyweight viewer; it is the right choice for objects, and the wrong one for a photograph.
A depth-parallax photo — this guide. Software estimates a depth map from one photo, cuts the subject out, and moves the layers by different amounts as the view shifts. Facebook's 3D Photos, Apple's spatial scenes and Gifsy all work this way. The difference is where it lives: inside an app, or on your own web page.

“Interactive” is the other half of the phrase. A depth-parallax photo can be rendered once into an MP4 — that is what most 3D photo makers hand you — or rendered live so the visitor controls it. The full pipeline is in how 3D photos work.

Why interactive beats a 3D video on a website

A video plays the same three seconds at everyone. An interactive scene responds to the person looking at it, weighs less than a video, never fights an autoplay policy, and can be re-published without touching the page. Video wins in exactly one place: anywhere an iframe can't run — email, social feeds, chat.

	3D photo video (MP4)	Interactive embed
Visitor control	None — it plays	Drag, tilt, spin
Page weight	A video file per placement, decoded continuously	Image + depth + mask once; GPU idles until the pointer moves
Editing later	Re-export, re-upload, replace	Re-publish; the iframe stays the same
Email and social feeds	Works	No — export a GIF or WebM for those

On a website, then, the interactive version is the better default and video is the fallback. The comparison also explains why every “alternatives” list in this category mixes video tools and interactive tools: Immersity AI alternatives, sorted by output.

How it works in 60 seconds

Four steps, two of them AI, none of them run by your visitors. A depth model estimates how far every pixel is from the camera. A segmentation model cuts the subject out as a matte. An inpainting model paints a clean backdrop where the subject used to be, so moving it reveals scenery instead of a smear. Then a small WebGL renderer draws two displaced planes — backdrop and subject — plus a contact shadow, and a camera that orbits within a shallow cone.

Depth map — Depth Anything V2 (small), run in the browser.
Subject matte — ISNet, run in the browser.
Backdrop — LaMa inpainting, run once at publish.
Two planes in WebGL — Three.js, 60 fps, no AI for the viewer.

The AI runs once, when the scene is made; a published scene ships only the finished files. That is what lets it load on a phone in a couple of seconds and sit above the fold. The numbers, the models and the honest limits are in how 3D photos work.

Which photos work (and which don't)

The effect depends on separation: a subject the matte can isolate, and something behind it for the parallax to reveal. The best photo is not the best photograph; it is the one with the clearest layers.

One clear subject, fully inside the frame, with a hard edge.
Real depth behind it — a room, a street, a landscape, not a wall.
640 px or more on the long edge; small sources come out soft.
Avoid frame-filling subjects (nothing to parallax against), busy or low-contrast backgrounds (the matte fails), flat illustrations and logos (no depth cues), and glass, fur or fly-away hair at the silhouette.
Expect a shallow orbit of about ±20° — one photo only holds one side of anything.

When the matte can't separate a subject, Gifsy says so and falls back to a depth-only view; it is better to pick another photo than to publish the sheet. The full checklist, with the reason behind each rule and the six photos that fail, is in best photos for a 3D effect.

Adding one to your site, platform by platform

Every published Gifsy scene is one <iframe>. Any site builder with an HTML or code element can take it; the differences are the element's name, its plan gate, and how you size it. The one-line gist for each, with the full walkthrough linked:

Webflow — the element is Code Embed, and it is locked on a free Starter site (tested); on the free plan show the scene as a WebM in a Background Video instead. Add a 3D photo to Webflow.
Framer — Insert → Embed → HTML mode → paste; size it like a layer. 3D photo in Framer.
Squarespace — a Code block, not the Embed block (which expects an oEmbed URL); “Display source” off. Squarespace 3D photo guide.
WordPress — a Custom HTML block in the block editor, no plugin; paste as an admin or the iframe is stripped. WordPress without a plugin.
Wix, Carrd, Notion, Shopify, Ghost, plain HTML — the universal snippet, every attribute explained, per-platform menu paths and a troubleshooting table: embed a 3D photo on any website.

Use cases: where a moving photo earns its place

A page needs one strong moment, not twelve. The people who get the most from an interactive 3D photo are the ones whose pages live or die on a single image.

Hero sections for no-code builders

Agencies and freelancers building client sites in Webflow or Framer want a scroll-stopping hero without hiring a WebGL developer. A founder portrait, a product on a surface, a mood shot behind the headline: one embed element, sized with an aspect ratio, copy kept clear of the subject, lazy-loading turned off because it is above the fold. Commercial use on client sites is allowed on a free account. Six hero patterns and the load budget are in the 3D hero image guide.

Portfolios for photographers, illustrators and 3D artists

One self-portrait or one key project shot that responds to the visitor — and stays interactive on a phone, where a finger drag does what the mouse does. The rest of the portfolio stays still; that is what makes the one that moves land. Which pieces, which placement and which builders take the embed: 3D photos in a portfolio site.

Product pages

One product shot, cut out, that shoppers can turn a little on the product page, made from the photo you already have instead of a turntable shoot or a 3D model. White-background shots, where it goes on a store and what it costs: interactive product photos without a 3D model. On Shopify it goes in a theme section: add a 3D product photo to Shopify. Product photography that needs a true 360° or AR is the wrong fit: that is the mesh category, not this one.

Performance and privacy

Two questions come up on every embed: will it slow the page, and where does the photo go.

Performance. The iframe requests a small poster (server-rendered, so something paints immediately), a 1 KB manifest, the colour image as WebP, a lossless depth map that compresses to tens of KB, the mask and backdrop when there is a subject, and the viewer script. All of it is edge-cached and immutable. Use loading="lazy" below the fold, drop it for a hero, and keep one scene per screenful. Details and the troubleshooting table are in the embed guide.

Privacy. Your photo stays in your browser while the scene is made, and the whole depth model runs on your device. Publishing uploads the finished scene (image, depth map, mask, backdrop) and it becomes public at its share link. Visitors download those files and nothing else; no AI runs on their side. The full account is the privacy policy.

What it costs: free vs credits vs subscription

The category prices three ways. Most video exporters sell monthly credits ($5–$100 a month, watermark on the free tier). Some are free and open source but need a GPU and a terminal. Gifsy's 3D photos are free: unlimited generations and publishing with a free account, commercial use included, and a small badge on embeds that any credit pack removes. No credits needed and no renewal: the depth model runs in your browser, not on a GPU billed per scene.

See pricing, or see how fourteen tools line up on output, price, watermark and where your photo goes in the 3D photo maker comparison.

FAQ

Does an interactive 3D photo work on mobile?

Yes. Inside the iframe a visitor drags with a finger to orbit and swipes vertically to keep scrolling the page. The viewer needs WebGL, which every modern phone browser has, and it downloads only images and a small renderer — no AI model.

Does the iframe slow my site down?

The frame loads one WebP image, a small PNG depth map, an optional mask and backdrop, a 1 KB manifest and the viewer script, from an edge cache with a year-long immutable header. With loading="lazy" nothing is fetched until the frame is near the viewport. There is no video decoding and no AI runs for the visitor.

Do I need portrait mode or a special depth photo?

No. Depth is estimated from an ordinary JPG, PNG or WebP when you create the scene. Facebook's 2018 3D photos needed a dual-camera depth map; today's depth models don't.

Can I use it commercially, on a client site?

Yes. Commercial use, client sites included, is allowed on a free Gifsy account. Scenes carry a small "Made with Gifsy" badge.

Does it work on Wix, Carrd or Notion?

Anywhere that accepts an iframe or an HTML embed. Wix has an Embed HTML element, Carrd an Embed element (paid tier), and Notion takes the embed URL rather than the HTML. The embed guide has the exact menu path for each.

What if my photo has a busy background?

The subject matte may not separate cleanly, and the scene falls back to a depth-only view that reads as a gently warping sheet rather than a subject in front of a background. Pick a photo with one clear subject and some real depth behind it; the best-photos chapter below lists what fails.

Can I remove the "Made with Gifsy" badge?

Yes. Buy any 3D model credit pack (from $9) and the badge comes off all your embeds, including ones already published. On a free account every scene keeps a small badge inside the frame. 3D photos themselves stay free and unlimited.

Is an interactive 3D photo a video?

No. It is a live WebGL scene — two displaced planes drawn from an image, a depth map and a subject cut-out — that responds to the pointer. That is exactly why it can't go in an email or an Instagram post; for those you export a GIF or WebM of the same scene.

Is it a 3D model I can rotate 360°?

No. One photo only contains one side of anything, so the scene is a 2.5D height-field with a shallow orbit of about ±20°. If you need a mesh you can spin all the way round, that is a different product (Meshy, Tripo).

Resources and next steps

Understand it

Use it well

Put it on a site

Make one

Make a 3D photo from your own image — the AI runs in your browser; three free.
See what the effect looks like on different kinds of photos