Spline 3D Guide 2026: Interactive 3D for the Web

For years, interactive 3D on marketing sites meant one of two paths: hire a developer who knows Three.js, or skip it entirely. Blender and Cinema 4D are powerful but require months to learn and produce formats that do not export cleanly to the web without additional engineering work.

Spline closes this gap. It is a browser-based 3D design tool built specifically for web output. You design in a canvas that feels closer to Figma than to Blender, add interactions and animations without code, then export via iframe embed, a native web component, or a React package. The output is a live 3D scene running in the browser at your URL.

This guide covers the full workflow: from first scene to live page, with particular attention to the export paths that matter most for Webflow and React teams.

What Spline Is (and How It Differs from Blender)

Spline is a real-time 3D design tool built for web designers, not 3D artists. The distinction shapes everything about how it works.

Blender is a full 3D production pipeline - mesh modelling, UV unwrapping, rigging, rendering, VFX, animation. It is built for visual effects, game assets, product visualisation, and film. Getting a Blender scene onto a website requires exporting to glTF or similar, then loading it with Three.js or Babylon.js. That integration layer requires developer involvement and performance work.

Spline skips all of that. You work in a browser canvas, apply materials and lighting, add interactions through a point-and-click interface, and export directly to an embed code or a React component. There is no intermediate format, no manual Three.js integration, no separate performance optimisation pipeline. What you see in Spline's editor is what renders in the browser.

The tradeoff: Spline does not do everything Blender does. Complex organic modelling, photorealistic rendering, game-engine-quality physics - these are not Spline's territory. For interactive product heroes, animated blob backgrounds, scroll-driven 3D elements, and decorative interactive objects on marketing pages, Spline is the right tool and Blender is significantly more than you need.

The Spline Interface

Spline runs in the browser with no installation required. The interface has three primary panels.

The canvas (centre): Your 3D scene. Pan with the middle mouse button or Alt+click-drag. Orbit with right-click-drag. Zoom with scroll. Add objects from the toolbar at the top - primitives (cube, sphere, cylinder, torus), text, path shapes, and imported 3D files.

The Objects panel (left): The scene hierarchy. All objects in your scene are listed here. Drag to reorder, click to select, and use folders to group related objects. Naming objects clearly matters, particularly before export - Spline exports object names as-is, and the React/JavaScript API references objects by name.

The Properties panel (right): Contextual. When an object is selected, shows its transform (position, rotation, scale), material, geometry properties, and state configurations. When nothing is selected, shows scene settings including background, environment, post-processing, and export options.

Materials and Lighting

Materials

Spline's material system covers the most common web 3D needs without requiring PBR (physically based rendering) expertise.

Colour material: Flat colour with optional transparency. The starting point for most objects.

Standard material: Adds a roughness/metalness model that responds to lighting. This is the correct choice for anything that should look physical - metal, plastic, glass. The Standard material parameters: roughness (matte to glossy), metalness (non-metal to full metal), transmission (opacity for glass effects), and reflectivity.

Matcap material: Projects a spherical gradient texture onto the object, simulating lighting without actual lights in the scene. Fast to render, good for stylised or illustrative 3D, less accurate than Standard but highly performant.

Gradient material: Applies a colour gradient across the object's geometry. Effective for organic, friendly 3D shapes - the blob heroes that became common on SaaS sites from 2022 onward typically use gradient materials.

Texture material: Loads an external image or video as the surface texture. Use for product mockups, screen simulations, or any surface where a custom image is the visual.

Lighting

Spline includes three light types relevant to web 3D:

Directional light: A parallel light from a direction - equivalent to sunlight. One well-placed directional light handles most scenes.

Point light: Emits in all directions from a single position. Use for localised glow effects, simulating lamp light, or creating highlights on specific surfaces.

Environment light: A spherical image that wraps the entire scene, providing ambient lighting and reflections. Choosing a good environment image is often the single fastest way to make a scene look polished.

For most marketing site 3D, one directional light and an environment image are sufficient. Avoid adding many lights - each adds rendering cost.

Animation and Interactions

Spline's animation system operates at two levels: keyframe animations (a sequence that plays automatically) and event-based state changes (respond to user input).

Keyframe Animations

