Spline 3D Embedded Hero

What this builds

A full-viewport hero section where a Spline-designed 3D scene is embedded via the @splinetool/react-spline component (or vanilla @splinetool/runtime) and connected to page scroll, pointer events, and application state. Objects in the Spline scene rotate, translate, change material, or trigger state transitions based on scroll progress and user interaction. The hero combines a 3D canvas layer with overlaid HTML content (headline, CTA).

• Spline scene fills the hero viewport as a background/midground layer.
• Scroll-driven: scene objects transform (rotate, translate, scale) as the user scrolls through the hero range.
• Pointer-driven: objects respond to hover and click via Spline's built-in event system.
• State-driven: external React state (e.g., selected variant, theme toggle) can trigger Spline state transitions.
• HTML content overlaid on the scene with proper z-indexing and pointer-event management.
• Loading state with skeleton/placeholder until the scene is ready.

When to use / when not to

• Use when the 3D scene is designed in Spline's visual editor and exported as a .splinecode URL. Spline handles modeling, materials, lighting, and animation; this toolkit handles integration.
• Use when the team has a designer-authored Spline scene and needs to wire it into a production page.
• Do NOT use when you need programmatic geometry, custom shaders, or runtime-generated meshes. Spline scenes are authored, not generated. See hero-gltf-product-showcase for Three.js-based 3D heroes.
• Do NOT use for heavy interactive 3D applications (games, configurators with hundreds of parts). Spline runtime is optimized for visual design, not complex interactivity.
• Do NOT use when bundle size is critical. @splinetool/runtime adds ~400 KB to the bundle. For lightweight 3D, see three-js-fundamentals or ogl-lightweight-webgl.