Browser-based 3D design tool with visual editor, animation, and web export. Use this skill when creating 3D scenes without code, designing interactive web experiences, prototyping 3D UI, exporting to React/web, or building designer-friendly 3D content. Triggers on tasks involving Spline, no-code 3D,

Spline Interactive Browser Based 3D Design and Animation Overview Spline is a browser based 3D design and animation platform that enables creators to build interactive 3D experiences without requiring code or specialized software knowledge. It provides a collaborative visual editor for designing, animating, and exporting 3D scenes across multiple platforms. Key Features : Visual 3D modeling with parametric shapes, extrusion, and boolean operations State based animation system with timeline controls Interactive event system (mouse, keyboard, collision, scroll) Multiple export options (React components, web code, public URLs) Real time collaboration with team libraries AI powered generation (3D from text, textures, style transfer) Built in physics and particle systems When to Use This Skill : Creating 3D web experiences without writing Three.js code Designing interactive product showcases or configurators Prototyping 3D UI/UX concepts visually Building marketing pages with 3D elements Collaborating with designers on 3D content Exporting scenes for React or vanilla JS integration Alternatives : Three.js (threejs webgl): For developers who prefer code first approach and need maximum control Babylon.js (babylonjs engine): For game focused projects with built in physics React Three Fiber (react three fiber): For React developers who want to build 3D with JSX Core Concepts 1. Scene Structure Spline organizes projects into scenes containing: Objects : 3D models, shapes, text, images Lights : Directional, point, spot lights Cameras : Orbital, perspective, orthographic Events : Interaction triggers States : Animation keyframes 2. Components System Reusable elements that can be: Created from any object or group Instantiated multiple times Updated across all instances Overridden per instance 3. State Based Animation Animations are defined as transitions between states: Default State : Initial appearance Additional States : Target appearances Events : Triggers that cause state transitions Transitions : Duration, easing, properties 4. Interactivity Model Event driven system with: Events : User actions or scene triggers Conditions : Logic gates (if/else) Actions : State changes, audio, scene switches Variables : Dynamic data from APIs or user input 5. Export Options Multiple deployment methods: Public URL : Direct shareable link Code Export : React component or vanilla JS Spline Viewer : Embedded iframe Self Hosted : Download and host independently Common Patterns Pattern 1: Basic React Integration Use Case : Embed a Spline scene in a React application Implementation : Key Points : Scene URL comes from Spline export dialog Component fills parent container Automatically handles loading and rendering Pattern 2: Event Handling and Object Interaction Use Case : Respond to user clicks on specific objects Implementation : Available Event Handlers : onSplineMouseDown Mouse press on object onSplineMouseUp Mouse release onSplineMouseHover Mouse over object onSplineKeyDown Keyboard press onSplineKeyUp Keyboard release onSplineStart Scene loaded and started onSplineLookAt Camera look at event onSplineFollow Camera follow event onSplineScroll Scroll event Pattern 3: Programmatic Object Control Use Case : Modify object properties from React code Implementation : Object Properties You Can Modify : position { x, y, z } rotation { x, y, z } (radians) scale { x, y, z } material.color Color hex value visible Boolean Pattern 4: Triggering Spline Animations Use Case : Trigger animations defined in Spline from React Implementation : Available Event Types : mouseDown Mouse press mouseHover Hover effect mouseUp Mouse release keyDown Key press keyUp Key release start Start event lookAt Look at camera follow Follow camera Pattern 5: Next.js Integration with SSR Use Case : Use Spline in Next.js with server side rendering benefits Implementation : Benefits : Placeholder image shown during SSR Faster perceived load times Better SEO with fallback content Pattern 6: Lazy Loading for Performance Use Case : Defer Spline loading until needed Implementation : Benefits : Reduces initial bundle size Improves page load performance Shows custom loading UI Pattern 7: Responsive Spline Scenes Use Case : Make Spline scenes adapt to different screen sizes Implementation : Alternative Approach (Single Scene): Integration Patterns With Three.js (threejs webgl) For advanced use cases, combine Spline designed assets with Three.js code: 1. Export from Spline : Use GLTF/GLB export 2. Import in Three.js : Load using GLTFLoader 3. Enhance with code : Add custom shaders, physics, or effects With GSAP (gsap scrolltrigger) Trigger Spline animations on scroll: With Framer Motion (motion framer) Animate container while Spline handles 3D: Performance Optimization 1. Enable On Demand Rendering Render only when scene changes, not every frame: 2. Optimize Scene in Spline Editor In Spline : Reduce polygon count (use decimation) Compress textures (lower resolution, use JPG over PNG) Limit lights (2 3 lights maximum) Use simple materials when possible Enable LOD (Level of Detail) for distant objects 3. Lazy Load Heavy Scenes Use React.lazy() as shown in Pattern 6 4. Preload Critical Scenes 5. Mobile Optimizations Create separate mobile scenes with lower detail Reduce canvas resolution on mobile Disable shadows and reflections Use simpler materials Common Pitfalls and Solutions Pitfall 1: Scene Not Loading Problem : Spline component renders but scene doesn't appear Solutions : Also Check : Scene is published in Spline editor Network tab shows successful file downloads No CORS errors in console Pitfall 2: Object References Lost After Re render Problem : Object refs become undefined after component updates Solution : Pitfall 3: Performance Issues on Mobile Problem : Scene runs slowly on mobile devices Solutions : Pitfall 4: Events Not Firing Problem : Click or hover events don't trigger Solutions : Pitfall 5: Animation Not Triggering Programmatically Problem : emitEvent() doesn't trigger animation Solutions : Pitfall 6: Hydration Errors in Next.js Problem : Mismatch between server and client render Solution : Resources Official Documentation Spline Docs : https://docs.spline.design React Spline GitHub : https://github.com/splinetool/react spline Spline Community : https://spline.community Spline Editor Web App : https://app.spline.design Desktop App : Available for macOS, Windows, Linux Learning Resources Tutorials : https://spline.design/tutorials YouTube Channel : Official Spline tutorials Examples Gallery : https://spline.design/community Export Formats React component (via @splinetool/react spline ) Vanilla JavaScript (Web Code API) GLTF/GLB (for Three.js, Babylon.js) USDZ (for Apple AR) STL (for 3D printing) Video/GIF (for marketing) Related Skills threejs webgl : For code first 3D development with more control react three fiber : For building 3D scenes with React and JSX babylonjs engine : Alternative 3D engine with editor workflow motion framer : For animating Spline containers and UI elements gsap scrolltrigger : For scroll driven Spline animations figma dev mode : For design to code workflow (similar visual approach) Scripts This skill includes utility scripts: project generator.py Generate Spline + React starter projects component builder.py Build Spline component wrappers with events Run scripts from the skill directory: Assets Starter templates and examples: starter spline/ Complete React + Spline template examples/ Real world integration patterns

spline-interactive