npx claudepluginhub sickn33/antigravity-awesome-skillsThis skill uses the workspace's default tool permissions.
Master guide for embedding interactive 3D scenes from [Spline.design](https://spline.design) into web projects.
Embeds interactive 3D scenes from Spline.design into web projects with React, Next.js, Vue, vanilla JS, runtime API control, performance, and debugging guides.
Builds interactive 3D web experiences using Spline's browser-based visual editor for modeling, state-based animation, events, and export to React components or web code.
Builds interactive 3D web experiences using Three.js, React Three Fiber, Spline, WebGL, and GLSL shaders. Covers product configurators, 3D portfolios, immersive sites, and optimizations.
Share bugs, ideas, or general feedback.
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.