Select an object, open the animation timeline at the bottom of the editor, and add keyframes. Common animation types: rotation on a loop (for floating or orbiting objects), scale pulsing, position oscillation, opacity fade.

For continuous ambient motion - a floating 3D product, a slowly rotating shape - rotation and position animations on a loop are the most common pattern and the simplest to set up. Set the animation to loop and set easing to In-Out Sine for the most natural feel.

Interactions and State Events

This is where Spline earns its place for interactive marketing sites. Events are attached to objects and trigger state changes or animations in response to user input.

Available event triggers:

• Mouse Hover (object-level)
• Mouse Down, Mouse Up (object-level click)
• Mouse Press (held)
• Follow (object follows cursor position)
• Scroll (page scroll triggers animation) - available only with the Spline Viewer export, not iframe
• Look At (object faces cursor)
• Key Press

State changes: Objects in Spline have states. The Default state is the initial appearance. You create additional states - Hover, Clicked, Active - and configure what changes between them (colour, scale, position, material properties). When the event fires, the object transitions between states with configurable easing and duration.

This system produces interactions like: a product rotates to face the cursor, a card lifts and brightens on hover, a shape morphs when clicked. None of this requires JavaScript in your site code - the behaviour is compiled into the exported scene.

Export and Embed Options

Spline offers four primary export paths. The right one depends on your platform and how much interactivity you need.

Option 1: Public URL (simplest)

Click Export at the top right, select Public URL, and Spline generates a URL at prod.spline.design/[id]. Paste this into any platform that accepts an iframe URL - Webflow's Embed element, Notion, WordPress page builders.

Use when: You want the fastest path to embedding and do not need scroll-based events or full-window mouse tracking. The iframe creates a contained viewport - mouse events only fire inside the frame, not across the full page.

Option 2: Spline Viewer (recommended for Webflow and most web builders)

The Spline Viewer (<spline-viewer>) is a native HTML web component. It offers more capability than a plain iframe: global mouse events (tracking across the full browser window, not just the canvas), scroll-based animation triggers, and better integration with the surrounding page.

To use it:

1. Click Export, select Spline Viewer
2. Copy the embed code snippet
3. Paste into your Webflow Embed element, WordPress HTML block, or any HTML-accepting platform

The Spline Viewer embed code looks like:

<script type="module" src="https://unpkg.com/@splinetool/viewer@latest/build/spline-viewer.js"></script>

<spline-viewer url="https://prod.spline.design/[your-scene-id]/scene.splinecode"></spline-viewer>

Configure the viewer's options in the Export panel before copying:

• Spline Logo: Set to No on paid plans to remove the Spline branding
• Events: Global (full window) or Local (canvas only) - choose Global for cursor-following interactions
• Mouse type: Mouse, Touch, or Both - set to Both for mobile compatibility
• Background: Transparent or scene colour

The scroll event type works exclusively with the Viewer export. If scroll-driven animation is a design requirement, you must use the Viewer, not a plain iframe URL.

Option 3: React Component

For teams building in React or Next.js, Spline publishes the @splinetool/react-spline package that wraps the viewer as a React component.

Install:

npm install @splinetool/react-spline @splinetool/runtime

Basic usage:

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

‍

export default function App() {

  return (

    <Spline scene="https://prod.spline.design/[your-scene-id]/scene.splinecode" />

  );

}

With lazy loading (important for performance):

import React, { Suspense } from 'react';

const Spline = React.lazy(() => import('@splinetool/react-spline'));

‍

export default function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <Spline scene="https://prod.spline.design/[your-scene-id]/scene.splinecode" />

    </Suspense>

  );

}

For Next.js:

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

The React package also exposes an API for triggering Spline animations and reading object positions from your React code - useful for coordinating Spline interactions with other UI state.

Option 4: Export Formats (video, image, static)

For simpler use cases - a hero background that does not need real-time interaction - Spline can export as MP4 video, animated GIF, or PNG/WebP image. These are not interactive but are significantly lighter in file size and rendering cost than a live 3D scene. Use these when the visual effect matters but real-time interaction does not.

Export Options Comparison

Embedding in Webflow: Step by Step

