# Getting Started (/)
Spline is a design tool for making interactive 3D and 2D experiences in your
browser, and shipping them to the web, iOS and Android.
It's two editors in one product. The **3D editor** is for modelling, materials,
lighting, animation and physics. **Hana** is a 2D canvas for interfaces and
animated graphics. Both share the same interactivity model, the same real-time
collaboration and the same publishing pipeline — and both have an AI agent that
can build and edit for you.
***
## New to Spline? [#new-to-spline]
What you can make, and what makes Spline different from other 3D tools.
A short walkthrough: add objects, set up a material, and publish the result.
A tour of the dashboard and the editor, so you know where things live.
The shortcuts worth learning early.
***
## Pick where to start [#pick-where-to-start]
Model and sculpt objects, build scenes, and add materials, lighting, cameras,
particles and physics.
Lay out interfaces and animated graphics on a 2D canvas, with effects and
real 3D shapes.
Describe what you want and let the agent build it — in either editor, with
fully editable results.
Turn a prompt or an image into a 3D model, then bring it into your scene.
States, events and actions — make things respond to clicks, scroll, keys and
collisions.
Ship to the web, embed in your site, or export for Apple and Android.
***
## Common questions [#common-questions]
* [**Pricing & AI credits**](/account/pricing) — what each plan includes, and how
AI usage is metered.
* [**Play Mode**](/exporting-your-scene/play-mode) — previewing your scene the way
visitors will see it.
* [**How to optimize your scene**](/exporting-your-scene/how-to-optimize-your-scene)
— what to do when a scene feels slow.
* [**Spline for Desktop**](/basics/download-spline-for-desktop) — tabs, system fonts
and MCP support.
* [**FAQ**](/basics/faq) — what you can import and export, and where to get help.
***
## Get help [#get-help]
Can't find what you need?
[Suggest a topic](https://airtable.com/shryPwf6CV6NF65bG) and we'll consider it for
these docs.
💬 [Join us on Discord](https://discord.gg/M9hNDMqvnw)
▶️ [Watch tutorials on YouTube](https://www.youtube.com/channel/UCjnuBkgYrryPxDuKz0eG09Q)
🐦 [Follow us on X / Twitter (@splinetool)](https://twitter.com/splinetool)
🌈 [Follow us on Instagram](https://instagram.com/splinetool)
🎨 [Follow us on TikTok](https://www.tiktok.com/@splinedesign)
# Pricing (/account/pricing)
Spline has four plans: **Hobby**, **Pro**, **Max** and **Enterprise**. Prices and
the full feature comparison live on the
[pricing page](https://spline.design/pricing) — this page covers how plans and
AI credits work together.
***
## AI credits [#ai-credits]
Every AI feature in Spline draws on a single pool of **monthly AI credits**
attached to your workspace. That includes the AI agent in the 3D editor,
[AI 3D Generation](/generate/ai-3d-generation),
[AI Textures](/spline-ai/ai-textures) and Hana's generate prompt.
Credits are **included with every paid plan** — there is no separate AI
subscription to buy:
| Plan | Monthly AI credits included |
| ---------- | ---------------------------------------------------------- |
| Hobby | 2,000 |
| Pro | 3,000 |
| Max | 10,000 |
| Enterprise | Custom — [contact sales](https://spline.design/enterprise) |
If you previously subscribed to the **Spline AI Add-on**, it no longer exists as
a separate product. AI access is now part of your plan, metered in credits.
### Adding more credits [#adding-more-credits]
Each plan card includes a credits selector, so you can raise your monthly
allowance in increments of 1,000 above the amount your plan includes. The
adjusted price is shown on the plan card and again on the payment overview
before you confirm.
### What consumes credits [#what-consumes-credits]
Cost varies by operation — generating a 3D model, for example, spends credits
on both the image previews and the mesh generation, so one finished model can
cost more than one generation. Longer, more complex agent runs also spend more
than short ones. The editor shows your remaining balance in the agent panel.
***
## Legacy plans [#legacy-plans]
Spline previously sold personal **Starter** / **Professional** plans and a
**Team** plan. If you're still on one of those, it stays active and keeps
working — legacy Professional and Team subscriptions satisfy the same feature
gates as **Pro** does today, so anywhere the docs say a feature needs Pro or
Max, your existing plan qualifies.
***
## Renewal and cancellation [#renewal-and-cancellation]
See [Subscriptions and Renewal](/account/subscriptions-and-renewal) for billing
cycles, upgrades, downgrades and cancellation.
***
## Spline for Enterprise [#spline-for-enterprise]
The platform for your team to build and ship multi-platform interactive 3D
experiences. Enterprise adds **SAML Single Sign-On**, **SOC 2 compliance**,
**priority support** and **enterprise-grade security**, among other things.
See [Spline for Enterprise](/account/spline-for-enterprise) for the full list,
or [contact sales](https://spline.design/enterprise) to get started.
# Spline for Enterprise (/account/spline-for-enterprise)
The platform for your team to build and ship multi-platform interactive 3D experiences. Get started with Enterprise for ***SAML Single Sign-On***, ***SOC 2 Compliance***, ***Priority Support***, ***Enterprise-grade Security*** + more.
[Contact Sales ➔](https://spline.design/enterprise)
***
## Build and ship multi-platform interactive 3D experiences with your team [#build-and-ship-multi-platform-interactive-3d-experiences-with-your-team]
Spline is an innovative platform that empowers individuals to unleash their creativity by providing accessible 3D design capabilities right within a web browser. \
\
With Spline, the world of 3D design becomes not only attainable but also collaborative in real-time. We’re at the forefront of making 3D design accessible to anyone, enabling users to design, create, and collaborate on 3D projects seamlessly, regardless of their level of expertise.
#### Enterprise-ready Platform [#enterprise-ready-platform]
A dedicated space for your organization’s design workflow.
* Create public and private internal teams and set user permissions across your organization with Admins, Editors and Viewers.
* Organize team work with projects and folders.
* Build design systems for your teams with Team Libraries.
* Access version history and access logs to maintain and protect production-ready work.
#### Real-time Collaboration [#real-time-collaboration]
Collaborate with your entire team in a 3D environment.
#### Notes & Feedback [#notes--feedback]
Leave comments for your team or take notes directly in the editor.
***
## Multi-platform Exports [#multi-platform-exports]
With Spline’s real-time interactive exports you can easily integrate your 3D content into multiple platforms.
### Web Exports [#web-exports]
Embed your 3D content on the web with a code snippet or custom code.
Learn more about [Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls).
### Apple Platforms [#apple-platforms]
3D content for Apple Platforms with a Swift code snippet or a generated Xcode project.
Learn more about [Native 3D Embeds for iOS](/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os).
### Android [#android]
Create native 3D content on Android with a Kotlin code snippet, APKs and AABs.
Learn more about [Native 3D Embeds for Android](/exporting-your-scene/android/native-3d-embeds-for-android)
***
## Reliability & Security [#reliability--security]
Spline is built with state-of-the-art encryption, safe and reliable infrastructure, and independently verified security controls.
### Identity Management [#identity-management]
We offer enterprises the ability to enable **SAML SSO** and **2FA** to utilize Spline across your entire organization securely.
### Data Protection [#data-protection]
We implement robust security measures to safeguard your work. Including security certifications **SOC2**, **ISO27001** and penetration tests.
### Application Reliability [#application-reliability]
We commit to **99% uptime** of our application services and hosting services for your 3D scenes.
***
## Customer Support [#customer-support]
### Onboarding [#onboarding]
We’ll help you get setup and go over any details of the platform you should know about.
### Direct access [#direct-access]
Get access to a Slack Channel with the Spline team to ask any questions and help you succeed with your projects.
### Priority Support [#priority-support]
Your success is our utmost priority! We’ll provide you constant support in any inquiry you might have.
***
## FAQ [#faq]
## What is Spline Enterprise? [#what-is-spline-enterprise]
Spline Enterprise is a subscription offering for large organizations to create, collaborate and design in 3D. Spline Enterprise includes specialized features for large teams, advanced permissions, custom billing and additional security features to keep your work safe.
## How does Enterprise billing work? [#how-does-enterprise-billing-work]
We offer various flexible billing options for our Enterprise plan. We accept all major credit cards and wire transfer. Enterprise plans typically occur on an annual basis with options to upgrade or downgrade. Contact us for more information.
## How does seats pricing work? [#how-does-seats-pricing-work]
Enterprise plans are charged per seat. Your plan will be charged for all users who have editor permissions. There are no additional charges for viewers or exporting. Editors added partway through the month will be charged on a pro-rated basis.
## Where can I find out more about Spline's security? [#where-can-i-find-out-more-about-splines-security]
Spline is built with best-in-class security practices at every layer. This includes state-of-the-art encryption, safe and reliable infrastructure, and independently verified security controls. You can learn more about it on our [**Security page**](https://spline.design/security).
## How can I ask more questions about Enterprise? [#how-can-i-ask-more-questions-about-enterprise]
You can write to [**enterprise@spline.design**](mailto:enterprise@spline.design) for any other questions you might have. We’d love to help!
# Subscriptions and Renewal (/account/subscriptions-and-renewal)
These renewal and cancellation terms apply to Spline online subscription purchases online. If you have signed an order form with Spline (Enterprise customer), these terms do not apply to you – your order form terms apply instead.
### Refund Policy [#refund-policy]
* All payments are non-refundable unless we determine otherwise.
* If a refund is approved, it will be issued to the original payment method.
* Refunds may be granted in situations such as:
* Billing errors
* Duplicate charges
* Other circumstances at our sole discretion
### Cancellation Policy [#cancellation-policy]
#### How to Cancel [#how-to-cancel]
You can cancel your subscription at any time by following these steps:
1. Navigate to your account's [Settings](https://app.spline.design/account).
2. Click on Cancel Plan and follow the process.
#### Cancellation Terms [#cancellation-terms]
* Your subscription will stay active until the end of the current billing cycle.
* You will retain full access for the duration of your paid period.
* Once canceled, your subscription will not renew automatically.
* We do not offer partial refunds for unused time in the billing period.
For all other billing questions, reach out to us at [support@spline.design](mailto:billing@spline.design)
# Change theme on Spline (/basics/change-theme-on-spline)
Spline supports **Dark**, **Light**, and **System** themes so you can customize the interface to your preference.
***
You can switch themes from two places:
## 1. From the Dashboard [#1-from-the-dashboard]
You can change the theme directly from the main Dashboard menu.
**How to access it:**
1. Open the **Workspace Switcher** (top-left corner of the Dashboard).
2. Scroll to the bottom of the menu.
3. Click **Theme**.
4. Select **Dark**, **Light**, or **System Theme**.
***
## 2. From the Editor [#2-from-the-editor]
You can also switch themes while working inside any 3D or Hana file.
**How to access it:**
1. Open the **Main Menu** (top-left corner of the Editor).
2. Scroll to the bottom of the dropdown list.
3. Click **Theme**.
4. Choose **Dark**, **Light**, or **System Theme**.
***
## System Theme [#system-theme]
When using **System Theme**, Spline automatically follows your operating system’s appearance settings — switching between light and dark depending on your OS preferences.
# Creating your first scene (/basics/creating-your-first-scene)
If you haven't signed up or downloaded Spline yet, get it at [spline.design](http://spline.design)**.**
Getting started with Spline is easy!
## How to create a new file [#how-to-create-a-new-file]
1. From the main view, there are two ways to start a new file.
1. On the top left right by your name, press the "+" icon.
2. On the "My Files" tab next to search, press the "New File" button.
2. Once you're inside a new file, it's time to start creating your 3D scene.
## Controlling the camera [#controlling-the-camera]
To control the camera you can use your mouse + keyboard or just simply use the trackpad with gestures.
### Orbit the camera [#orbit-the-camera]
| | macOS | Windows |
| -------- | ----------------------- | -------------------- |
| Mouse | `Option + Click & Drag` | `Alt + Click & Drag` |
| Trackpad | `Option + Tap & Drag` | `Alt + Tap & Drag` |
### Zoom the camera [#zoom-the-camera]
| | macOS | Windows |
| -------- | --------------------------------- | --------------------------- |
| Mouse | `Scroll` or `Cmd + Scroll` | `Scroll` or `Ctrl + Scroll` |
| Trackpad | `Pinch` or `Cmd + 2 Finger Swipe` | `Pinch` or `Ctrl + Swipe` |
### Pan the camera [#pan-the-camera]
| | macOS | Windows |
| -------- | ---------------------- | ---------------------- |
| Mouse | `Space + Click & Drag` | `Space + Click & Drag` |
| Trackpad | `2 Finger drag` | `2 Finger drag` |
Check out all the available shortcuts in the link below.
[Keyboard shortcuts](/basics/keyboard-shortcuts)
## Learn from the library files & Community [#learn-from-the-library-files--community]
Exploring the Spline Library and Spline Community is a good way to discover new ways to create 3D content within Spline. From simple static scenes to complex animated ones, you'll find examples and inspiration that will help you craft your scenes faster.
### How to access the library [#how-to-access-the-library]
1. From the main view under your name click “Library”.
2. From the editor click on “Library” in the bottom left corner.
3. Explore sub-categories in Scenes and Objects and click to add them.
[3D Library](/designing-in-3-d/scenes/3d-library)
### How to access the Community [#how-to-access-the-community]
1. From the main view under your name click “Community”.
2. Explore Community scenes and also share your amazing designs!
3. Remix scenes to understand how your favourite scenes were created.
[Community Platform](/sharing-collaboration-and-workspaces/community-platform)
# Spline for Desktop (/basics/download-spline-for-desktop)
Spline works fully in the browser, but the desktop app gives you a few things the
browser can't: **tabs** for working across several files, **system fonts**, and
**MCP** support for connecting AI coding tools to your editor.
[**Download Spline for Desktop**](https://spline.design/download) — macOS and
Windows. The download page always serves the current version and lists the
system requirements for it.
***
## Working with tabs [#working-with-tabs]
The desktop app keeps your files in tabs, like a browser.
* **Home** is pinned as the first tab and can't be closed — it's your dashboard.
* **+** at the end of the tab strip opens a short menu: **3D Scene**, **Design**,
**Generate**, and your **Recents**. Pick one and it opens in a new tab.
* **Drag a tab** along the strip to reorder it.
* **Right-click a tab** for **Reload**, **Copy Link** and **Close**.
* **Double-click the Home tab** to return to your dashboard.
### Keyboard shortcuts [#keyboard-shortcuts]
| Action | Shortcut |
| ------------ | -------------------------------------------------------------- |
| New tab | ⌘/Ctrl + T |
| Close tab | ⌘/Ctrl + W |
| Next tab | Ctrl + Tab |
| Previous tab | Ctrl + Shift + Tab |
| Reload | ⌘/Ctrl + R |
| Force reload | ⌘/Ctrl + Shift + R |
The same actions are in the **View → Tabs** menu.
### What opens in a new tab [#what-opens-in-a-new-tab]
Rather than replacing what you're looking at, these open alongside it:
* A file from **dashboard search** or the **notifications** panel
* A **remix** from Discover or Templates
* Anything created from the **+** menu
* **Community** and **Academy**, which open inside the app rather than your browser
***
## What the desktop app adds [#what-the-desktop-app-adds]
### MCP support [#mcp-support]
The MCP server is bundled in the desktop app, so connecting Claude, Cursor, VS Code,
Antigravity or ChatGPT to your editor only works here — there's nothing to install
or configure, the app registers itself with the clients it finds when it launches.
See [Spline MCP Server](/generate/spline-mcp-server).
### System fonts [#system-fonts]
In Hana, the font picker includes the fonts installed on your machine, not just
Spline's web fonts. See
[Designing in Hana](/hana-a-canvas-for-interactivity/basics/designing-in-hana).
***
## Updates [#updates]
The app updates itself. When a new version is ready a toast appears in the corner —
click **Refresh** and it reloads every open tab onto the new version. You can also
check manually from **Spline → Check for Updates…**
If you're on an old build, update before troubleshooting anything. Several features
in these docs — tabs, the **+** menu, MCP registration and in-app Community —
don't exist in earlier versions.
# FAQ (/basics/faq)
## 📸 What types of content can I export with Spline? [#-what-types-of-content-can-i-export-with-spline]
You can export the content of your scene by pressing "Export" on the Toolbar.
#### 🥕 3D Content [#-3d-content]
* For the **Web**
* [Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls) - A URL hosted on Spline servers *([my.spline.design](http://my.spline.design)...)*
* [Exporting as Spline Viewer](/exporting-your-scene/web/exporting-as-spline-viewer) - Embed Spline 3D content with a code snippet.
* [Exporting as Code](/exporting-your-scene/web/exporting-as-code) - Export code to make more complex integrations and use Spline API.
* For **Apple Platforms**
* [Native 3D Embeds for iOS](/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os) - Embed your scenes with Swift Native 3D for Apple Platforms.
* [iOS App Generation](/exporting-your-scene/apple-platform/i-os-app-generation) - Generate pre-built Xcode Projects with App Generation.
* Export for Vision Pro and preview your 3D content with [Spline Mirror for visionOS](/exporting-your-scene/apple-platform/spline-mirror-for-vision-os).
* For **Android Platforms**
* [Native 3D Embeds for Android](/exporting-your-scene/android/native-3d-embeds-for-android) - Embed your scenes with Kotlin Native 3D for Android.
* [Android Package (APK)](/exporting-your-scene/android/android-package-apk) - Export pre-built Android Packages (APK).
* [Android App Bundles (AAB)](/exporting-your-scene/android/android-app-bundles-aab) - Export pre-built Android App Bundles (AAB).
* 3D Formats
* GLTF (.gltf)
* GLB (.glb)
* STL (3D Printing)
* USDZ (iOS AR)
* Spline Files (Files with ".spline" for saving your scenes locally).
#### 🖼 Image [#-image]
* PNG
* JPG
#### 🎥 Video [#-video]
* WebM
* Mp4
* Image Sequence
## 🖼 What types of content can I import with Spline? [#-what-types-of-content-can-i-import-with-spline]
You can import content to your scene by dragging & dropping the file into the Viewport or with the Open/Import shortcut \[⌘ O].
Here is a list of the file formats you can import into Spline. Additional export types will come in the future.
#### 🥕 3D Content [#-3d-content-1]
* OBJ
* FBX (supports animation and rigs)
* [Import Animated Objects](/importing-content/import-animated-objects)
* STL
* GLTF (as .gltf)
* GLB (as .glb)
* Spline Files (.spline)
#### 🖼 Images [#-images]
* PNG
* JPG
#### 🖋️ Vector [#️vector]
* SVG (partial support)
#### 🎥 Video [#-video-1]
* MP4
#### 🔊 Sound [#sound]
* MP3
* WAV
#### 🌳 Gaussian Splats [#gaussian-splats]
* [3D Gaussian Splatting](/designing-in-3-d/scenes/3d-gaussian-splatting)
## 🍭 Can Spline be integrated with other tools? [#-can-spline-be-integrated-with-other-tools]
Yes, if you export your scene for the Web as a **Public URL** ([Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls)), you can use the links or embed codes to embed it on platforms like Notion, Framer, Webflow, etc.
It’s also possible to integrate with the **Spline Viewer** ([Exporting as Spline Viewer](/exporting-your-scene/web/exporting-as-spline-viewer)) code snippet, use **Code Exports** ([Exporting as Code](/exporting-your-scene/web/exporting-as-code)) or the **Native Webflow Support** ([Integrating with Webflow](/integrations/integrating-with-webflow)).
You can export [Native 3D Embeds for iOS](/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os) too which supports all Apple platforms iOS, iPadOS, macOS, and visionOS.
You can export [Native 3D Embeds for Android](/exporting-your-scene/android/native-3d-embeds-for-android) which supports all Android devices including Phones, Tablets, Smart TV, and more.
## 💻 What are the technical requirements to run Spline? [#-what-are-the-technical-requirements-to-run-spline]
We recommend using the latest version of your OS to run Spline. 3D is a relatively new technology for browsers, and it requires more CPU/GPU processing than traditional 2D design tools.
If you are using a Macbook Pro with a discreet GPU card, a common suggestion is to enable high-performance settings by defaults.
*M1 Macbooks don't require this setting.*
## 💳 How does the pricing work? [#-how-does-the-pricing-work]
To learn more about Spline’s pricing[ visit the pricing page](https://spline.design/pricing).
# How is Spline different? (/basics/how-is-spline-different)
Like Blender, Cinema 4D, 3ds Max or Maya, Spline is a tool for creating 3D
content — but it is built around collaboration, the web, and interactive output
rather than around rendered frames. The differences that matter most:
* **It's web-based.** Spline runs in the browser on any platform, with nothing
to install and no GPU requirements to check. Files live in the cloud, so there
are no local project folders to manage or hand around.
* **It's multiplayer.** Several people can edit the same file at the same time
and give feedback in place, the way they would in a 2D design tool.
[Real-time Collaboration in 3D](/sharing-collaboration-and-workspaces/real-time-collaboration-in-3-d)
* **It works in real time.** What you see in the editor is what ships. There is
no render step and no waiting for frames.
* **The output is interactive, not a picture of your work.** You publish a live
scene that responds to clicks, scroll, keys and collisions — embeddable on any
site or app — instead of exporting a still or a video.
[Events & Interactivity](/interaction-states-events-and-actions/concepts/events-interactivity),
[Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls)
* **Animation is state-based.** Instead of keying every property on a timeline,
you define states and let Spline animate between them — though a timeline is
there when you want one.
[How state-based animation works](/interaction-states-events-and-actions/concepts/how-state-based-animation-works)
* **It uses a 2D approach to 3D.** Materials are stacked layers, not shader
graphs, and the interface borrows its conventions from graphic design tools.
That makes it far quicker to learn if you've never opened a 3D application.
[Creating Material Layers](/materials-shading/basics/creating-material-layers)
* **Code is optional, and it lives in the file.** Most work needs none, but a
file can carry its own HTML, CSS and JavaScript over the 3D canvas, with an
injected `spline` API for driving the scene — no build step, no separate
repo, and it ships with the scene when you publish.
[Code Tab](/interaction-states-events-and-actions/code-tab)
* **3D and 2D live in the same product.** Hana, Spline's 2D canvas, shares the
same interactivity model, collaboration and publishing pipeline as the 3D
editor — so an interface and the 3D content inside it are built in one tool.
[What is Hana?](/hana-a-canvas-for-interactivity/basics/what-is-hana)
* **An AI agent can do the work with you.** Describe what you want and it builds
it through the editor itself, leaving fully editable results behind.
[AI Agent](/spline-ai/ai-agent)
For a full tour of what the product includes, see
[What is Spline?](/basics/what-is-spline).
# Keyboard shortcuts (/basics/keyboard-shortcuts)
### Key symbols (mac) [#key-symbols-mac]
⌘ - CMD \
⇧ - Shift \
⌃ - Control \
⌥ - Option / Alt
| Action | Mac | Windows |
| -------------------------------------------------------- | --------------------------- | --------------------------- |
| Open / Import | ⌘ O | Ctrl + O |
| Save File to Local | ⌘ ⇧ S | Ctrl + Shift + S |
| Undo | ⌘ Z | Ctrl + Z |
| Redo | ⌘ ⇧ Z | Ctrl + Shift + Z / Ctrl + Y |
| Copy | ⌘ C | Ctrl + C |
| Cut | ⌘ X | Ctrl + X |
| Duplicate | ⌘ D | Ctrl + D |
| Paste | ⌘ V | Ctrl + V |
| Paste in Place | ⌘ ⇧ V | Ctrl + Shift + V |
| ... | | |
| Select All Objects | ⌘ A | Ctrl + A |
| Unselect Objects | ESC | ESC |
| Rename | ⌃ R | Ctrl + R |
| Toggle UI | ⌘ \\ | Ctrl + \\ |
| Toggle Full Screen | ⌘ ⇧ F | Ctrl + Shift + F |
| Zoom In | ⌘ + | Ctrl + |
| Zoom Out | ⌘ - | Ctrl - |
| Reset View / Camera | ⌥ R | Alt + R |
| ... | | |
| Group Selection | ⌘ G | Ctrl + G |
| Ungroup Selection | ⌘ ⇧ G | |
| ... | | |
| Delete Objects | DELETE | DELETE |
| Escape Creating Object | ESC | ESC |
| Rectangle | R | R |
| Ellipse | O | O |
| Triangle | K | K |
| Polygon | J | J |
| Switch to Local/World Space (TransformControls) | L | L |
| ... | | |
| Focus Object | S | S |
| Orientated to Object | ⇧ S | Shift + S |
| Zoom 100% | ⇧ 1 | Shift + 1 |
| Perspective/Orthographic | M | M |
| Drag Copy | ⌘ + Drag | Ctrl + Drag |
| ... | | |
| Transform (Mirror) | ⌥ | Alt |
| Transform (Aspect Ratio) | ⇧ | Shift |
| Transform (Mirror & Aspect Ratio) | ⇧ ⌥ | Shift + Alt |
| ... | | |
| Zoom (mouse) | ⌘ + Wheel | Ctrl + Wheel |
| Pan (mouse) | SPACE + Drag | SPACE + Drag |
| Orbit (mouse) | ⌥ + Drag | Alt + Drag |
| ... | | |
| Zoom (trackpad) | Pinch or ⌘ + 2 Finger Swipe | Pinch or Ctrl + Swipe |
| Pan (trackpad) | 2 Finger drag | 2 Finger drag |
| Orbit (trackpad) | ⌥ + Tap & Drag | Alt + Tap & Drag |
| ... | | |
| ↓ Selecting from the Object Outliner | | |
| Select/Deselect Range of Objects w/ Children | ⇧ Click | Shift + Click |
| Select/Deselect Multiple Objects w/ Children 1 by 1 | ⌘ Click | Ctrl + Click |
| Select/Deselect Single Object without Children | ⌥ ⌘ Click | Alt + Ctrl + Click |
| Select/Deselect Multiple Objects without Children 1 by 1 | ⌥ ⌘ ⇧ Click | Alt + Ctrl + Shift + Click |
| … | | |
| ↓ Selecting from the Viewport | | |
| Select/Deselect Objects w/ Children 1 by 1 | ⇧ Click | Shift + Click |
| Select/Deselect Multiple Objects w/ Children | ⇧ + Drag | Shift + Drag |
| Select/Deselect Single Object without Children | ⌥ ⌘ Click | Alt + Ctrl + Click |
| Select/Deselect Multiple Objects without Children | ⌥ ⌘ Drag | Alt + Ctrl + Drag |
| Select/Deselect Objects without Children 1 by 1 | ⌥ ⌘ ⇧ Click | Alt + Ctrl + Shift + Click |
| Select/Deselect Objects without Children | ⌥ ⌘ ⇧ Drag | Alt + Ctrl + Shift + Drag |
# Understanding Spline's UI (/basics/understanding-splines-ui)
Below you can see an overview of Spline's UI.
## Dashboard [#dashboard]
1. The **Tab bar** keeps several files open at once. The home button on the left
takes you back to your files, and the "+" opens a new tab. Tabs are a
[desktop app](/basics/download-spline-for-desktop) feature — in the browser
each file gets its own window or tab.
2. The **Sidebar menu** moves between **Home**, **My files**, **Templates**,
**Community** and **Academy**. Above it, the workspace name switches
workspaces, alongside search and your notifications.
3. **Projects** are shared folders for organizing a workspace's work. Press the
"+" to create one.
4. The **File view** lists what's in the section you're in — a preview, a name
and when it was last edited for each file. The controls around it switch
between **My files** and **Shared with me**, add a folder, toggle grid or
list, filter and sort, and start something new with **+ Create**.
## Editor [#editor]
1. The sidebar's three tabs. **Agent** is the AI assistant that builds and edits
the scene for you, and the tab the editor opens on. **Objects** is the scene
tree, and **Assets** holds the asset browser and your team libraries.
[AI Agent](/spline-ai/ai-agent)
2. The **Outliner** — every object in the scene, nested and searchable. The
**Scenes** list above it switches between the scenes in the file.
[Multi-Scenes](/designing-in-3-d/scenes/multi-scenes)
3. The **Preview | Edit | Code** stage tabs. **Edit** is the scene you work in,
**Preview** runs it the way a visitor sees it — this is Play — and **Code**
holds the file's own HTML document. Preview adds its own restart and
full-screen chips beside the tabs.
[Play Mode](/exporting-your-scene/play-mode),
[Code Tab](/interaction-states-events-and-actions/code-tab)
4. The **tool dock**, where you add and manipulate content: the "+" opens the
full list of objects, and the arrow is **Transform**, for moving, scaling and
rotating what you select.
5. Zoom, scene performance, and the **Share** and **Export** buttons — the
controls for inspecting and shipping the scene rather than editing it.
[Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls)
6. The **Property Panels**. With nothing selected these are the scene's own
settings — background, lights, simulation, effects, fog, sky, ambient
shadows, color — and selecting an object swaps them for that object's
properties.
[Environment & HDRi](/lighting/environment-and-hdri)
7. The **viewport** — the scene itself, where you select objects and move them
around. What it shows follows the stage tabs above: the editable scene on
**Edit**, the running one on **Preview**. Orbit, zoom and pan it with the
mouse or trackpad.
[Controlling the camera](/basics/creating-your-first-scene#controlling-the-camera),
[Keyboard shortcuts](/basics/keyboard-shortcuts)
## Hana [#hana]
[Hana](/hana-a-canvas-for-interactivity/basics/what-is-hana), the 2D editor, sits
in the same shell with panels suited to 2D work.
1. The sidebar's two tabs: **Agent**, Hana's AI assistant, and **Layers**, the
document tree.
[AI Agent in Hana](/hana-a-canvas-for-interactivity/ai-in-hana)
2. **Pages** divide a file into separate canvases — think of them as the
documents inside one file. Below them, the layer tree lists every frame and
shape on the current page.
[Pages in Hana](/hana-a-canvas-for-interactivity/basics/pages-in-hana)
3. The **toolbar**, running down the left of the canvas: selection, frames,
shapes, 3D shapes, text, comments and the vector tools, with **Play** at the
bottom to run the design the way a visitor sees it.
[Designing in Hana](/hana-a-canvas-for-interactivity/basics/designing-in-hana),
[3D Shapes in Hana](/hana-a-canvas-for-interactivity/interactivity/3d-shapes-in-hana)
4. The **properties panel**. **Transform** and **Shape** cover position and size,
**Layout** turns a frame into an auto layout, **States** and **Events** are
where interactivity is authored, **Fill**, **Stroke** and **Effects** handle
the look, and **Export** ships the frame. Zoom, **Share** and **Export** sit
above it.
[Auto Layout & Constraints](/hana-a-canvas-for-interactivity/basics/auto-layout-and-constraints),
[Interactivity in Hana](/hana-a-canvas-for-interactivity/interactivity/interactivity-in-hana),
[Effects in Hana](/hana-a-canvas-for-interactivity/interactivity/effects-in-hana)
5. The **canvas**, holding as many **frames** as you like side by side. A frame
is a screen or an artboard, and it's also the unit you publish — each one
exports on its own.
[Exporting in Hana](/hana-a-canvas-for-interactivity/assets-and-export/exporting-in-hana)
# Watch intro tutorials (/basics/watch-intro-tutorials)
Start learning about Spline by following this practical tutorial on how to design, model, and add interactivity to objects.
#### Check Spline's Youtube Channel for our full library of tutorials [#check-splines-youtube-channel-for-our-full-library-of-tutorials]
# What is Spline? (/basics/what-is-spline)
Spline is a web-based design tool for creating **interactive 3D and 2D
experiences** — and shipping them to the web, iOS and Android without writing
code.
It runs in the browser, works in real time (there is nothing to render and wait
for), and is multiplayer from the ground up: your files live in the cloud and
several people can edit the same one at once. What you make isn't a picture of a
design — it's the real, interactive thing, ready to embed.
***
## Two editors, one product [#two-editors-one-product]
Spline is two editors that share the same interactivity model, the same
real-time collaboration, and the same publishing pipeline. You can use either on
its own, or move between them.
Modeling and sculpting, a layer-based material system, lights and cameras,
timeline and state animation, particles, physics and Gaussian splatting.
A 2D canvas for interfaces and animated graphics — vector networks, effects,
typography, and real 3D shapes lifted straight out of flat vectors.
***
## Build with AI [#build-with-ai]
Both editors have an **AI agent** that works the editor the way you do. Every
edit it makes is a normal editor edit: it lands in your undo history, it syncs
to collaborators, and you can take over at any point. Nothing it produces is
locked or flattened.
* [**AI Agent**](/spline-ai/ai-agent) — describe what you want and the 3D editor
builds it: objects, materials, lighting, animation, interactivity.
* [**AI Agent in Hana**](/hana-a-canvas-for-interactivity/ai-in-hana) — describe
a screen and Hana designs it, then edit it by hand.
* [**AI 3D Generation**](/generate/ai-3d-generation) — turn a prompt or an image
into a 3D model.
* [**AI Textures**](/spline-ai/ai-textures) — generate textures from a text
prompt.
* [**Spline MCP Server**](/generate/spline-mcp-server) — drive Spline from
Claude, Cursor, Codex and other MCP clients, straight into your open editor
tab.
Every AI feature draws on one pool of monthly **AI credits** included with each
paid plan — see [AI credits](/account/pricing#ai-credits).
***
## Interactivity, with or without code [#interactivity-with-or-without-code]
Most interactivity in Spline needs no code at all. It's built from **states,
events and actions**: give an object a second state, pick what triggers it, and
Spline animates between them. Events cover mouse and keyboard input, scroll,
collisions, distance, drag and drop, game controls and more.
For anything data-driven, **variables** connect your scene to real values, and
API requests, webhooks and real-time endpoints let a scene react to live data or
external services.
When you *do* want code, a file can carry its own HTML document — markup, CSS
and JavaScript layered over the 3D canvas, written in the
[**Code tab**](/interaction-states-events-and-actions/code-tab) next to
**Preview** and **Edit**. An injected `spline` API lets that code read
and write variables, move and create objects, read mesh geometry and supply
custom three.js materials, so animation loops, game logic and web UI can sit
right alongside the no-code event system. It saves with the file, undoes like any
other edit, syncs to collaborators, and ships with public URLs, viewer embeds and
code exports.
Once a scene is published, the **Code API** works from the other direction: your
own site drives the scene with JavaScript, listening for events and controlling
objects from outside.
[How state-based animation works](/interaction-states-events-and-actions/concepts/how-state-based-animation-works),
[Events & Interactivity](/interaction-states-events-and-actions/concepts/events-interactivity),
[Variables](/interaction-states-events-and-actions/variables-and-data/variables),
[Real-time API](/interaction-states-events-and-actions/variables-and-data/real-time-api),
[Webhooks](/interaction-states-events-and-actions/variables-and-data/webhooks),
[Code Tab](/interaction-states-events-and-actions/code-tab),
[Code API for Web](/exporting-your-scene/web/code-api-for-web)
***
## Publish anywhere [#publish-anywhere]
What you build is production-ready, and the same scene can ship to several
places:
* **Web** — a public URL, an embeddable viewer, or a code export (including
React) with a JavaScript API for controlling objects and listening to events.
* **Apple platforms** — native 3D embeds with SwiftUI, generated Xcode
projects, and spatial experiences for visionOS (previewable with
[Spline Mirror](/exporting-your-scene/apple-platform/spline-mirror-for-vision-os)).
* **Android** — native 3D embeds with Kotlin, plus APK and AAB builds.
* **Files** — glTF/GLB, USDZ, STL, images, image sequences and video.
Hana frames export the same way, as a public URL or embed code.
[Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls),
[Exporting as Code](/exporting-your-scene/web/exporting-as-code),
[Native 3D Embeds for iOS](/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os),
[Native 3D Embeds for Android](/exporting-your-scene/android/native-3d-embeds-for-android),
[Exporting in Hana](/hana-a-canvas-for-interactivity/assets-and-export/exporting-in-hana)
Spline also drops into the tools you already use — Webflow, Framer, Figma, Wix,
Shopify, Notion and others. See [Integrations](/integrations/integrating-with-webflow).
***
## Collaborate in real time [#collaborate-in-real-time]
Invite people as editors or viewers, by link or by email, and work in the same
file at once with everything auto-saved. Leave comments directly on a scene,
organize work into workspaces and projects, and browse saved versions of a file.
[Real-time Collaboration in 3D](/sharing-collaboration-and-workspaces/real-time-collaboration-in-3-d),
[File Sharing](/sharing-collaboration-and-workspaces/file-sharing),
[Comments & Feedback](/sharing-collaboration-and-workspaces/comments-feedback-in-3-d),
[Workspaces](/sharing-collaboration-and-workspaces/workspaces),
[Version History](/designing-in-3-d/scenes/version-history)
***
## Stay organized as you scale [#stay-organized-as-you-scale]
**Components** let you reuse an object across a scene and update every instance
from one place; **multi-scenes** hold several 3D spaces in one file, with
transitions between them; **team libraries** share components, materials,
colors, images and audio across a whole team. On the dashboard, folders and
image previews keep files findable.
[Components](/designing-in-3-d/scenes/components),
[Multi-Scenes](/designing-in-3-d/scenes/multi-scenes),
[Team Libraries](/sharing-collaboration-and-workspaces/team-libraries),
[Files View](/sharing-collaboration-and-workspaces/files-view)
***
## Materials as layers [#materials-as-layers]
Materials in the 3D editor are built as a **vertical stack of layers** — color,
gradients, images, noise, glass, reflection, outlines, displacement and more —
much closer to a graphic design tool than to a traditional 3D shader graph. Add,
reorder, mask and blend layers to get the look you want.
[Creating Material Layers](/materials-shading/basics/creating-material-layers),
[Layer Masking](/materials-shading/basics/layer-masking),
[Material Library](/materials-shading/basics/material-library)
***
## Assets, community and desktop [#assets-community-and-desktop]
A built-in **library** of 3D models and scenes is available from the editor, all
cleared for commercial use, alongside material and sound libraries. The
[Community platform](/sharing-collaboration-and-workspaces/community-platform)
is where designers publish, remix and comment on each other's work. And
[Spline for Desktop](/basics/download-spline-for-desktop) adds tabs, system
fonts and MCP support on macOS and Windows.
Spline's interface uses its own open-source typeface, Spline Sans, available on
[Google Fonts](https://fonts.google.com/specimen/Spline+Sans).
***
## Next steps [#next-steps]
How Spline compares to traditional 3D tools like Blender and Maya.
Add objects, set up a material, and publish the result.
A tour of the dashboard and the editor.
What each plan includes, and how AI credits are metered.
# Camera parameters (/cameras/camera-parameters)
Understanding the different parameters of a camera will allow you to simulate different visual effects for your scenes. Cameras, after all, are the way you see objects in the virtual space.
# Depth of Field (DoF) (/cameras/depth-of-field-dof)
Depth of Field (DoF) creates an effect where only objects within a specific distance from the camera are sharp and in focus, while those outside this range appear blurred. This technique focuses the viewer's attention on the subject of interest and adds realism by imitating how the eyes perceive depth.
## How to enable Depth of Field (DoF) [#how-to-enable-depth-of-field-dof]
To enable Depth of Field (DoF) in your scene, first deselect all objects to get the default sidebar on the right. Then under Scene, you’ll find the Effects panel where you can enable post-processing effects.
After enabling Effects, Depth of Field (DoF) will be the first option and can be enabled by pressing the eye icon.
## Understanding Depth of Field (DoF) [#understanding-depth-of-field-dof]
To fully grasp Depth of Field, it's essential to familiarize yourself with its core elements. Find below, an explanation of the elements that shape depth of field.
### Focus Distance [#focus-distance]
Defines the position of the focus point and how far or close it is from the camera.
Use the focus point tool to define the focus point on the viewport.
### Depth of Field (DoF) [#depth-of-field-dof]
Increases or decreases the focus range from the focus point.
### Blur [#blur]
Defines the blur intensity for everything outside the focus range.
# Effects (Post-Processing) (/cameras/effects-post-processing)
Post-processing enables global effects on your scene.
To enable post-processing effects, first deselect all objects to get the default sidebar on the right. Then under Scene, you’ll find the Effects panel where you can enable post-processing effects.
By default, all post-processing effects will be disabled but can be toggled ON/OFF by pressing the eye icon.
To change each effect settings press on the settings icon.
At this moment Spline has the following Post-Processing effects:
* **Depth of Field**
* **Pixelation**
* **Aberration**
* **Bloom**
* **Hue**
* **Brightness**
* **Vignette**
* **Noise**
If you have ideas for new effects, [send us your feedback.](https://airtable.com/shryPwf6CV6NF65bG)
#### Performance [#performance]
Using many post-processing effects can have an impact on the performance of your exported scene. Make sure to use it only when needed and avoid combining multiple effects enabled at the same time.
# Working with Cameras (/cameras/working-with-cameras)
#### Orbit the camera [#orbit-the-camera]
| | macOS | Windows |
| -------- | ----------------------- | -------------------- |
| Mouse | `Option + Click & Drag` | `Alt + Click & Drag` |
| Trackpad | `Option + Tap & Drag` | `Alt + Tap & Drag` |
#### Zoom the camera [#zoom-the-camera]
| | macOS | Windows |
| -------- | --------------------------------- | --------------------------- |
| Mouse | `Scroll` or `Cmd + Scroll` | `Scroll` or `Ctrl + Scroll` |
| Trackpad | `Pinch` or `Cmd + 2 Finger Swipe` | `Pinch` or `Ctrl + Swipe` |
| | | |
#### Pan the camera [#pan-the-camera]
| | macOS | Windows |
| -------- | ---------------------- | ---------------------- |
| Mouse | `Space + Click & Drag` | `Space + Click & Drag` |
| Trackpad | `2 Finger drag` | `2 Finger drag` |
| | | |
You can find Spline's camera controls on the bottom center of the Viewport.
To navigate between views, press the axis points.
By hovering the view helper you'll be presented with two extra options.
Quickly reset the view of your scene or go into an Isometric view.
Below the view helper, there are two different camera views to choose from.
Orthographic and Perspective.
* **Orthographic**: All angles are parallel.
* **Perspective**: All angles change based on the distance from the camera to the object.
Here's a video using the view helper to quickly change views and changing between Orthographic and Perspective views. (Shortcut `M`).
The zoom value can be found on the toolbar. By pressing it you'll find the zoom options.
# Working with Fog (/cameras/working-with-fog)
Adding fog to your scene is a great way to create depth.
To start make sure there are no objects selected by pressing anywhere on the viewport.
Then go to the Fog panel on the right sidebar and enable it.
Using the same color as the background is the best way to achieve the effect of actual fog.
There's also the option to change the color for more creative freedom.
The **Near** and **Far** values are used to change the depth of the Fog. The closer both are to each other the thicker the Fog transition is.
## Fog types [#fog-types]
The panel's type switch picks how the fog is computed:
* **Linear** (the default) fades objects purely by their distance from the camera, between **Near** and **Far**. The fog looks the same from every camera angle.
* **Height** is a realistic ground fog: a fog layer that is densest at its base and thins out with altitude. Because the fog is accumulated along each view ray, a camera looking down from above sees an almost clear scene, while a camera at ground level looks through the whole layer — the way real fog behaves.
* **Both** stacks the two: a Linear distance haze on top of the Height ground layer, sharing one fog color. Use it when distant content should always melt away (even seen from above) while the ground still holds a realistic fog layer.
Height fog is controlled with three values, all in world units:
* **Distance** — roughly how far you can see through the fog at its base before objects fade out. Smaller values make a thicker fog.
* **Thickness** — how tall the fog layer is. Small values hug the fog to the ground; large values build a taller layer that takes longer to rise out of.
* **Base** — the world height (Y) of the layer's floor, where the fog is densest.
# How to optimize your scene (/exporting-your-scene/how-to-optimize-your-scene)
Note: Spline is constantly improving and many optimizations are made over time. It is likely that some of the suggestions here won't be needed in the future.
## Performance Panel [#performance-panel]
To help with optimization, the Performance Panel offers some key metrics and opportunities for improvement to keep the load times and performance of the scene fast and efficient.
*You can access the Performance Panel from the Export Panel.*
The performance panel provides the following metrics to help you identify optimization opportunities in your scenes:
* Export Size Estimation.
* Loading Time Score.
* Number of Objects.
* Number of Clones.
* Number of Booleans.
* Number of Total Polygons.
* Number of Object Polygons.
* Number of Cloned Polygons.
* Number of Materials (Non-Assets)
* Number of Materials (Assets)
* Number of Audio Assets.
* Number of Lights.
* Number of Post-processing Effects.
* Number of Textures.
Values for **Export Size** and **Loading Time** are measured with an average internet speed and are estimated. Actual values may vary.
## Opportunities to optimize [#opportunities-to-optimize]
Below Metrics, there are Opportunities, which are suggestions for improvement with actions inside them based on the state of the scene.
There are three types of Opportunities:
* Red: Most important to improve performance and the overall state of the scene.
* Yellow: Important for improvement, not critical.
* Gray: Suggestions to keep the scene clean and remove unused assets. Not directly related to performance.
To keep a good performance, follow these suggestions when exporting and embedding your designs:
### 🪛 Reduce the number of polygons [#reduce-the-number-of-polygons]
In Spline, all objects are geometries formed from triangular polygons. Two triangles form a square (quad). The fewer the number of polygons, the fastest it will be rendered/loaded on the screen.
1. Usually, smoother objects have higher amounts of polygons which increases load time.
2. On parametric objects (like the sphere, cube, cylinder, etc). You can control the number of ‘Sides’. You can reduce the sides to increase performance.
3. When working with smooth subdivision objects.
* Avoid using more than 3 subdivision levels unless you really need them. Most objects look good with only 1 or 2 subdivision levels.
* Avoid increasing the **base subdivisions** unless you need to. This button will ‘bake’ or apply the subdivision and you won't be able to return to the original version.
* If you are importing objects from other software or libraries make sure you use an optimized and lower polygon version.
### 🗜️ Use geometry compression on export [#️use-geometry-compression-on-export]
You can use the Compression settings to improve the loading/performance of your exported scenes. Please be aware that higher levels of compression can also reduce precision or quality in the geometries.
1. Click on “Export” on the top toolbar
2. Under PublicURL, Viewer or Code Export (depending on your desired export type) switch to the “Play Settings” tab
3. Scroll all the way down to find the “Compression” settings
4. Turn it on with the switch
5. From the “Geometry Quality” dropdown select “Performance” to optimize for improved performance.
6. Control the image compression level. This can help you reduce the overall size of scenes that use textures substantially, in some cases making your file sizes 4x smaller.
### ✂️ Reduce the number of objects & keep materials simple [#️reduce-the-number-of-objects--keep-materials-simple]
Having lots of objects will increase the loading times and also reduce the performance (more objects = more polygons, more materials, etc).
1. Delete objects that aren’t visible (like inside another object, or behind other objects). If you think people won't be seeing these objects in the final experience, you can delete them.
2. Avoid adding images/textures to your materials if possible (images, especially big ones, add more time to load).
3. Use simple lighting. We recommend working with less than 3 lights per scene. Too many lights can reduce the performance of the scene.
4. Try to keep the materials simple, don’t use too many layers if not necessary.
5. Post-processing effects can reduce performance (especially if you activate many effects at the same time).
### ⛘ Booleans Performance [#-booleans-performance]
Boolean operations can end up becoming very expensive in terms of performance. Below are some suggestions of what to do to mitigate performance issues related to booleans.
1. Reduce the sides of the objects involved in boolean operations. (Instead of using a Sphere with sides of 64, try reducing them. Usually, there won’t be a very noticeable difference)
2. Baking the boolean object using the “Apply & Edit” option. (You can save a copy of your editable boolean object and hide it, so it doesn’t load in the scene)
3. Instead of animating the Size property, animate the Scale instead, it is more performance efficient.
To learn more about booleans visit the [Boolean Operations](/designing-in-3-d/modeling/boolean-operations)️ doc.
When working on scenes with many repeated objects, you can use Components and instances to optimize your scene.
Components are reusable objects. They allow you to use a single object and create multiple instances of it. Each instance is a virtual copy of the original (instead of a duplicate).
This means that if you have 1 component and 100 instances, the scene will only store one geometry (instead of 101 geometries).
### 🧱 Use Material and Image assets to optimize performance [#use-material-and-image-assets-to-optimize-performance]
Similar to components, assets are reusable items. A single asset that can be assigned to multiple objects, while still maintaining a single origin.
Any new geometry on Spline by default contains a non-asset material. This means that if you have 10 objects, you will have 10 materials. This can be handy if you want each object to have different styles. But if all of them are meant to look the same, then it is not efficient.
Instead you can convert the material into an asset and reuse the asset in the 10 objects. This optimizes the amount of data and processing for your scene.
### 🔧 Optimizing your website performance when using 3d scenes [#optimizing-your-website-performance-when-using-3d-scenes]
You can think about 3d scenes the same way you think about images or videos in regard to performance. If your website contains many images or videos and you add a very complex 3d scene on top of that, it is likely that the performance will be reduced.
Here are some tips on how to get best performance when adding 3d to your websites:
* If your website is already very complex (with a lot of content), consider optimizing it before adding a 3d scene from Spline, or make sure your 3d scene is simple enough.
* Reduce the amount of images/textures in your 3d scene and in your website to improve loading times.
* Follow the recommendations from the Performance panel to optimize your scene (reduce objects, materials, etc).
### 🌳 Avoid multiple embeds per web page [#avoid-multiple-embeds-per-web-page]
While it is possible to embed multiple Spline scenes on a single website page, **we recommend keeping it simple and only use one or two embeds per page.**
If your experience requires having multiple spline embeds per page, here are some considerations to keep in mind:
* Avoid multiple embeds of very complex 3d scenes (check the performance indicator on export settings).
* Avoid using more than 3 embeds per page.
* Use the Spline Viewer instead of the iFrame embeds. The spline-viewer allows lazy-loading, which offers better performance when using multiple embeds in a single page.
* Avoid using multiple embeds on full-screen (the bigger the canvas, the more pixels are needed to render).
# Play Mode (/exporting-your-scene/play-mode)
Play Mode is where you can see your scene in full glory. Rotate, Pan, and Zoom your camera or see your interactions and animations come to life.
Play Mode shows what you'll see after publishing or exporting your scene from the **Export** panel.
*Entering Play Mode and rotating the camera in a scene with animated objects. Press Option + Drag.*
### Responsive Switcher [#responsive-switcher]
From the Play Mode, click on the resize preview toggle to switch to responsive mode. You can change the width and height of the scene to preview how it would behave in real time embeds when changing the browser/window size.
# Play Settings (/exporting-your-scene/play-settings)
The Play Settings let you control a lot of different properties of your scene in Play Mode or when you export your scene.
Find Play setting by clicking the export button on the toolbar and selecting any of the export types that are using Play Settings:
#### Web [#web]
* [Exporting as Public URLs](/exporting-your-scene/web/exporting-as-public-ur-ls)
* [Exporting as Spline Viewer](/exporting-your-scene/web/exporting-as-spline-viewer)
* [Exporting as Code](/exporting-your-scene/web/exporting-as-code)
#### Apple Platform [#apple-platform]
* [Native 3D Embeds for iOS](/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os)
* [iOS App Generation](/exporting-your-scene/apple-platform/i-os-app-generation)
* [Spline Mirror for visionOS](/exporting-your-scene/apple-platform/spline-mirror-for-vision-os)
#### Android Platform [#android-platform]
* [Native 3D Embeds for Android](/exporting-your-scene/android/native-3d-embeds-for-android)
* [Android Package (APK)](/exporting-your-scene/android/android-package-apk)
* [Android App Bundles (AAB)](/exporting-your-scene/android/android-app-bundles-aab)
Here’s an overview of all the settings you can control for your scene.
**Main Scene** **→** select which scene should be initially loaded for the experience.
**Camera** **→** Select which camera is the main camera for your scene. This is quite useful when collaborating with others, so everyone sees the same final result in Play Mode or when exporting.
If you have a **Hobby**, **Pro** or **Max** subscription you can remove the Spline logo from Public URLs, Viewer embeds and Code Exports.
To remove the Spline logo from Apple and Android exports, you'll need an active **Pro** or **Max** subscription.
**BG Color** **→** Hide background color of your scene to embed with a transparent background.
**Page Scroll** **→** Setting Page scroll to Yes will allow the website to be scrolled. Setting it to No will disable scrolling. This applies to desktop devices.
**Cursor** **→** Default will use system cursor, none will hide the cursor.
**Orbit, Pan, Zoom** → Decide if you want to lock movement on your scene by allowing **Orbit**, **Pan** and **Zoom** or not.\*\*
**Soft orbit →** Make orbiting your scene smoother with **Soft Orbit** set to **Yes**.
Touch settings can adjust the way the scene can be interacted with on touch screens.
**Orbit / Pan →** Following options are available with which Orbit and Panning can be controlled on touch screens: 1 Finger, 2 Fingers, 3 Fingers, Disabled
**Zoom →** If set to pinching, zoom is possible via the pinch gesture. None will disable zooming on touch screens.
**Page Scroll →** If set to yes page will scroll when swiped on the Spline scene, if set to No page scroll will be ignored when swiping on top of the Spline scene.
Add an hover effect on your whole scene with the **On Hover** setting.
**Behavior →** Orbit Camera or Pan Camera.
**Sensitivity →** The sensitivity value will make the effect stronger or more subtle.
**Damping →** Controls how quickly the effect settles; lower values make it snappier, higher values smoother.
**Reset if →** Hover out (On Hover will work every time), No Reset (On Hover will only work once)
**Orbit Limits** and **Pan Limits** will force the camera Orbit and Pan to be constrained to a specific limit from the initiate position of the main camera.
**Direction →** In which direction should the limit be applied (horizontal, vertical, or both).
**Up / Bottom / Left / Right →** Set precise Orbit and Pan Limits for each direction.
**Soft Limit →** Will define the behavior of the camera snapping back to its initial position when released.
* **None** → will be more snappy.
* **Bounce** → will add a bit of bounce.
* **Ease →** will have a more smooth behavior.
**Zoom Limits** can control the minimum and maximum percentage of zoom allowed for the main camera.
Animated Turntable lets you add an automatic rotation to your scene on the Y axis.
**Speed →** defines the speed of the rotation.
**Direction →** defines the direction of the rotation.
Defines the behavior of events using click or touch on an object (e.g.: Mouse Down event).
**Stop At Object →** If an object is blocked by another object, only the non-blocked object can be clicked.
**Passthrough object →** If an object is blocked by another object, the blocked object can be clicked.
**Geometry Quality →** will define the compression method
* **Performance →** compression will be optimized for performance
* **Default →** will set compression where both performance and quality are considered
* **Quality →** compression will be optimised for visual appearance and quality.
**Image Quality** → Controls the image compression level. This can help you reduce the overall size of scenes that use textures substantially, in some cases making your file sizes 4x smaller.
**Preload →** If set to Yes loading times of big scenes will be improved.
**Renderer →** Chooses which graphics pipeline the exported scene uses.
* **Auto** *(recommended)* → Renders on WebGPU where the browser supports it, and falls back to WebGL everywhere else. This is the safest choice for a public audience.
* **WebGPU** → WebGPU only. Browsers without WebGPU support see a "requires WebGPU" notice instead of falling back, so only pick this when you control the audience's browser.
* **WebGL** → The classic WebGL pipeline only.
New scenes default to WebGPU. Scenes exported before this setting existed keep
the Auto behaviour.
# AI 3D Generation (/generate/ai-3d-generation)
AI 3D Generation is a new feature in Spline that allows anyone to transform textual descriptions and 2D images into 3D models with the help of AI.
**AI 3D Generation** is a paid feature. It runs on your workspace's monthly **AI credits**, included with every paid plan — **Hobby**, **Pro** and **Max**. See [AI credits](/account/pricing#ai-credits) for the monthly allowance on each plan.
***
## Where to find it [#where-to-find-it]
Go to **Generate** from your dashboard. The left rail holds the generate views:
**Discover** to browse what others have made (where it opens), **3D** and
**Image** for the kind of thing you're generating, and **Assets** for everything
you've generated. The rail starts as icons — the toggle in each view's header
widens it to show the labels — with a **Settings** shortcut at the bottom.
You can also generate from inside the 3D editor — press the **AI** button on the
toolbar and choose **AI Generate**, and the finished mesh drops straight into your
open scene.
***
## Generating a model [#generating-a-model]
1. **Type what you want** in the prompt bar. It reads *"Describe a 3D model to
generate"* when you're set to 3D.
2. **Set the Output type** if needed. The prompt bar switches between **3D** and
**Image** — leave it on 3D for a model.
3. **Optionally add a reference image** with **Add a reference image** next to the
prompt. Front-facing shots of a single object work best.
4. **Pick a model**, or leave the default — see
[Choosing a model](#choosing-a-model).
5. **Send it.** You'll get a set of image previews — pick the one you like best and
Spline builds the 3D model from it.
If none of the previews look right, adjust your prompt and send again rather than
picking the closest one.
### What it costs [#what-it-costs]
The options panel shows an **Estimated cost** before you send. Generations use your
workspace's monthly [AI credits](/account/pricing#ai-credits); a banner appears as
you approach your limit.
***
## Choosing a model [#choosing-a-model]
The **Model** dropdown sets which engine builds your 3D model.
| Model | Use it for |
| ----------------------------------- | ---------------------------------------------------------------------------- |
| **Hunyuan3D** *(default)* | Balanced detail and speed |
| **Hunyuan 3.1 Pro** | The sharpest, most detailed geometry |
| **Trellis 2** | Shapes that pass through each other — chains, knots, handles, crossing limbs |
| **Meshy** | A clean result you can use with little cleanup |
Leave it on **Hunyuan3D** unless you have a reason not to.
### Try more than one [#try-more-than-one]
You can run the **same image** through several models and keep all the results. A
switcher appears under the preview so you can flip between them and keep the best
one — switching is instant and doesn't use more credits.
***
## Reviewing the result [#reviewing-the-result]
Use the toolbar above the preview to check the model properly before you commit to
it:
| Control | What it does |
| ------------------ | ------------------------------------------------- |
| **Wireframe** | Shows the mesh structure |
| **Clay mode** | Hides colour and texture so you can see the shape |
| **Preview maps** | Shows the generated textures |
| **Environment** | Changes the lighting |
| **Auto-rotate** | Spins the model so you can check every side |
| **Download model** | Saves the model to your machine |
| **Open in editor** | Opens the model in a Spline scene |
Check it in **Clay mode** — texture can hide an uneven shape. Try a different
**Environment** too, since your scene's lighting won't match the preview's.
### Getting it into your scene [#getting-it-into-your-scene]
**Open in editor** puts the model into a Spline scene, where you can position, style
and animate it like anything else. If you generated from inside the editor, it's
added to your open scene automatically.
Generated models have more detail than hand-built ones, so a scene with several of
them can slow down. See
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene).
***
## Finding your earlier generations [#finding-your-earlier-generations]
**Assets** in the left rail keeps everything you've made in one grid, with search
and a filter for **All**, **Images** or **3D**. Nothing is deleted, so generate
freely and pick your favourite later.
**Discover** is a feed of generations you can browse for ideas, filtered by category
— characters, creatures, vehicles, architecture, furniture, food, nature, props and
objects.
***
## Components of a Prompt [#components-of-a-prompt]
### Text to 3D [#text-to-3d]
Text to 3D allows you to create 3D models from textual descriptions. Simply describe an object with words, and AI will interpret these descriptions and generate a 3D model that matches them.
### Image to 3D [#image-to-3d]
Image to 3D converts 2D images into 3D models. By analyzing an image uploaded, it uses algorithms to estimate depth and structure, then constructs a 3D representation of the depicted scene or object. For better results, the image should be a front-facing image of an object.
### Text + Image to 3D [#text--image-to-3d]
With Spline you can use text + image in a single prompt, combining both textual descriptions and 2D images to create 3D models. This approach leverages the strengths of both inputs: the image provides a visual reference, while the text can specify other details that might not be clear or visible in the image.
***
## Prompt Recommendations [#prompt-recommendations]
Follow this quick guide to learn how to get the best results when using Spline AI.
### Focus on a single object [#focus-on-a-single-object]
It’s better to focus on a single object rather than trying to generate a composition in one go.
### Close-ups will offer more details [#close-ups-will-offer-more-details]
A close-up of an object or face will generate better details while a full body character might lose details on the face.
### Focus on objects that don’t require high-precision [#focus-on-objects-that-dont-require-high-precision]
Models with more organic shapes will generate better results, while objects with very sharp edges might not look as good.
***
## Limitations [#limitations]
The development and research of artificial intelligence (AI) is an ongoing process with several factors that can limit its capabilities. You will likely find bugs and some issues, but we are improving the system daily. Your feedback can help us improve it.
***
## Questions & Answers [#questions--answers]
## Can I use it for free? [#can-i-use-it-for-free]
AI 3D Generation draws on your workspace's monthly **AI credits**, which are included with every paid plan — there is no separate AI subscription. Your account must be in good standing and active. Generating 3D assets consumes credits for both image previews and mesh generation, so a single model can cost more than one generation. See [AI credits](/account/pricing#ai-credits) for each plan's monthly allowance and how to add more.
## Do I need a high-spec device to use Spline AI 3D generation? [#do-i-need-a-high-spec-device-to-use-spline-ai-3d-generation]
Spline AI 3D Generation runs in the cloud and it does not require special hardware. Spline AI 3D generation works on any device that can run Spline.
## How is this version of Spline AI different from the previous one? [#how-is-this-version-of-spline-ai-different-from-the-previous-one]
The new version of Spline AI is focused on making object generation easier for everyone. Since AI is an ongoing research field, changes are expected over time as we find better ways to integrate AI within Spline to improve the 3D creation workflow. We will continue our research and development to make 3D more accessible for everyone.
## How will Spline AI 3D Generation use my data? [#how-will-spline-ai-3d-generation-use-my-data]
We take privacy very seriously. We only collect data related to your prompts if you decide to share it as feedback. All user data and Spline AI data is handled by Spline, on our own servers.
# Spline MCP Server (/generate/spline-mcp-server)
The **Spline MCP Server** connects AI coding tools like **Claude**, **Cursor**, **Codex**, and **Antigravity** directly to your Spline editor. Using the [Model Context Protocol (MCP)](https://modelcontextprotocol.io), any MCP-compatible client can build and edit **Spline 3D scenes** and **Hana designs** for you — creating files, generating 3D models and images, writing layouts, and running edits — all inside the app you already have open.
Required to use the MCP server. Available for macOS and Windows.
The Spline MCP Server ships **built into the Spline desktop app**, so the desktop app is **required** — the MCP connection does not work from the browser. There's no separate package to install: downloading and opening the desktop app is all the setup the server needs.
***
## How it works [#how-it-works]
The Spline MCP Server bridges your AI coding tool and the live editor tabs in the Spline desktop app:
```
You ──► AI coding tool ──► Spline MCP Server ──► your open editor tab
prompt (Claude, Cursor, (bundled with the app) (Spline 3D or Hana)
Codex, …)
```
* You describe what you want to your AI tool (for example, *"add a floating island scene"*).
* Your AI tool works out which Spline tools to call, and sends them as structured requests — a tool name plus arguments, not your prompt text.
* The Spline app routes each call to the right editor tab, creating a file for you if none of that kind is open.
* The tab runs the call against your live document and returns the result, and your AI tool keeps calling until the task is done.
Because the calls run inside the editor tab, your AI tool can reach the scene, the objects, materials, cameras, and Spline's AI generation features.
**One server, two surfaces.** The same connection drives both products. Requests are routed automatically by kind:
* **3D requests** (scenes, meshes, cameras, lighting) go to your Spline 3D tab.
* **2D / Hana requests** (websites, app screens, UI, layouts) go to your Hana tab.
Everything runs **locally on your machine** over `127.0.0.1`. The MCP server never exposes your work to the internet — the only place your requests and results travel is between the Spline app and the AI client you connected.
***
## Requirements [#requirements]
* The [**Spline desktop app**](https://spline.design/download) (macOS or Windows) — **required**, since the MCP server is bundled inside it and can't run from the browser.
* An **MCP-compatible AI coding tool**:
* **Claude Code**, **Claude Desktop**, **Cursor**, **VS Code**, **Antigravity** and **ChatGPT** — configured automatically.
* **Windsurf** and other MCP-compatible clients — a quick one-time setup, see [Connecting other clients](#connecting-other-clients).
***
## Setup [#setup]
### Automatic setup [#automatic-setup]
When you install and open the Spline desktop app, it registers the MCP server
with every supported client it finds installed. No config editing required.
| Client | Where Spline writes the server |
| -------------- | ----------------------------------------------------------------- |
| Claude Code | `~/.claude.json` |
| Claude Desktop | `claude_desktop_config.json` (including the Windows MSIX install) |
| Cursor | Cursor's MCP config |
| VS Code | VS Code and VS Code Insiders |
| Antigravity | Antigravity's MCP config (current and legacy paths) |
| ChatGPT | The `codex` CLI bundled in the ChatGPT desktop app (TOML config) |
1. [**Download the Spline desktop app**](https://spline.design/download) (macOS or Windows) and open it at least once. *This step is required — the MCP server lives inside the app.*
2. Restart your AI client so it picks up the new server. Most clients only load MCP servers at startup.
3. That's it — Spline's tools are now available to the agent.
You can manage this per client in Spline's **MCP settings**, which lists every
supported client with its own toggle plus a global switch, and shows the exact
setup steps for whichever one you expand.
To confirm the connection, the tools will appear in your client namespaced under `Spline` (for example, `mcp__Spline__3d_run_code` or `mcp__Spline__2d_write_html`).
### Connecting other clients [#connecting-other-clients]
For an MCP-compatible tool Spline doesn't auto-configure — **Windsurf**, for
example — copy the generated server entry into that tool's MCP config. Spline's
MCP settings has an **Other agents** panel that gives you exactly this entry to
paste, with the paths already resolved for your install.
You'll find the entry the app created under the `Spline` key in:
* **Claude Code** — `~/.claude.json`
* **Claude Desktop** —
* macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
* Windows: `%APPDATA%\Claude\claude_desktop_config.json`
It looks like this (the exact paths are specific to your machine and install):
```jsonc
{
"mcpServers": {
"Spline": {
"type": "stdio",
"command": "/path/to/Spline.app/.../MacOS/Spline",
"args": ["/path/to/spline-mcp.cjs"],
"env": {
"ELECTRON_RUN_AS_NODE": "1"
}
}
}
}
```
Copy that `Spline` entry into the MCP configuration of the tool you want to use, then restart it. Most tools accept this same `command`/`args`/`env` shape; check your tool's MCP docs if its config format differs.
Because the app keeps its own entries healthy across updates and moves, the simplest way to stay current is to let Spline manage the clients it supports and copy the entry from one of those whenever a path changes.
***
## Using it [#using-it]
1. Open the **Spline desktop app** and keep it running.
2. In your AI client, just ask for what you want. You don't have to open a file first — if no matching file is open, the agent creates a new one and opens it in a tab.
**Example prompts**
* *"Create a 3D scene with a rotating glass sphere on a pedestal and a soft studio light."*
* *"In Hana, design a clean pricing page with three tiers and a call-to-action."*
* *"Generate a 3D model of a low-poly tree and add it to my scene."*
* *"Take the dashboard screen from `src/app/dashboard/page.tsx` and rebuild it in Hana so I can redesign it."*
* *"I refined the layout in Hana — export it and update the matching component in my repo."*
The agent picks the right surface automatically: design requests go to Hana, 3D requests go to Spline 3D. If you have both open, calls are routed to the most recently focused tab of the matching kind.
As the agent works, the frame or scene it's editing lights up so you can follow along in real time. You can connect several sessions at once — they all route to the same running editor.
### What the agent can do [#what-the-agent-can-do]
Once connected, the agent can, among other things:
**In Spline 3D**
* Create new 3D files and build or edit scenes.
* Generate 3D models and images with Spline AI.
* Inspect the scene and objects, run scene edits, set the camera view, and capture screenshots.
* Write the code layer over the canvas — HUDs, interfaces and game logic. See the **Preview / Edit / Code** tabs and [AI Agent](/spline-ai/ai-agent).
**In Hana**
* Create new Hana files and design or rebuild frames (web pages, app screens, UI).
* Add, move, duplicate, resize, recolor, and update objects.
* Generate images, work with 3D shapes, apply effects, and export designs.
### Working with your existing codebase (Hana) [#working-with-your-existing-codebase-hana]
Because your AI coding tool is already working inside your repository, Hana can sit right in your design-to-code loop instead of being a separate silo:
* **Bring a screen into Hana.** Point the agent at a page or component in your repo, and it rebuilds that screen as a live Hana frame — it translates the markup into Hana's supported HTML + CSS (flexbox) subset. From there you can redesign it visually on the canvas.
* **Build screens in Hana, in code.** You can also have the agent author a frame directly from HTML + CSS, so a screen you describe in code shows up as an editable Hana design.
* **Push your canvas edits back to code.** After you tweak the design in Hana, the agent exports the frame's *current* state back to HTML + CSS and translates those changes into your framework — Next.js, Vue, plain HTML, and so on. Every exported element keeps a stable reference back to its Hana object, so the agent can map a visual change to the right place in your source.
This round-trip works within Hana's supported HTML + CSS subset. Complex or framework-specific markup may need the agent to reconcile the exported HTML against your existing components rather than replacing them wholesale.
***
## MCP settings [#mcp-settings]
Open **Settings → MCP** in the Spline app. Every supported client gets its own
row with a toggle, so you can connect Claude Code but leave Cursor alone.
Expand a row to see the setup steps for that specific client.
Turning a client **off** removes Spline's entry from that client's config and
stops it being re-added; turning it back **on** re-registers it. Agents only
load their MCP servers at startup, so Spline reminds you to restart the one you
just switched on.
If you delete the `Spline` entry from a config by hand, Spline treats that as a
deliberate opt-out and won't put it back.
### Connection status [#connection-status]
Each row shows whether that client is currently talking to Spline:
| What you see | What it means |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Connected** | The client has a live session with Spline right now |
| **Starts on use** | Registered and working, but this client only launches the connection when you actually use it — expect this for **VS Code** and **ChatGPT** |
| No label | Registered and idle |
**"Starts on use" is not a problem.** VS Code and ChatGPT don't start the
connection when they open, so send a message in the client and it connects.
There's also an MCP status indicator in the app's sidebar — click it to jump
straight to these settings.
***
## Privacy & security [#privacy--security]
* The server binds to **`127.0.0.1`** only — it is never reachable from the network.
* Connections are gated by an **origin allowlist**, so arbitrary web pages can't reach it. There are no tokens to manage.
* Your scenes and prompts stay between the Spline app and the AI client you connected. (Spline AI generation features used by the agent run in the cloud, the same as when you use them in the editor.)
***
## Troubleshooting [#troubleshooting]
Make sure the **Spline desktop app is installed and has been opened at least once**, then fully restart your AI client so it reloads its MCP servers. Confirm a `Spline` entry exists in your client's config (see [Connecting other clients](#connecting-other-clients) for the file locations).
Keep the Spline desktop app running while you work. Forwarded calls time out after about 60 seconds, so very long operations may need to be retried. Only one editor connection is active at a time — the most recent connection wins.
That's expected for **VS Code** and **ChatGPT** — they only open the connection when you actually use them, rather than at startup. Send a message in that client and it will connect.
Deleting the app can leave its config entry behind. Turn that client **off** in **Settings → MCP** *before* uninstalling, or remove the `mcpServers.Spline` entry from its config by hand. Reinstalling Spline fixes the entry automatically.
# AI Agent in Hana (/hana-a-canvas-for-interactivity/ai-in-hana)
Hana's **AI Agent** designs for you. Describe a screen and it builds it on the
canvas: layout, type, colour, effects, states and interactions. Ask for changes
and it edits what's already there.
Everything it makes is **ordinary Hana content** — real frames, text, shapes and
vectors you can select, restyle and rearrange by hand. Nothing is locked or
flattened.
Looking for the 3D editor instead? It has its own assistant — see
[AI Agent](/spline-ai/ai-agent).
The agent runs on your workspace's monthly **AI credits**, included with every
paid plan. See [AI credits](/account/pricing#ai-credits).
***
## Where to find it [#where-to-find-it]
Open the AI panel from the left of the Hana editor and type into the prompt box
at the bottom.
The prompt tells you what it expects:
| When | Placeholder |
| ---------------------------- | --------------------------------------------------- |
| Empty canvas | *Describe your design…* |
| After it has built something | *Describe changes… (e.g. "Make the button red")* |
| While it's working | *Describe another change… (starts a parallel chat)* |
Along the bottom of the panel: the **paperclip** attaches a reference, and the
**model** and **effort** pickers sit beside it. Above the prompt box you'll find
your selection chips, any attachments, and a credits banner once you pass 90% of
your monthly allowance.
At the top right of the panel, **Chat history** lists your previous conversations
in this file, and **New chat** starts a fresh one.
***
## Writing a good prompt [#writing-a-good-prompt]
* **Describe the screen, not the shapes.** "A settings screen with a profile row,
three toggles and a sign-out button" gets much further than a list of rectangles.
* **Name the platform if it matters.** Say "iOS app screen" or "marketing landing
page" and the layout conventions follow.
* **Select first, then say "this".** Whatever you have selected becomes the target
of an unqualified change; the chips above the prompt box show exactly what the
agent will act on.
* **Iterate in small steps.** "Tighten the spacing", "make the header sticky",
"use a warmer palette" land more predictably than one long brief.
### Attaching references [#attaching-references]
The **paperclip** attaches an **image or video** — a screenshot to match, a brand
reference, a photo to build around. You can also **drag files straight onto the
panel**; it shows *Drop images or videos to attach* while you drag.
You can attach a **3D model** the same way. Drop a glTF file onto the panel and the
agent can place it in the design — see
[3D Shapes in Hana](/hana-a-canvas-for-interactivity/interactivity/3d-shapes-in-hana).
***
## What the agent can do [#what-the-agent-can-do]
* **Build and edit frames** — layout, type, colour, strokes, fills and spacing.
* **Add effects** — the blurs, shadows, noise and glass treatments covered in
[Effects in Hana](/hana-a-canvas-for-interactivity/interactivity/effects-in-hana).
* **Wire interactivity** — states, events and actions, so a prototype responds to
clicks and hovers. See
[Interactivity in Hana](/hana-a-canvas-for-interactivity/interactivity/interactivity-in-hana).
* **Generate images** — ask for imagery and it creates and places it, rather than
you generating separately and importing.
* **Fix what you point out** — "the button is overlapping the title" or "this text
is too small" works, and it corrects the frame in place.
***
## Asking for several screens at once [#asking-for-several-screens-at-once]
The agent can design **more than one frame in a single request**. Ask for
"three landing pages", "a mobile and a desktop version" or "5 variations" and it
creates a frame for each and builds them **at the same time**, not one after
another.
You'll see an empty frame appear for each screen as soon as it starts, so you can
watch them fill in parallel. Each finished frame then gets its own review pass to
catch overlaps and visual mistakes.
**A long description is still one screen.** Listing lots of sections, widgets or
features — "a dashboard with a sidebar, a chart, a stats row and a settings
panel" — describes *one* design made of those parts, not four frames. You get
several frames only when you ask for several **screens**, **designs** or
**variants**.
Asking for a variant of something that already exists — "a dark mode of this", "a
mobile version" — matches the size of the frame you're referring to. See
[Pages in Hana](/hana-a-canvas-for-interactivity/basics/pages-in-hana).
***
## Running several prompts at once [#running-several-prompts-at-once]
Send another prompt while the agent is working and it **starts a separate chat**
rather than waiting — the prompt box tells you so, reading *"Describe another
change… (starts a parallel chat)"*.
That makes it practical to explore two directions side by side. Each chat keeps its
own history, and **Chat history** lets you switch between them.
***
## Editing images on the canvas [#editing-images-on-the-canvas]
Two image operations live on the object itself rather than in the panel. Select an
image and right-click:
* **Remove Background** — cuts the subject out, turning the image into a reusable
asset for stickers, product shots or layered compositions.
* **Upscale Image** — raises resolution and sharpness, for high-density screens or
print.
***
## Limitations [#limitations]
* **It's better at intent than at exact numbers.** For a precise pixel value, set it
yourself in the inspector.
* **Judge the result, then refine.** The first pass gets you a structure worth
editing, not usually a finished screen.
# CAD to Spline: Optimization Best Practices (/importing-content/cad-to-spline-optimization-best-practices)
This guide outlines best practices for converting CAD models from tools such as **SolidWorks, Fusion 360, Solid Edge, Rhino**, and others into optimized 3D assets suitable for **real-time, web-based experiences**. These guidelines help ensure efficient performance for product showcases, interactive demos, configurators, and more.
For general tips on optimizing scenes in Spline, check out the [**How to optimize your scene**](/exporting-your-scene/how-to-optimize-your-scene) guide.
### 🧱 1. Prepare and Simplify Your CAD Model [#-1-prepare-and-simplify-your-cad-model]
#### Clean Up Geometry [#clean-up-geometry]
In your CAD software:
* **Remove unnecessary details** that won't be visible in the final 3D scene (e.g., internal parts, small screws, fine fillets).
* **Hide or delete hidden components** to avoid exporting redundant geometry.
* **Consolidate geometry** where possible:
* Merge similar or repeated parts into a single object.
* Standardize materials and colors — identical objects should use the same material definition.
***
### 📤 2. Export from CAD as Mesh [#-2-export-from-cad-as-mesh]
#### General Export Strategy [#general-export-strategy]
1. **Convert NURBS/solids to mesh:**
* Most CAD programs offer a way to convert solids into mesh geometry (polygonal).
* Look for settings like *Mesh Refinement*, *Deviation*, or *Chord Tolerance*.
2. **Adjust tessellation settings:**
* Use fewer polygons when the visual fidelity doesn't suffer.
* Tune parameters like:
* **Distance Deviation / Chord Height:** Higher values → lower polygon count.
* **Angle Deviation / Normal Tolerance:** Controls detail in curved surfaces.
3. **Choose the Right Export Format**
* Recommended formats: `.GLB`, `.STL`, `.OBJ`, or `.FBX`.
* Ensure correct **units** (e.g., mm vs. cm) and **normal orientation** during export.
* **Geometry merging options**:
* If your model uses a single material, merging all parts into one mesh can improve performance.
* For complex models or when maintaining object-level control is important, export as **separate objects**— Spline allows merging later.
***
### 🛠️ 🤖 3. Optimize for Spline [#️--3-optimize-for-spline]
#### Mesh Optimization [#mesh-optimization]
* Ensure **clean topology**:
* Avoid n-gons, intersecting geometry, and non-manifold edges.
* Merge elements that use the same material.
* Keep object count and polygon count low:
* **Target:** 50k–150k polygons max.
* Fewer objects generally means better real-time performance.
#### Other Tips [#other-tips]
* Use **descriptive object names** (`base_plate`, `screw_cap`) to aid scene organization.
* Limit the number of **materials and textures** — reuse materials wherever possible.
***
### 🧪 4. Import into Spline [#-4-import-into-spline]
1. Drag and drop your exported `.obj`, `.glb`, `.stl`, or `.fbx` file into the Spline canvas.
2. Add up to two **directional lights** for efficient real-time shadows.
3. For complex models:
* Use **20 materials or fewer**.
* Compress large image textures and avoid using too many.
4. Leverage Spline’s interactive tools to add animation, hover effects, or interactivity.
5. Use the **Performance Panel** and Play Settings on Export to:
* Enable mesh and texture compression.
* Adjust scene settings for real-time performance.
🔗 [Read more in the optimization guide](/exporting-your-scene/how-to-optimize-your-scene)
# How to Import Content (/importing-content/how-to-import-content)
Import files by some of the following actions:
* Access import option from the the UI (main menu, sidebar bottom area or home top right corner)
1. Open the **Main Menu** on the left sidebar next to **Search.**
2. Select **Open / Import** and choose what file to import.
* Pressing the **⌘+O** / **Ctrl+O** shortcut.
* Alternatively, you can drag and drop compatible file types to the viewport.
Refer below for all the type of files you can import on Spline:
#### 🥕 3D Content [#-3d-content]
* OBJ
* FBX (supports animation and rigs)
* [Import Animated Objects](/importing-content/import-animated-objects)
* STL
* GLTF (as .gltf)
* GLB (as .glb)
* Spline Files (.spline)
#### 🖼 Images [#-images]
* PNG
* JPG
#### 🖋️ Vector [#️vector]
* SVG (partial support)\
*Ensure your design has no duplicate points or open paths before saving as SVG 1.1 from Illustrator or flatten it in Figma for better import into Spline.*
#### 🎥 Video [#-video]
* MP4
#### 🔊 Sound [#sound]
* MP3
* WAV
#### 🌳 Gaussian Splats [#gaussian-splats]
* [3D Gaussian Splatting](/designing-in-3-d/scenes/3d-gaussian-splatting)
*Importing an .fbx file by dragging and dropping it into the Viewport.*
# Import Animated Objects (/importing-content/import-animated-objects)
For importing animated 3D objects Spline supports FBX and GLB/GLTF files with animations including skeletal animations. You can create animations in third-party 3D software (e.g.: Blender, Cinema4D, Maya) and after exporting them as FBX or GLB/GLTF you are able to import it directly to Spline.
make sure to include the animations in the FBX or GLB/GLTF file when exporting them from third-party software. Usually an export modal has an option to include the animation.
## How to import animations in Spline [#how-to-import-animations-in-spline]
1. Import an FBX that includes an animation (simply drag and drop it into a spline scene, or choose Open / Import from the hamburger menu)
2. Select your imported FBX or GLB/GLTF object
3. Animation of your object will appear on the right sidebar
4. If you have multiple animations for the same object, export them as separate files and import them with the “+” icon in the top right corner of the animation section.
5. Select any of the animations to preview them in the editor
## How to use animations in Spline [#how-to-use-animations-in-spline]
To interactively use animations in your final experience, you need to use animation actions. Learn more the [Animation Action](/interaction-states-events-and-actions/actions/animation-action).
# Morph Targets (/importing-content/morph-targets)
Morph targets, sometimes called blend shapes in some 3D software, are a way to animate and change the shape of 3D objects. It works by making different versions of a base object, each with small changes. You can then smoothly blend between these versions to create animations, like changing facial expressions or moving parts of an object.
*Manipulating morph targets in Spline*
Spline supports files with Morph Targets already set up. You can create animations in third-party 3D software (e.g.: Blender, Cinema4D, Maya) and after exporting them as FBX or GLB/GLTF you are able to import it directly to Spline to find and manipulate the morph targets.
# Integrating with Figma (/integrations/integrating-with-figma)
Integrating your Spline scenes into Figma is a great way to preview how your scene will interact with the UI of your app or website.
[Learn more about Figma →](https://www.figma.com/)
To integrate a Spline scene into Figma, you’ll need a plugin that allows you to embed a code snippet into a Figma frame.
Here are some popular plugins that allow you to embed a code snippet:
* [Anima →](https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind)
* [Figma to Website →](https://www.figma.com/community/plugin/1329237288766226289/figma-to-website-make-websites-directly-from-figma-publish-or-export-responsive-web-html-css-js)
In this example, we’ll be using Anima.
## Add a 3D embed to Figma [#add-a-3d-embed-to-figma]
1. On Figma, open the Anima plugin and log in to your Anima account.
2. Once logged in, select the frame where you want to add the 3D embed.
3. Choose **Embed code** on the Anima plugin.
4. Paste the code snippet into the Embed input and press **Save**.
5. Press **Sync** and once ready, press **Go to Anima**.
# Integrating with Framer (/integrations/integrating-with-framer)
Integrating your Spline scenes into Framer allows you to have real-time interactive 3D experiences on your Framer websites.
[Learn more about Framer →](https://www.framer.com/)
## Add a 3D embed to your Framer website [#add-a-3d-embed-to-your-framer-website]
1. Open your website project.
2. On the toolbar, go to **Insert** → **Utility** → **Embed** and drag an **Embed** into your project.
3. With the **Embed** selected, go to the right sidebar to the Embed panel.
4. Choose **Type URL** and paste your Spline Viewer code snippet.
## Framer Templates [#framer-templates]
Here are some Framer templates with Spline embeds, to get you started.
[Demo](http://zaaz3d.framer.website/) | [Remix](https://framer.com/projects/new?duplicate=pH9JDVndxwWBkvDKcf9o)
[Demo](http://experience3d.framer.website/) | [Remix](https://framer.com/projects/new?duplicate=keMMXbLdnBtqhnCNEQQB)
[Demo](http://studio3d.framer.website/) | [Remix](https://framer.com/projects/new?duplicate=4QaqDQ5kBCzk6zQvIbxb)
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Instant.so (/integrations/integrating-with-instant-so)
Integrating your Spline scenes into Instant allows you to have real-time interactive 3D experiences on your Shopify store.
[Learn more about Instant.so →](https://instant.so/)
#### Prepare your Instant project [#prepare-your-instant-project]
1. Go to the ‘embed’ tab within the **Insert panel.**
2. **Drag and drop** the spline element onto the canvas within Instant
#### Exporting from Spline [#exporting-from-spline]
1. Open a Spline Scene.
2. Click on “**Export**” in the top toolbar.
3. Select “**Spline Viewer**”
4. Copy the scene link at the top.
#### Embed Spline in Instant [#embed-spline-in-instant]
1. Select the spline element on the **canvas**
2. Open to the style panel (on the right)
Paste the **ID** into Instant, within the style panel
# Integrating with Notion (/integrations/integrating-with-notion)
Integrating with Notion is a great way to illustrate your documents with interactive 3D scenes.
1. Open your scene and press the Export button on the toolbar.
2. Select "Public URL" from the *Type* dropdown and copy the generated *Public URL*.
3. Go to your Notion page and type "/", then choose "Embed".
4. Paste the *Public URL* into the input that appears.
**Now you will see something like this (Click and drag!)**
# Integrating with Play (/integrations/integrating-with-play)
Integrating your Spline scenes into Play allows you to have real-time interactive 3D experiences on your app prototypes.
Play is a tool for designing and prototyping mobile apps using the power of iOS and SwiftUI. It enables designers to build, prototype, and test mobile applications directly on their devices.
[Learn more about Play →](https://createwithplay.com/)
## Add a 3D embed to your Play prototype [#add-a-3d-embed-to-your-play-prototype]
1. From the toolbar at the bottom, press the **Add** option (search icon).
2. Search for **Web View** element under **Views** and drag it into your prototype.
3. On the right sidebar, paste your Spline scene’s Public URL into the URL input.
## Preview your 3D embed with Play iOS app [#preview-your-3d-embed-with-play-ios-app]
1. Open Play iOS app and select your project.
2. Press the top right icon to open preview mode.
3. Interact with your 3D embed.
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Shopify (/integrations/integrating-with-shopify)
You can use the **Spline Viewer** ([Exporting as Spline Viewer](/exporting-your-scene/web/exporting-as-spline-viewer)) export to embed 3d scenes from Spline using Shopify’s Custom Liquid feature.
1. Export your scene using the Spline Viewer option.
2. Copy with the embed code.
3. Open your Shopify site editor.
4. Create a new “Custom Liquid” theme section.
5. Paste the embed code in the text input for the Custom Liquid.
That’s it! Here is a video of the process:
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Toddle (/integrations/integrating-with-toddle)
Integrating your Spline scenes into Toddle allows you to have real-time interactive 3D experiences on your web apps.
Toddle is a no-code platform designed to streamline web app development by eliminating the need to code from the process.
[Learn more about Toddle →](https://toddle.dev/)
## Add a 3D embed to your Toddle web app [#add-a-3d-embed-to-your-toddle-web-app]
1. Select a div where you’d like to add your Spline scene to.
2. Paste your Spline Viewer code snippet.
[Learn more from Toddle docs →](https://toddle.dev/docs/spline)
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Tome (/integrations/integrating-with-tome)
Tome is an AI-native platform for creating research and presentation materials, designed to streamline sales and marketing efforts through automated personalization, data integration, and advanced analytics.
[Learn more about Tome →](https://tome.app/)
Integrating your Spline scenes into Tome allows you to create engaging presentations with real-time interactive 3D experiences.
## Add a 3D embed to your Tome presentation [#add-a-3d-embed-to-your-tome-presentation]
1. On the toolbar on the right side, click **More tiles.**
2. Find **Embed** and press it or drag it into your presentation slide.
3. Paste your scene’s Public URL.
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Typedream (/integrations/integrating-with-typedream)
Typedream is a no-code website builder that allows users to create and manage websites without coding. It offers features like video backgrounds, image carousels, and integration with data sources such as Notion, Airtable, and Google Sheets.
[Learn more about Typedream →](https://typedream.com/)
Integrating your Spline scenes into Typedream allows you to have real-time interactive 3D experiences on your Typedream websites.
## Add a 3D embed to your Typedream website [#add-a-3d-embed-to-your-typedream-website]
1. Create an embed block by typing **/Embed.**
2. Press the Embed block and go to the Code tab.
3. Paste your Spline Viewer code snippet in the text field.
4. Press **Insert Code.**
[Learn more on Typedream docs →](https://typedream.com/docs/integration/spline)
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Webflow (/integrations/integrating-with-webflow)
If you have ideas, feature requests, or bug reports in regards to Webflow integration please send your feedback to us at [help@spline.design](mailto:help@spline.design).
Add interactive 3D content to your websites without the need to write code with the Webflow Integration called Spline Embed.
You can control many of the interactions of your Spline scene directly within Webflow. This allows the use of Webflow Events (e.g.: click, hover, mouse position, scroll) to manipulate the position, rotation, and scale of the available Spline objects.
To learn more about how to use it follow the steps and tips in this doc.
## Exporting from Spline [#exporting-from-spline]
1. Open a Spline Scene.
2. Click on “**Export**” in the top toolbar.
3. Select “**Spline Viewer**”
4. Copy the scene link at the top. It should look like this: `https://prod.spline.design/HqdfCmOueigtautT/scene.splinecode `→ feel free to grab this scene to test embedding Webflow.
## Adding Spline Scene in Webflow [#adding-spline-scene-in-webflow]
Inside the Webflow editor, follow these steps to add a Spline Scene:
1. Click the “+” icon on the left toolbar
2. Under “Elements” search for the “Media” section
3. Click on “Spline Scene”
4. There is a default Spline Scene included in the “URL” input field. Paste your own Spline URL (see previous step [Exporting from Spline](#exporting-from-spline)).
5. Click on “Show All Settings” to get access to all the Webflow settings.
To learn more about how to style and size the Spline Scene on your website, check the following docs from Webflow:
* [Style Panel Overview in Webflow](https://university.webflow.com/lesson/style-panel-overview)
* [Element Settings Panel in Webflow](https://webflow.com/glossary/element-settings-panel)
## Controlling the Spline scene from Webflow [#controlling-the-spline-scene-from-webflow]
1. Select “⚡️ – Interactions” in the right sidebar top corner.
2. Create a new trigger (Element trigger or Page trigger), for this exercise select “**Mouse move in viewport**” with the “**+**” icon next to “**Page trigger**”.
3. Select the trigger.
4. Add an animation (”+” icon next to Mouse Animations).
5. Open the animation with the “⚙️ – cogwheel icon”.
6. At Mouse X Action click on the “+” icon and select “Spline” at the “Integrations” section → This unlocks access to Spline objects.
7. At 0% select the “Spline” object.
8. At the bottom of the sidebar next to “object” select from the dropdown the object you would like to manipulate → “Geometry” in the case of the example in the video.
9. Set the “Geometry” initial position, scale, and rotation, you need to define a value in order to take effect (default values will be ignored from the animation)
10. Now select the Spline object at 100% and there you should be defined by how much should be the object’s position, rotation, and scale be transformed.
11. Now preview the experience with the “👁️ – preview icon” in the top toolbar.
12. Done! Moving the mouse over the webpage should animate the Spline object.
## Previewing Spline scene in Webflow [#previewing-spline-scene-in-webflow]
In Webflow following options are available to preview your Spline Scene interactions
* **Option 1** → Click on the “👁️ – Toggle Preview” icon in the top toolbar
* **Option 2** → Publish the site in Webflow and load the page to see the Spline scene in action.
## Update Spline scene in Webflow [#update-spline-scene-in-webflow]
#### 1. In Spline [#1-in-spline]
1. Make an update in the Scene (e.g.: change the color of an object),
2. Click on Export
3. Select the Spline Viewer tab
4. Click on Update → Wait until the updates get pushed
#### 2. In Webflow [#2-in-webflow]
In the case of an already published Webflow project, just reload the website that contains the Spline Embed and your most recent Spline update will be visible.
To see the update in the Webflow Editor follow these steps:
1. Select the Spline Scene.
2. In the right sidebar select “Element Settings”
3. At the “Spline Scene Settings” section click on “Reload Spline Scene”
4. Done, the updates are live!
## Best practices [#best-practices]
* **Scene optimization** → Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices. [How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
* **Various screen sizes** → To match your scene with responsive behaviours use the Screen Resize Event and match it with the breakpoints from your Webflow environment. [Screen Resize Event](/interaction-states-events-and-actions/events/screen-resize-event)
# Integrating with Wix Studio (/integrations/integrating-with-wix-studio)
Integrating your Spline scenes into Wix Studio allows you to have real-time interactive 3D experiences on your Wix Studio websites.
[Learn more about Wix Studio →](https://wix.com/studio)
## Add a 3D embed to your Wix Studio website [#add-a-3d-embed-to-your-wix-studio-website]
1. Select the container where you want to add your Spline scene to.
2. Press **Add Elements** on the left toolbar (+ icon).
3. Choose **Embed & Social**.
4. Press the + icon next to **Embed Code.**
5. With the iFrame element selected, on the floating toolbar above, press **Enter Code.**
6. Paste your Spline Viewer code snippet on the code input under **Add your code here** and press **Apply.**
[Learn more on Wix docs →](https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget#adding-an-embed)
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Integrating with Wix (/integrations/integrating-with-wix)
Integrating your Spline scenes into Wix allows you to have real-time interactive 3D experiences on your Wix websites.
[Learn more about Wix →](https://www.wix.com/)
## Add a 3D embed to your Wix website [#add-a-3d-embed-to-your-wix-website]
1. Press **Add Elements** in the toolbar on the left (+ icon).
2. Choose **Embed Code,** then **Popular Embeds**.
3. Press the + icon next to **Embed HTML.**
4. Paste your Spline Viewer code snippet into the code input under **Add your code here** and press **Update.**
[Learn more on Wix docs →](https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget#adding-an-embed)
## Scene optimization [#scene-optimization]
Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.
[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)
# Code Tab (/interaction-states-events-and-actions/code-tab)
The **Code tab** is where a Spline file's own code lives. A file can carry one
**HTML document** — markup, CSS and JavaScript — that the editor renders in a
sandboxed iframe layered exactly over the 3D canvas. Anything you build there
sits on top of the live scene, and an injected `spline` API lets it read and
drive that scene.
It covers two jobs:
* **Web UI over the scene** — HUDs, dashboards, panels, forms and controls.
* **Behavior and motion code** — animation loops, interaction logic, game
loops. A document can be *headless*: one `