Integrate Interactive 3D Spline Scenes into Web Projects

Spline 3D Integration Skill is a master guide for embedding interactive 3D scenes built in Spline.design into web projects - vanilla HTML/JS, React, Next.js, Vue, or iframe contexts. Spline itself is a browser-based 3D design tool, comparable to Figma but for 3D: designers build interactive scenes with objects, materials, animations, physics, and events in the Spline editor, then export them for the web as a hosted .splinecode file URL.

Use this when embedding an interactive Spline scene into a web project, choosing the correct integration path for vanilla web, React, Next.js, Vue, or iframe contexts, or needing guidance on scene URLs, runtime control, performance, or common Spline embedding problems.

A three-step process: identify the stack, since vanilla HTML/JS uses the <spline-viewer> web component or @splinetool/runtime, React/Vite uses @splinetool/react-spline, Next.js uses @splinetool/react-spline/next, Vue uses @splinetool/vue-spline, and embeds in Webflow, Notion, and similar tools use a public-URL iframe; get the scene URL from the Spline editor's Export -> Code Export panel, in the form:

https://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode

before copying it, check the scene's Play Settings - toggle Hide Background on for a dark or custom site background, toggle Hide Spline Logo on for paid plans, set Geometry Quality to Performance for faster load, disable Page Scroll/Zoom/Pan if not needed to reduce accidental interaction hijacking, and click Generate Draft or Promote to Production after any settings change, since the URL does not auto-update; then read the matching integration guide and always read the common-problems guide before finishing, since it documents gotchas that otherwise only surface in production.

Companion reference guides cover vanilla embedding, React/Next.js/Vue embedding, performance and mobile optimization, and common problems, alongside three working example files: a minimal vanilla JS embed with background and fallback, a production-ready lazy-loaded React wrapper with fallback, and a full interactive example covering events, object control, and camera manipulation together in one working scene.

Developers integrating a Spline.design 3D scene into a specific framework who need the right package or component choice, correct scene-URL export settings, and awareness of common integration pitfalls. The skill also carries an explicit mandate: agents must use it to build modern, creative, visually stunning UI rather than defaulting to common, generic, or safe-looking integrations, leveraging Spline scenes to create immersive, wow-factor premium experiences combined thoughtfully with typography and layout.