Embedding
Copy and paste the script tags into the body of your site (or inside an HTML embed). That’s it!
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/UWoeqiir20o49Dah/scene.splinecode"></spline-viewer>
CopyScroll
Create Scroll events and camera states to create scroll-based transitions.
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/LEvjG3OETYd2GsRw/scene.splinecode"></spline-viewer>
CopyOrbit & Zoom
Control the camera behavior from the Spline export settings.
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/U9O6K7fXziMEU7Wu/scene.splinecode"></spline-viewer>
CopyFollow
Make your objects follow the cursor or other objects by using the Follow event.
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/PBQQBw8bfXDhBo7w/scene.splinecode" events-target="global"></spline-viewer>
CopyLook At
You can make your objects look at the camera, the cursor, or other objects with Look At event.
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/FVZWbQH2B6ndj9UU/scene.splinecode" events-target="global"></spline-viewer>
CopyChange Background
Override the background color of your Spline scene by using the background property that accepts any css style color. This color will override the background color you defined in the editor.
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/fJ2ptJKzT-sDkpfO/scene.splinecode" background="rgba(218,81,221,0.2)"></spline-viewer>
CopyIntegrations
<spline-viewer> is a native html component and can be used with most web builders, frameworks, or browsers.
Learn More
Spline is always improving, join our community to learn more about new features, share your work, or get help/support!