spline-3d

What problem does it solve?

This Skill helps you reliably add interactive 3D scenes from Spline.design to your website or app without getting stuck on the right embedding approach, runtime control, or performance pitfalls.

Core Features & Use Cases

• Choose the correct integration method: React/Next.js component embedding, vanilla JS runtime embedding, or simple iframe embeds.
• Control scenes programmatically: use the Spline runtime API to query objects, emit editor-defined events, and read/write scene variables for real-time behavior.
• Ship performant 3D experiences: follow export and runtime best practices (lazy loading, polygon/light limits, compression, mobile fallbacks) to avoid slow loads and blank canvases.
• Use case examples: hero sections with lazy-loaded 3D, interactive product viewers with mouse events, scroll-driven 3D via variables, and data-driven dashboards updating variables from APIs.

Quick Start

Use the spline-3d Skill to embed your Spline scene by choosing the React, vanilla JS, or iframe method and wiring up loading, events, and variables as needed for your project.