An interactive 3D hero section for your website: patterns that work, and a performance budget

The hero is the one place on a site where motion is expected and a single image has to carry a message. Most teams reach for a looping video or a big static photo. An interactive 3D hero section is the third option: one still photo, turned into a scene the visitor can drag, weighing less than the video and doing something the JPG can't. No Spline scene, no WebGL developer, no code beyond one iframe. This page is about how to use one well: the patterns, the copy, the load budget, and the steps per platform.

Why an interactive 3D hero section works

Webflow's and Framer's own showcases have made the point for years: a hero with one strong layered moment holds attention; a hero with six animated things is noise. A 3D photo is a single moment by nature. It moves, but it is still one picture with one subject, so it reads at a glance and rewards a second look. The rest of the section can be as quiet as you like.

The other thing a 3D photo does that a video doesn't is answer the pointer. That handoff — it moves on its own, then it moves because you moved — is the whole reason to use one. Design the section so the visitor's hand naturally lands on it.

Six hero patterns

1. Split hero. Headline and button in the left column, the scene in the right. The safest layout: nothing overlaps the frame, and on a phone the two stack. This is what the Webflow demo in the Webflow guide uses.
2. Subject beside the wordmark. A subject-only scene (background removed, rendered on transparency) sitting on the page's own background next to a large word. The character or product looks like it belongs to the type. The Framer demo in the Framer guide does this with a pink character over a scrolling ticker.
3. Full-bleed scene, copy in a corner. The scene fills the hero (16:9 on desktop, 4:5 on a phone), the headline sits bottom-left over a quiet area. Works with a photo whose subject is right-of-centre so the copy has room.
4. Founder portrait. A waist-up portrait of the person behind the product, two metres from a real room. Studios and solo consultants: this is the one that makes the page feel like a person. Photo advice in best photos for a 3D effect.
5. Product on a surface. The product three-quarters on, on a table or plinth with something receding behind. The orbit reveals the side the camera didn't face. For a launch page this is the closest thing to picking the object up.
6. Agency case-study hero. The client's key visual as a scene, with the study's title over it. Repeat per case study with a CMS field holding the scene id, one template for all of them.

Copy over the scene without blocking the drag

Anything layered on top of the iframe takes the pointer. A full-width text container over the whole frame means nobody can drag the scene, even if the text itself is short. Three ways round it:

• Keep the text in its own column (pattern 1, 2). Nothing to solve.
• Size the text block to its content and place it over a quiet part of the frame. In Framer a text layer only intercepts where it has content; in Webflow, set the text block's width to auto rather than 100%.
• Put buttons below or beside the frame, never over it — a button over the scene both blocks the drag and competes with it.

Leave the subject clear. If the headline has to cross the subject, the photo is the wrong one for this layout, not the other way round.

The performance budget

An above-the-fold iframe is a different thing from one halfway down the page, so change two things in the copied snippet:

<!-- above the fold: no loading="lazy", and preconnect in <head> -->
<link rel="preconnect" href="https://www.gifsy.fun">

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe
    src="https://www.gifsy.fun/embed/<id>"
    title="Interactive 3D photo: …"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
  ></iframe>
</div>

• No loading="lazy". It is above the fold; lazy-loading delays it until layout settles and the scene pops in late.
• Preconnect. One line in the head opens the connection to the embed host while the HTML is still parsing.
• Reserve the box. The aspect-ratio wrapper means the hero doesn't reflow when the frame arrives — that is what keeps your layout-shift score clean.
• What it loads. The frame fetches the scene's colour image (WebP), a small greyscale depth map, a mask, a pre-painted backdrop and the viewer script, all from an edge cache. No AI runs on the visitor's device; the scene draws with WebGL at 60 fps. It is its own document, so your page's scripts, fonts and main thread are untouched.
• One hero scene. Two or three scenes above the fold each start a WebGL context; keep the rest of the page's scenes lazy, which the default snippet already does.

On a phone

A 16:9 hero is a sliver on a phone; switch the wrapper to 4:5 or 1:1 at the phone breakpoint. In the scene, a sideways drag orbits and a vertical swipe scrolls the page, so it doesn't trap the visitor. Autoplay policies don't apply — it isn't a video — which is one reason a 3D photo is easier than a hero video on iOS. Visitors with reduced-motion on see a still scene that only moves when they drag it.

Platform steps

• Webflow: Code Embed element (paid site or Workspace plan) with the snippet above; on a free site, a Background Video of the scene's WebM instead. Full steps and the plan facts in the Webflow guide.
• Framer: Embed component, Type HTML — works on the free plan. Pin it to the hero's edges behind the text stack; re-set the pins per breakpoint. Framer guide.
• Squarespace: Code block (not Embed block) in the top section. Squarespace guide.
• WordPress: Custom HTML block first in the content, full alignment, or in a header template part. WordPress guide.
• Anything else: the universal embed guide.

FAQ

Make the hero scene. Related: the complete guide, 3D photos in a portfolio, and the tool comparison.