VOOZH about

URL: https://viewer.spline.design/

⇱ Spline Viewer - Easily embed 3D in your website

<spline-viewer>

Easily embed your 3d Spline scenes into your website.

Embedding

Copy and paste the script tags into the body of your site (or inside an HTML embed). That’s it!

<scripttype="module"src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewerurl="https://prod.spline.design/UWoeqiir20o49Dah/scene.splinecode"></spline-viewer>

Scroll

Create Scroll events and camera states to create scroll-based transitions.

<scripttype="module"src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewerurl="https://prod.spline.design/LEvjG3OETYd2GsRw/scene.splinecode"></spline-viewer>

Orbit & Zoom

Control the camera behavior from the Spline export settings.

<scripttype="module"src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewerurl="https://prod.spline.design/U9O6K7fXziMEU7Wu/scene.splinecode"></spline-viewer>

Follow

Make your objects follow the cursor or other objects by using the Follow event.

<scripttype="module"src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewerurl="https://prod.spline.design/PBQQBw8bfXDhBo7w/scene.splinecode"events-target="global"></spline-viewer>

Look At

You can make your objects look at the camera, the cursor, or other objects with Look At event.

<scripttype="module"src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewerurl="https://prod.spline.design/FVZWbQH2B6ndj9UU/scene.splinecode"events-target="global"></spline-viewer>

Change 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.

<scripttype="module"src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewerurl="https://prod.spline.design/fJ2ptJKzT-sDkpfO/scene.splinecode"background="rgba(218,81,221,0.2)"></spline-viewer>
Original BG
rgba(218,81,221,0.2)#E0F0FF

Integrations

<spline-viewer> is a native html component and can be used with most web builders, frameworks, or browsers.

👁 Checkmark
Latest Browsers
👁 Checkmark
JS Frameworks
👁 Checkmark
Web Builders

Learn More

Spline is always improving, join our community to learn more about new features, share your work, or get help/support!