Integration 2 min read

Add an Orbital 3D scene to a Framer page

Prepare an Orbital 3D embed for Framer with stable dimensions, clear input behavior, responsive composition and a publishing checklist.

The approach

Build the scene and the surrounding page as two parts of one composition. Framer owns the layout, headings and calls to action; the embedded viewer presents the 3D work. Decide the scene’s position and dimensions before polishing its final camera angle.

Use the export intended for the destination

Orbital’s publishing panel includes a Webflow / Framer embed option. Save the project, review the viewer settings and copy the generated snippet rather than inventing a URL. In the destination, use the embed/custom-code mechanism available to your plan and test its published behavior.

Test the boundary between page and scene

An embed has its own input and loading behavior. Check that a user can scroll the page when the pointer is over it, that touch rotation behaves intentionally and that the container has a useful mobile height. Parent-page scroll effects do not automatically drive animation inside an ordinary iframe.

Make it practical

A workflow to start with

  1. Save and preview the Orbital project with its final opening camera.

  2. Choose the Webflow / Framer export and copy the generated embed.

  3. Place it in a Framer container with explicit responsive dimensions.

  4. Publish a test page and check wheel, touch, keyboard navigation and loading.

An example design brief

Start with a specific request.

Prepare a scene for an embedded Framer hero. Keep the composition calm and leave room for the surrounding headline. Use a clear opening pose, restrained interaction and framing that remains readable in a narrow container.

Use this as a brief for scene work or AI assistance. Inspect the result in the editor; available AI tools depend on your account and plan.

Before you publish

  • The published scene loads for a signed-out visitor.
  • The wrapper reserves enough height at every breakpoint.
  • The embed does not prevent normal page scrolling.

Common questions

Will Framer’s scroll effects control an iframe scene?

Not automatically. The scene and the host page need a supported integration if they must share scroll state.

Should essential text live in the embed?

Keep the main heading, explanation and CTA in Framer’s page content so they remain useful while the scene loads.

Further reading

Platform references for the surrounding workflow. Check destination-platform settings when publishing.

Framer: scroll behavior and page structure