Thread by @aleksliving

Framer February → Day 8 ✨

✶ 2 for 1 special: create a interactive 3D scene in @splinetool & add it to your @framer project. Let's go ↓

Fire up Spline, and set up for your scene:

• set a light bg color that complements your color scheme
• add your first shape (or object), and set its position to 0, 0, 0
• sprinkle in some more shapes

👨🏼‍🍳 Now, it's time to cook up some materials. I'm making 3 → an off-white, purple, and glass.

Since this isn't meant to be a Spline tutorial, I'm not going to write out the configs. Pause the video and copy the values if you're following along.

Assign the materials we just created to your composition as you see fit. There's no wrong way to do this, just follow the ✨ vibes ✨

Once your materials are added, you might realize that the colors we chose earlier aren't quite perfect. If so, just go back & tweak them until you're happy with the result.

At this point, all of your objects are on the same plane, which isn't ideal for what we're trying to do. Move them around to create some depth to your composition.

☝️ Make sure to keep the main shape at the 0, 0, 0 position

This step is optional, but you can tweak the light sources to create even more depth ↓

Great work, your 3D scene is complete! It's time to export it and get it ready for your Framer project.

👆Disable Pan & Zoom, and you're ready to go!

Inside of Framer, add an "Embed" element to your canvas and paste the URL you copied from Spline.

You're done, but if you want to add some extra 🌶️ spice, enable the "On Hover" property back in Spline.

All done! Look at it go 🥹

🛸 I hope you found this tutorial helpful. If so, please RT to spread the love