Splinekit Instructions

1 Getting Started

Loading Your Spline Scene

Start by entering your Spline scene URL in the "Scene URL" field. The URL should be from prod.spline.design (the published version of your scene).

1. Publish your Spline scene — In Spline, go to Export → Web → Public URL and copy the link.
2. Paste the URL — Enter the URL in the Scene Setup section and click "Preview in page" to load it.
3. Set your page URL — Enter the URL where you'll embed this (used for OG image sharing).

Understanding the Editor Layout

The Splinekit editor has three main areas:

• Left Sidebar — Scene setup, objects, groups, and color schemes
• Center Preview — Live preview of your Spline scene with swatch controls
• Appearance Panel — Styling options organized into Scene, Panel, Layout, Animation, Behavior, and Sharing tabs

2 Color Swatches

Adding Objects

Objects are the 3D elements in your Spline scene that can change color. Each object can have multiple color swatches.

1. Click "Import from Scene" — This auto-detects objects from your loaded Spline scene.
2. Or add manually — Click "Add" to create a new object entry and enter the exact name from Spline.
3. Select an object — Click on an object card to select it for adding colors.

Adding Colors

With an object selected, you can add colors in several ways:

• Browse Themes — Over 1,800 curated color palettes, filterable by style (Neon, Pastel, Earthy, etc.)
• Import from Scene — Detects colors already used in your Spline objects
• Manual Entry — Click any swatch to edit its hex color and label
• Save Palettes — Save frequently used color combinations as reusable palettes

Swatch Styling

Customize how swatches appear in Panel & Styling → Swatches:

• Style — Grid, Grid Compact, Pill, Pill Justified, List, Dots, or Columns
• Size — Swatch size in pixels (24-120px)
• Border Radius — Roundness of swatch corners
• Gap — Spacing between swatches
• Selection Ring — Color and width of the active swatch indicator

3 Groups Setup

What Are Groups?

Groups allow users to toggle visibility of different 3D objects in your scene. Perfect for showing product variations, accessories, or different views.

Creating Groups in Spline

Groups are detected automatically based on object naming conventions in Spline:

GroupName/OptionName

For example:

• Speaker/Stereo — Option "Stereo" in group "Speaker"
• Speaker/Mono — Option "Mono" in group "Speaker"
• Accessory/Stand — Option "Stand" in group "Accessory"
• Accessory/Wall Mount — Option "Wall Mount" in group "Accessory"

Display Formats

Each group can be displayed as:

• Radio — Only one option visible at a time (default)
• Checkbox — Multiple options can be visible simultaneously
• Select — Dropdown menu for groups with many options
• Pills — Horizontal button-style toggles

Ordering Groups

Drag and drop group cards in the sidebar to reorder them. The order in the editor matches the order in the exported embed.

Styling Radio Options

Customize radio button appearance in Panel & Styling → Radio Options:

• Style Preset — Default, Minimal, Accent, Filled, or Outline
• Background Colors — Normal, Hover, and Selected states
• Border Colors — Normal and Selected states
• Text Color — Label text color
• Spacing — Border radius and padding

4 Camera Events

Overview

Camera Events let you automatically transition the camera view when users switch between group options. This creates a polished, guided experience.

Setting Up Camera States in Spline

1. Select your camera in Spline and open the States panel.
2. Create states for each view you want (e.g., "Front View", "Side View", "Detail").
3. Position the camera for each state — set position, rotation, and zoom.
4. Add easing — Configure transition duration and easing in each state.

Attaching Events to Group Objects

In Spline, attach a mouseDown event to each group object that triggers the camera state:

1. Select the group object (e.g., "Speaker/Stereo").
2. Add an Event — Choose "Mouse Down" as the trigger.
3. Set the action — "Change State" on your camera to the appropriate state.
4. Repeat for each group option.

Best Practices

• Keep transitions under 1 second for snappy interactions
• Use "Ease Out" for most transitions — feels natural
• Consider the viewer's perspective when positioning camera states
• Test on mobile to ensure camera positions work at different aspect ratios

5 Responsive Design

Breakpoint Settings

Open Layout & Responsive to configure settings for each device size:

• Desktop — 992px and up
• Tablet — 768px to 991px
• Mobile — Below 768px

Per-Breakpoint Options

For Tablet and Mobile, you can customize:

• Aspect Ratio — Different proportions for smaller screens
• Position — Where the swatch panel appears
• Swatch Size — Smaller swatches for mobile
• Border Radius — Adjust roundness per device
• Panel Background — Device-specific panel colors

Quick Responsive Links

In Panel & Styling → Swatches, click the tablet or mobile icons next to Size and Border Radius to jump directly to those breakpoint settings.

Inheritance

Check "Inherit from Desktop" (for Tablet) or "Inherit from Tablet" (for Mobile) to use the larger breakpoint's settings. Uncheck to set custom values.

6 Export & Embed

Export Formats

Click "Export" to see available formats:

• CDN Compact (Recommended) — Ultra-compact embed (~2KB). CSS & JS loaded from CDN.
• Separate — Individual code blocks for head, canvas, swatches, and JS.
• All-in-One — Single embed with everything inline.
• Webflow — Optimized for Webflow projects with specific placement instructions.

Adding to Your Site

1. Copy the Head Code — Paste into your page's <head> section for OG images.
2. Copy the Embed Code — Paste where you want the configurator to appear.
3. Publish — Your interactive configurator is live!

OG Image Sharing

Splinekit generates dynamic Open Graph images for social sharing. When users share their color configuration, the OG image shows their selected colors.

JavaScript API

After the embed loads, you can access the API via window.SPC:

// Set a specific color
window.SPC.setColor('ObjectName', '#ff5500');

// Trigger random colors
window.SPC.surpriseMe();

// Show/hide a group option
window.SPC.setGroupVisibility('Speaker/Stereo', true);

// Show one option, hide others
window.SPC.showExclusiveGroup('Speaker', 'Stereo');