1. In Spline, run the built-in performance audit before exporting. The audit (accessible in the Export panel) provides a diagnosis and optimisation recommendations specific to your scene. Address any warnings before embedding.
   
   
2. In the Export panel, select Spline Viewer and configure options: turn off the Spline logo (paid plan), set events to Global if you are using cursor-following interactions, enable responsive sizing.
   
   
3. Copy the embed code snippet.
   
   
4. In Webflow Designer, add an Embed element to the section where you want the 3D scene. Paste the Spline Viewer code into the embed.
   
   
5. Set the embed container's height explicitly. 3D elements require a defined height - a container with no height renders as collapsed. Use a CSS height value (400px, 600px, or 100vh for full-screen) or a padding-based aspect ratio trick.
   
   
6. In the Webflow Designer, verify the embed is rendering in the preview. Use Webflow's device preview to check mobile behaviour.
   
   
7. Before publishing, test the live page on real devices. 3D rendering on mobile is CPU and GPU intensive. Performance on a mid-range Android device is significantly lower than on a Mac or PC.
   
   

Performance Considerations for Marketing Sites

3D adds rendering cost. This is not a reason to avoid it, but it is a reason to be deliberate.

The built-in performance audit. Spline's performance audit (in Export panel) surfaces scene-level issues: polygon count, texture memory, number of lights, and real-time shadow calculations. Run it before every export. Address warnings before embedding.

Lazy loading. Both the Viewer and the React component support lazy loading - the scene loads only when it enters the viewport. Enable lazy loading for any 3D element that is not the first thing on the page. In React, React.lazy() achieves this (example above). In the Viewer export, look for the lazy loading option in the Export panel.

Level of detail (LOD). Spline provides LOD settings that reduce polygon count at distance. For scenes with complex geometry, enabling LOD can significantly reduce the polygon count rendered on smaller screens.

Polygon count targets for web. A practical guideline for a marketing site scene: under 50,000 triangles for background/ambient 3D, under 100,000 for a featured hero element. Scenes beyond 200,000 triangles will struggle on mobile.

Avoid real-time shadows. Shadow calculations are expensive. Unless shadows are essential to the visual, disable them. Use baked shadows (a shadow texture on the ground plane) rather than real-time calculations.

Reduce number of lights. Each dynamic light adds a rendering pass. One directional light and an environment image covers most scenes. Every additional real-time light has a cost.

Mobile fallback strategy. For audiences with a significant mobile proportion, consider offering a fallback: a static WebP image of the 3D scene on mobile, and the live Spline scene on desktop. This is achievable in Webflow via responsive display settings or in React via a device detection hook.

Core Web Vitals impact. Spline scenes, particularly those that load on initial page render, will affect LCP (Largest Contentful Paint) and TBT (Total Blocking Time). If SEO and Core Web Vitals scores matter - for a marketing site where organic search is a growth channel - measure the impact before shipping. Tools: Google PageSpeed Insights and Spline's own 3D Vitals panel (monitors scene performance in the Spline editor).

Marketing Site Use Cases

These are the patterns that appear most commonly on SaaS and B2B marketing sites in 2026.

Animated hero background. A slowly rotating or floating abstract shape - blobs, geometric objects, particle fields - behind the hero headline. Creates a sense of dimensionality without requiring user interaction. Performance-friendly when kept to simple geometry. Implementation: loop animation on a simple shape with a gradient material.

Interactive product mockup. A 3D representation of the product (a floating phone, a laptop, a dashboard screen) that rotates to face the cursor or responds to scroll. More engaging than a static screenshot. Implementation: Follow event on the object, scroll events on screen transitions.

Section decoration. Small 3D elements in feature sections - floating icons, geometric accents - that add visual interest without dominating the layout. Lower polygon counts, simpler materials. Implementation: subtle rotation animations, no interactivity required.

Loading animation. A 3D animation as a branded loading state. Replaces generic spinners. Implementation: Spline export as a React component, triggered conditionally during load.

Interactive product configurator. More ambitious: a 3D model the user can rotate, zoom, and interact with to explore a product. Requires more production effort in Spline but produces a significantly more engaging product page. Implementation: Spline Viewer with click and drag interactions configured.

Spline Pricing

Spline has a free plan and paid plans. The primary difference relevant to marketing sites: the Spline logo appears on all embeds on the free plan and can be removed on paid plans.

