# Designing a 3D website with Spline and Framer (https://academy.spline.design/tutorials/designing-a-3d-website-with-spline-and-framer)

> A video tutorial from the Spline Academy.

- Product: Spline 3D
- Level: beginner
- Duration: 13 min 51 s
- Published: 2022-08-27
- Video: https://www.youtube.com/watch?v=8bqkvfRuFYk

## About this tutorial

Hi! In this tutorial, you will learn how to create a 3D website using a 3D glass scene made in Spline and integrate it into Framer (web builder) to create and publish a fully functional website.
Check Spline: https://spline.design/
Demo Site: https://healthy-others-546063.framer.app/
Follow Spline: https://instagram.com/splinetool/

## Chapters

- [0:00](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=0s) Introduction
- [0:33](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=33s) Creating the spheres
- [1:40](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=100s) Adding the materials
- [2:52](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=172s) Making the glass
- [7:50](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=470s) Exporting the 3D scene from Spline
- [8:26](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=506s) Importing the 3D scene into Framer
- [10:00](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=600s) Adjusting the website composition
- [11:30](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=690s) Adding Orbit on hover
- [12:25](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=745s) Final adjustments