Spline 3D for Web

# Spline 3D for Web

## What is Spline
Browser-based 3D design tool (spline.design). Export to web embed, React component, or iframe. Great for interactive 3D hero sections without writing Three.js.

## Embed options

### iframe (simplest)
```html
<iframe
  src='https://my.spline.design/scene-xxxxx/'
  width='100%'
  height='100%'
  frameborder='0'
/>
```

### React component
```bash
npm install @splinetool/react-spline @splinetool/runtime
```
```tsx
import Spline from '@splinetool/react-spline'

export default function Hero() {
  return (
    <Spline
      scene="https://prod.spline.design/xxxxx/scene.splinecode"
      onLoad={(spline) => console.log('loaded', spline)}
    />
  )
}
```

### Vanilla JS
```js
import { Application } from '@splinetool/runtime'
const canvas = document.getElementById('canvas')
const app = new Application(canvas)
await app.load('https://prod.spline.design/xxxxx/scene.splinecode')
```

## Interactivity (event triggers)
In Spline editor: add Events on objects (onClick, onHover, onKeyPress).
In code:
```tsx
function onLoad(spline) {
  spline.addEventListener('mouseDown', (e) => {
    if (e.target.name === 'Button') {
      spline.emitEvent('mouseDown', 'Button')
    }
  })
}

// Trigger named event from JS
spline.emitEvent('start', 'MyObject')

// Get/set variables
spline.setVariable('speed', 2)
const val = spline.getVariable('score')
```

## Performance
- Export as `.splinecode` (compressed) not full scene URL.
- Lazy load: only init Spline when in viewport using IntersectionObserver.
- Set background to transparent to blend with page: Scene settings -> Background -> None.
- Reduce polygon count, texture sizes in Spline editor for web export.

## Alternatives comparison
| Tool | Skill level | Interactivity | File size |
|------|-------------|--------------|----------|
| Spline | Low (GUI) | High | Medium |
| Three.js | High (code) | Full | Small |
| R3F | Medium | Full | Small |
| Rive | Low-Med | State machine | Small |
| Lottie | Low | Basic | Small |