Skip to content
IndexDesign corpus
Motion & InteractionToolAppAnimation LibraryProprietary / all rights reservedFreemiumReact

Spline

Browser-based 3D design tool that exports interactive scenes to React, web components and native

Aboutspline.design

Spline is a collaborative, browser-based tool for building interactive 3D scenes and, more recently, 2D interactive canvases (its 'Hana' surface). You model, light, animate and wire up event-driven interactions in the editor, then publish the scene and drop it into a page. Runtime targets include a <spline-viewer> web component, React and Next.js via @splinetool/runtime, plus Webflow, Framer, Wix Studio and native Swift and Kotlin embeds. It is the default choice when a marketing hero needs real-time 3D rather than a video loop.

Install
npm i @splinetool/runtime
For an agent

Use Spline only when the design genuinely needs a live, interactive 3D scene the user can drag or that reacts to scroll — for a fixed camera path, an exported MP4 or a Lottie file is smaller and faster. You cannot author a scene programmatically: a human builds it in the editor and hands you a scene URL, after which your job is the <spline-viewer> tag or the @splinetool/runtime React wrapper plus a lazy-load boundary, because these bundles are heavy. The marketing site is a JS-rendered shell and the editor is login-walled, so do not expect to scrape scene data or docs content without a session.

Why it is here. It is the tool that made real-time 3D on the web a normal product decision instead of a WebGL engineering project. The trade-off it hides is weight — a Spline hero routinely costs more than the rest of the page.

Install command, framework, licence and component list.
Components it ships5
Helps you build4
Notable for
  • real-time collaborative 3D editing in the browser
  • @splinetool/runtime React and web-component embeds
  • Swift and Kotlin native export
  • free tier watermarks web exports
  • AI credits on Max tier
Provenance

Verified 2026-08-16. HTTP 200. https://spline.design (WebFetch; JS shell, runtime package names and embed targets read from inline code sample), https://spline.design/pricing (WebFetch; all five tiers and exact prices), curl HEAD 200 on spline.design

Related resourcesMotion & Interaction