JavaScript
// React component with fallback
import { Suspense } from 'react';
import Spline from '@splinetool/react-spline';

export default function ProductHero() {
  return (
    <div className="hero-3d">
      <Suspense fallback={<img src="/product-fallback.jpg" alt="Product" />}>
        <Spline 
          scene="https://prod.spline.design/your-scene-id/scene.splinecode"
          onLoad={() => console.log('3D loaded')}
        />
      </Suspense>
      <div className="cta-overlay">
        <button className="primary-cta">Get Started</button>
      </div>
    </div>
  );
}

Progress:

• Scene optimization (polygon budget 5k-10k)
• Material design with brand colors/finishes
• Interaction triggers setup
• Export strategy selection
• Performance testing
• CTA integration
• Mobile fallback implementation

1. Scene Optimization

• Polygon budget: 5k-10k triangles for hero sections, 2k-5k for inline elements
• Texture compression: 1024px max, WebP format when possible
• File size target: Under 5MB total (scene + textures)
• Use Spline's optimization panel: "Optimize for web" setting

2. Brand-Consistent Materials

Create material presets:

• Plastic: Roughness 0.3, Metallic 0.0, brand color + subtle reflection
• Glass: Transmission 0.8, Roughness 0.1, IOR 1.5, brand tint
• Metal: Metallic 1.0, Roughness 0.2-0.4, brand color in base

3. Interaction Design

JavaScript
// Spline event handling
function onSplineMouseHover(e) {
  if (e.target.name === 'product') {
    // Trigger hover animation
    e.target.emitEvent('mouseHover');
  }
}

// Scroll-triggered animations
function onSplineLoad(spline) {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      spline.emitEvent('triggerIntro');
    }
  });
  observer.observe(document.querySelector('.spline-container'));
}

4. Export & Embed Strategy

@splinetool/react-spline (Recommended):

• Better performance control
• React Suspense integration
• Custom loading states

iframe (Simple):

• Quick implementation
• Less control over performance
• Use for non-critical placements

5. Webflow Integration

HTML
<!-- Custom code in Webflow -->
<div id="spline-container" style="width: 100%; height: 600px;"></div>
<script type="module">
  import { Application } from '@splinetool/runtime';
  
  const canvas = document.createElement('canvas');
  const app = new Application(canvas);
  app.load('https://prod.spline.design/your-scene/scene.splinecode')
    .then(() => {
      document.getElementById('spline-container').appendChild(canvas);
    });
</script>

Example 1: Product Hero Input: SaaS dashboard product, brand colors #2563eb, need hover interactions Output:

• Low-poly laptop model (3k triangles)
• Plastic material with brand blue (#2563eb)
• Screen glow effect on hover
• Floating animation loop
• CTA positioned over 3D scene

Example 2: Feature Showcase Input: Mobile app features, scroll-triggered reveals Output:

• Phone mockup with glass materials
• Screen content changes on scroll milestones
• Particle effects for feature highlights
• 2MB total file size
• Mobile: Static image fallback with CSS animations