Verify current pricing at spline.design/pricing - Spline has adjusted its plan structure in 2026.

Learning Path

Start here: Spline's official documentation at docs.spline.design covers all export types with current screenshots. The Spline Academy (spline.design/academy) has structured video tutorials from beginner to advanced.

For a web-first workflow: Design+Code's Spline courses cover the full workflow from scene creation through React export and web integration with code examples.

Community: The Spline Community (community.spline.design) has thousands of shared scenes you can fork and study. Forking a published scene and understanding how it was built is the fastest practical learning path.

Work with Hedrick

If you want Spline 3D elements on a Webflow site - embedded correctly, responsive, and not killing your Core Web Vitals - we handle the integration. Hedrick is a Webflow-exclusive development and design agency. We build Webflow sites that support advanced 3D and animation layers alongside clean performance scores. For interactive motion design, see our Webflow animation and interaction services.

Get in touch

A Note on Sources

Spline Viewer documentation (<spline-viewer> as a native HTML web component, scroll events only available with Viewer export, global vs local mouse events) from official Spline documentation at docs.spline.design. React component installation and usage (@splinetool/react-spline, @splinetool/runtime, Next.js variant @splinetool/react-spline/next, React.lazy() lazy loading) from official GitHub repository at npmjs.com/package/@splinetool/react-spline. Webflow integration best practices (run performance audit before export, define container height, test on real devices) from digidop.com tutorial citing Spline export workflow. Spline Viewer embed code snippet from official Spline documentation. Performance considerations (polygon count targets, LOD settings, lazy loading options) from hackdesign.org/toolkit/spline and digidop.com. Design+Code workflow description (Figma design → Spline → Webflow/Framer/React) from hackdesign.org/toolkit/spline. Spline pricing: verify current figures at spline.design/pricing before purchasing.

Frequently Asked Questions

Is Spline Free to Use?

Yes. Spline has a free plan that covers the core design tools and most export options. The primary limitation for marketing site use: the Spline logo appears on all embeds on the free plan. Paid plans (starting at approximately $16/month) allow removing the logo. Verify current pricing at spline.design/pricing - plans have been updated in 2026.

How Do I Embed Spline in Webflow?

Use the Spline Viewer export, not a plain iframe URL. In the Spline Export panel, select Spline Viewer, configure options (disable logo if on a paid plan, set Events to Global if using cursor-tracking interactions), and copy the code snippet. In Webflow, add an Embed element and paste the code. Set the container height explicitly - without a defined height the embed will collapse. Run Spline's built-in performance audit before exporting to catch optimisation issues.

Does Spline Work in React and Next.js?

Yes. Install @splinetool/react-spline and @splinetool/runtime. For standard React, import from @splinetool/react-spline. For Next.js, use the Next-specific import: import Spline from '@splinetool/react-spline/next'. Use React.lazy() to implement lazy loading - this is important for performance, as it prevents the 3D scene from loading until it enters the viewport.

What Are the Performance Impacts of Spline on a Website?

Spline scenes add rendering cost that affects Core Web Vitals, particularly LCP and TBT. Use lazy loading so the scene only loads when it enters the viewport. Run Spline's built-in performance audit before export and address any warnings. Keep polygon counts under 100,000 triangles for hero elements, disable real-time shadows, and minimise the number of dynamic lights. Test on real mobile devices - performance on mid-range Android is significantly lower than on desktop. For mobile-heavy audiences, consider a static WebP fallback on mobile and the live scene on desktop.

How Is Spline Different from Blender?

Blender is a full 3D production pipeline for visual effects, film, games, and product visualisation. Getting Blender output onto a website requires exporting to glTF and loading it with Three.js or similar, which involves developer integration work. Spline is built specifically for web output - you design in a browser canvas and export directly to an embed code or React component with no intermediate step. Spline does not replace Blender for complex 3D production; it replaces the need for Blender (and Three.js) for web-focused interactive 3D.

Do Scroll-Based Animations Work in Spline Embeds?

Only with the Spline Viewer export. The scroll event type - which triggers animation based on the page's scroll position - requires the <spline-viewer> component. It does not work with a plain iframe URL embed. If scroll-driven 3D animation is a design requirement, use the Spline Viewer export (for Webflow and general HTML) or the React component with the corresponding event API.