Spline Scene
Embed interactive 3D Spline scenes in React. Lazy-loaded component with loading states. Perfect for product showcases, hero sections, and immersive experiences.
Last updated on
Basic
Component spline-scene-demo not found in registry.
Hero Section
Use in hero sections with content overlay for immersive landing pages.
Component spline-scene-hero-demo not found in registry.
Product Card
Showcase 3D products in card layouts with interactive models.
Component spline-scene-card-demo not found in registry.
Custom Styling
Apply custom backgrounds and layouts for multiple scenes.
Component spline-scene-custom-demo not found in registry.
Installation
CLI
npx shadcn@latest add "https://jolyui.dev/r/spline-scene"Manual
Install the following dependencies:
npm install @splinetool/react-splineCopy and paste the following code into your project.
Usage
import { SplineScene } from "@/components/ui/spline-scene"
export default function MyComponent() {
return (
<div className="w-full h-[400px]">
<SplineScene
scene="https://prod.spline.design/YOUR-SCENE-ID/scene.splinecode"
className="w-full h-full"
/>
</div>
)
}Getting Your Spline Scene URL
- Create your 3D scene at spline.design
- Click the Export button in the top-right corner
- Select "Code Export" → "React/Three.js"
- Copy the scene URL that ends with
.splinecode - Use this URL in the
sceneprop
API Reference
SplineScene
The main component for rendering Spline 3D scenes with lazy loading and suspense.
Prop
Type
Features
- Lazy Loading: Component is lazy-loaded to reduce initial bundle size
- Suspense Fallback: Built-in loading spinner while scene loads
- Fully Interactive: All Spline interactions work out of the box
- Responsive: Adapts to container size with className support
- TypeScript: Full type safety with proper interfaces
Performance Tips
- The Spline library is loaded only when the component is used
- Consider using loading="lazy" for scenes below the fold
- Optimize your Spline scenes for web (reduce complexity and file size)
- Use the loading fallback to improve perceived performance
Browser Support
Spline scenes require WebGL support and work best on:
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers with WebGL support
Notes
- The component uses React Suspense for code splitting
- First render includes a loading spinner that matches your theme
- Scene interactions (clicks, hovers) are handled by Spline automatically
- Make sure to set explicit height on the container for proper display
How is this guide?