with one click
spline-3d-integration
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
Menu
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
Use when CrossFrame Suite routes explicit Chinese casebook work: turning materials into reusable cases, anonymized entries, mechanisms, and retrieval indexes.
Use only when the user explicitly names crossframe-critical for a Chinese structural critique dossier, article plan, or long-form critical essay.
Use when CrossFrame Suite routes explicit Chinese proposition testing, debate analysis, hidden-premise review, rebuttal design, or withdrawal condition checks.
Use when CrossFrame Suite routes explicit Chinese reader replies, editor responses, consultation-style short answers, or boundary-aware structural advice.
Use when explicit CrossFrame work needs a Chinese critical insight essay, commentary, concept essay, public piece, or structure-to-article draft after diagnosis.
Use when CrossFrame Suite routes explicit Chinese notes for books, theories, articles, excerpts, bidirectional reading, absorption, or conflict mapping.
| name | spline-3d-integration |
| description | Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API. |
| risk | safe |
| source | community |
| date_added | 2026-03-07 |
Master guide for embedding interactive 3D scenes from Spline.design into web projects.
| Task | Guide |
|---|---|
| Vanilla HTML/JS embed | guides/VANILLA_INTEGRATION.md |
| React / Next.js / Vue embed | guides/REACT_INTEGRATION.md |
| Performance & mobile optimization | guides/PERFORMANCE.md |
| Debugging & common problems | guides/COMMON_PROBLEMS.md |
| File | What it shows |
|---|---|
| examples/vanilla-embed.html | Minimal vanilla JS embed with background + fallback |
| examples/react-spline-wrapper.tsx | Production-ready lazy-loaded React wrapper with fallback |
| examples/interactive-scene.tsx | Full interactive example: events, object control, camera |
Spline is a browser-based 3D design tool โ think Figma, but for 3D. Designers create interactive 3D scenes (objects, materials, animations, physics, events) in the Spline editor, then export them for the web via a hosted .splinecode file URL.
Before writing any code, check the existing project files to determine the framework.
| Stack | Method |
|---|---|
| Vanilla HTML/JS | <spline-viewer> web component OR @splinetool/runtime |
| React / Vite | @splinetool/react-spline |
| Next.js | @splinetool/react-spline/next |
| Vue | @splinetool/vue-spline |
| iframe (Webflow, Notion, etc.) | Public URL iframe |
The user must go to their Spline editor โ Export โ Code Export โ copy the prod.spline.design URL:
https://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode
Before copying the URL, tell the user to check Play Settings:
Once you have the stack and the scene URL, read the appropriate guide file above and follow its instructions. Always read COMMON_PROBLEMS.md before finishing integration โ it contains critical gotchas that will otherwise only surface in production.