How to Use Spline

Spline is a browser-based 3D design tool built specifically for the web. Unlike Blender or Cinema 4D, which target film and game production, Spline is purpose-built for creating 3D elements that embed directly into websites and apps.

If you've seen a modern SaaS landing page with interactive 3D objects that respond to your cursor, there's a good chance it was built in Spline.

Understanding the interface

Spline's editor runs entirely in the browser. The workspace has four main areas: the viewport (center), the object hierarchy (left panel), the properties panel (right), and the toolbar (top).

The viewport works like most 3D tools. Orbit with right-click drag, pan with middle-click, zoom with scroll. The grid on the floor represents the XZ plane.

Start by adding a primitive shape from the toolbar: cube, sphere, cylinder, or torus. Click on any object to select it, then use the properties panel to adjust position, rotation, scale, and materials.

The key difference from Figma: you're working in three dimensions. Objects have depth, and the camera angle determines what your users actually see.

Creating your first 3D scene

Start simple. A floating geometric shape with a good material is more effective than a complex scene with bad lighting.

Add a cube from the toolbar. In the properties panel, round the corners by adjusting the bevel property. Apply a material with a slight gradient or glass effect. Spline's material presets (glass, metal, plastic, gradient) are solid starting points.

Add a directional light and an environment light. The environment light provides ambient illumination, the directional light creates shadows and highlights. Drag the directional light's rotation to find an angle that makes your shape look three-dimensional and interesting.

Add an interaction: select your object, go to the Events panel, and add a "Mouse hover" event with a "Rotate" action. Now the object rotates when users hover over it. This takes about 30 seconds and immediately makes the scene feel interactive.

Materials and lighting

Materials are what separate amateur 3D from professional 3D. Spline offers physically-based materials with properties like roughness, metalness, and transmission (for glass effects).

The glass material is Spline's most popular effect. Set transmission to 100%, add some refraction, and apply it to a rounded shape. It creates the frosted-glass aesthetic you see on hundreds of modern landing pages.

For lighting, use the HDRI environment feature. Spline includes several environment presets that provide realistic reflections and ambient light. A good environment map does more for your scene's quality than any amount of manual light placement.

Exporting for the web

Spline offers several export options, and the right one depends on your use case.

Public URL embed. The simplest option. Publish your scene and embed it with an iframe. Zero setup, but you're loading Spline's runtime and hosting from their servers.

@splinetool/react-spline. The React component. Install the package, import it, pass your scene URL, and you have a 3D scene in your React app. This is the recommended approach for production React/Next.js projects.

import Spline from '@splinetool/react-spline';

export default function Hero() {
  return <Spline scene="https://prod.spline.design/your-scene-id/scene.splinecode" />;
}

Exported code. Spline can export raw Three.js code for full control. This gives you the geometry, materials, and interactions as JavaScript. Use this when you need to integrate deeply with an existing Three.js setup.

Performance considerations

3D scenes are heavy. A complex Spline scene can add 2-5MB to your page load and consume significant GPU resources on mobile devices.

Keep your scenes lean. Limit polygon counts by using simple geometric shapes rather than detailed models. Optimize textures by keeping their resolution at 1024x1024 or lower. Use Spline's built-in compression when exporting.

Lazy-load your Spline scenes so they don't block initial page render. In React, wrap the Spline component in a dynamic import with next/dynamic and ssr: false.

Test on mobile. A scene that runs smoothly on your M3 MacBook might stutter on a mid-range Android phone. Have a fallback ready: a static image or simplified version for devices that can't handle the 3D runtime.

When to use Spline vs. other tools

Use Spline when you need interactive 3D elements for the web. It's the fastest path from idea to embedded 3D.

Use Figma for the rest of your design work. Spline isn't a replacement for 2D UI design. The typical workflow is: design your page layout in Figma, create the 3D hero element in Spline, then combine them in code.

Start building in Spline

Spline's free tier is generous enough to learn the tool and build real projects. The paid plan ($9/month) removes the Spline watermark and adds private scenes.