How to Embed an Interactive Spline Scene on a Landing Page
To embed an interactive Spline scene, publish it, copy the embed URL from Export, and paste the iframe or the web component into your page. Then wire scroll and hover events inside Spline’s States panel so the 3D reacts as visitors move down the page.
When Is a 3D Hero Section Worth It?
A 3D hero earns its kilobytes when the product is visual and 3D motion explains it faster than copy. A sneaker, a gadget, a 3D icon set — those work. It is a poor fit for a B2B SaaS page where visitors want text and a pricing table. Every second of load cost has to buy clarity.
Set a budget: aim for under 2 MB total scene weight and lazy-load it below the fold if it is not the hero.
How Do You Prepare the Scene for Embedding?
- Set the canvas aspect ratio to match your hero slot (16:9 or 1:1 works best).
- Remove helper objects, extra cameras and unused materials — dead weight ships too.
- Bake simple animations before export where possible to cut runtime cost.
- Publish the file and set visibility appropriate to your plan.
How Do You Add Scroll and Hover Interactions?
In the States panel, create a state per keyframe moment — for example “Intro,” “Rotate,” “Focus Detail.” Then attach a Scroll event that transitions between states based on page scroll position. Hover events work the same way but trigger on pointer enter.
Keep transitions in the 0.3-0.8 second range. Long transitions stack badly when a user scrolls fast, and the scene appears to lag behind the page.
How Do You Keep It Fast?
| Levers | Impact |
|---|---|
| Texture resolution (1K vs 4K) | High — often cuts weight 60%+ |
| Polygon count | High on mobile |
| Lazy loading below fold | Medium |
| Runtime library version | Medium — pin a stable one |
If you use the React runtime, load the scene after first paint so your hero text is not blocked. A poster-image fallback for slow connections is also worth the ten minutes it takes.
What Are Common Embed Mistakes?
Embedding a scene built for desktop on a mobile page is the classic one — it either overflows or renders unusably small. Test at 375px wide before you ship. Second, forgetting autoplay/permission policies mean some animations never start. Third, not setting a fallback background, so users on slow networks see a blank box.
Also check your plan: the free tier watermarks public scenes, and that mark will land in your hero. For a client-facing page, budget for Solo at roughly $9/month.
Quick Summary
- Embed via iframe or the runtime package; both pull the same published scene.
- Build one state per scroll moment; keep transitions at 0.3-0.8s.
- Aim for <2 MB scene weight; 1K textures and cleanup get you most of it.
- Always test at 375px wide and add a poster fallback.
- Free tier watermark applies to public scenes — plan for Solo if it is client work.
