An Introduction To Spline & Webflow: Unlocking The Power Of 3D

Intro

What's up guys. Today, I want to give you an introduction to spline and Webflow. This is from a presentation I did in London recently. And I thought it would be good to record it properly for you guys. Okay. Let's get into those.

Here's what we'll cover:

What is spline?
Why is it different?
Why use 3d in the first place?
How do you use blind?
How much does it cost and some extra resources

‍

The big idea with 3D

3d is not hard to create.

If you want to create something in 3d. You can It's not that hard. This tool is called Spline. It's free, to mess around with, and you can embed 3d assets on your projects. For free. It's pretty wild. If you pay, you basically avoid the watermark. the little spline logo that you'll have in your embeddable file, but you can do a lot for free.

‍

What is Spline?

It's well worth checking out. it's a web based, 3d editor. So you don't need to download files. you can collaborate in real time with other people in the same file. So you can use it a lot, like Figma. if you use Figma for, You know, web design or anything.

They also have an incredible community loads and loads of files to remix, essentially clone.

And there's a discord channel that's super active, basically. It's a great, great place to start learning 3d. It's a lot more accessible. Than other tools.

The other cool thing about spline is that. cinema 4d was created in 1990 blender in 1994. And spline in 2021. the world's changed a lot since 19, 19, 19 94. Okay. We'll be using 3d assets in on the web.

‍

Why learn 3D?

Moving forward, I just can't help but seeing the world becoming a lot more. Immersive with 3d and the internet, won't just be something that we'll look at on a screen. I think we'll be having a lot more immersive experiences from, you know, 3d glasses that kind of bring things to life, to. if you imagine storefronts that might involve 3d as well.

This tool is built specifically for. the web, you can do a lot on the web. so I think it's powerful.

‍

Who am I to share anything here?

Why should you care about anything? I've got to say. Totally fair if you don't, but his little bit of context works for, Dexter Washington from crafters studios. Great guy learned a lot onto him. then I started doing this podcast called web flower and basically interviewed some of the best. Webflow is people that use the specific. web design. Sorry, web development tool that I use.

I learned a lot from everyone there. worked for our Edgar Allan doing marketing and I was working on this product called Slater, which is a no code. Well, it's basically like a, a code prompter that will allow you to generate and host code for websites. And then I worked for this to do called micro studio with a guy called Arnau Ros.

During this time played around with Spline of, but then I did this thing called the 40 day challenge where I built something every day for 40 days. It was epic. But I hit a wall when a guy called Hal Zeitlan, who's a great guy, but he basically said, look, I don't really know why I would use spline, in my projects - can you send me examples? I was like, oh no. You know, this is, this is bad news. He says, what kind of client projects are requiring spline 3d. So I thought it'd be worth. Just backtracking and understanding why use 3d in the first place in websites. Well, in my opinion, you have better visualization and product display

‍

Benefits of using 3D in websites

Immersive experience

If we look at this website, by Zoe Tang, an incredibly talented product designer, you can see this goes from being, you know, okay, cool. It's a shoe to, wow. We actually can really see the stitching the details. We can see. A really immersive idea of what this product would look and feel like in our hands. And it makes us a lot more inclined in my opinion, to actually. Purchase this product because we can really see how it looks, in so many more. Angles and the shape of the shoe, et cetera. This is just a micro example of all the different, incredible websites that are out there from. A lot of different. Developers like. Oh, no. this one by upfront, also really interesting example of a 3d, e-commerce experience where you hover over products and they, and they turn as you, as you hover.

Visual storytelling

There's this one by Andrew E from RADCAT Design. He's insane. so good I'll put links in the show notes He creates some incredible micro-sites. this is another one by him where you have this kind of scrolling helix strand, as you scroll down the website, but you can tell from storytelling to immersive experiences, you have a far better idea of whatever that physical. Product or service is. By virtue of seeing, 3d assets. Interestingly, this means that a lot of the time people stay on the website for longer. So it actually improves SEO.

SEO benefits

A lot of people think, well, 3d just slows down a website. That's terrible for SEO. Well, I would argue that it's a little bit more nuanced if a 3d asset that loads quickly, but, actually gives the user a very different website feel and experience as a result of the 3d asset being there. Then I would argue that. You know, they'll actually stay on the website longer and actually that could improve SEO.

Brand Recognition

There is starting to be a lot more brands that use 3d. But I think. They, it definitely helps increase, Recognition of the brand.

‍

Logging in to Spline

So. His little demo so that you actually get a bit of a feel for this. When you log into spline, you will see, this page. you've got your own files. You can generate, assets by typing in prompts. which are incredible - you type in these words, olive branch flying wings, scissors, dog. And get a 3d asset that is made off the back of that single prompt. This is only going to get better, which is obviously incredibly exciting. But, you know, you can do a lot with this, with this 3d assets. but you can't actually, you can't, In the web for like scroll position and stuff.

You can't necessarily like change the dog's legs to run, et cetera. So it's a little bit limited right now, but it will get better and better. There's assets that you can, you know, get shared. for other people that you're collaborating with all clients. And then you've got this, which is the community.

This is one of my favourite bits. You can actually clone other people's assets if they're generous enough to allow you to clone them. But this also allows you to learn how these assets are made. So you can just click in. This is, this is one by Axi Morris. He's a beast. He's just incredible.

You can remix it, click and see how this, interacts how this, how this has built. There's also a load of tutorials that they've got on a YouTube, but you can also click into them from here. And then you've got a library of different icons that you can Use for projects, So. Cool.

‍

Creating a new file

You're intrigued. I can tell let's get in to, actually creating our own new file. So. If we were to click new file, then what we can do is we can get into here. Now we have a rectangle and directional light right now. Now, if we delete these, then we've just got a blank canvas and we can click this plus icon up here. And we can do a lot

Let's say we want to create a helix effect. If I click and drag, then you'll see a helix forming. once you've actually made a shape, click on it. And if you hold option and drag your mouse around, you'll see all the different angles that, you know, your asset has.

you can interact with it more. Let's say we wanted to change the materials, for example. Well, we can do is click this plus icon. Change this to, Matt cap, for example. And if we click the icon here, we can see that we've got a vast range of materials to create an asset. let's create a metal looking spiral.

Awesome. And let's say we actually wanted this spiral to be a little bit thicker. Okay. So what we can do. Is, we can increase the path radius here. to create an asset that is a little bit chunky. That's looking kind of like a, yeah. Spring for a bike or something like that. And let's say we go, let's say we want to give it a little bit more of, it looks a bit shiny to me right now.

So let's give it a little bit of a textured effect. So what I'm going to do is click noise, and then I'm going to make the. Noise. Layer just tiny, tiny. kind of rusty looking effect, right? And what I can do is actually change this from normal to overly. And what you'll see now is a slight effect on this asset.

Looks like it's been left out in the rain a bit more. I just love like little subtle effects like that, that we can do very, very quickly. So now we've got different layers, as you can see here. Now, the order of these layers does change things, right? If we put a color at the top, then we've just got this kind of. Well, we can change it to whatever color we want, but if we want it to be luminescent blue, this is a bit like Photoshop.

These layers dragged around, Now another thing we can do, is states we can animate this. So let's say the base state. After clicking this plus icon, we've got base state and state the base state is the first state and then the state is the second state let's name.

this final state. Okay. So we've got base state and final states. Now we've got the position here so we can change the position. Of this, asset. If I seem out, you'll see this a little bit better. Up down left.

Let's say the first state is, in the middle. And I want it to rotate on the second state. in, 10 seconds. We've created an event clicked transition. This is on the helix and the current. We're going to change the base state. the final state is that. we can change this to ease. And we're going to make this, infinite loop. Okay. So, what we've got is we've got this moving up and down.

That's quite hypnotic. I like what I've created You can see this is moving up and down and turning let's say we wanted the, path radius to change the final state. The path radius is going to be a lot less. let's say that we wanted that to be. kind of. I don't know, sharper effect, I think I might have ruined this, but let's see What have I done wrong? Oh, I've created both of them. we've got base state and final state here. If we look at how these look, you can see that we've created something which spins round, animates, and generally looks rather fine. So you can see very quickly we've created some assets. You can also generate assets inside of here.

So you can, Basically do AI generate, let's put in bird, in fact, no, let's be a bit more specific, parrot. And we've got a parrot coming through, which is quite fun. Now, you're like, "yeah, Jack, this is cool, but what's the real point of Spline? why should I care about Spline?"

Now. we've created something super simple and it's not that impressive. But, here's our little parrot, by the way, we've created a 3D parrot by typing in the word parrot. Isn't that mad? it's not high quality. And you're like, I don't really know if I think this is any good, if this is worth exploring. Well, hold your horses, Spline's cool because you can import different assets from other people too.

‍

Downloading assets from Sketchfab

So if we were to go to a cool website called Sketchfab, we can find 3D assets like this.

Let's get some pineapple glasses, to download this 3D model, click download. And then what we can do is we can actually get this as, let's get an FBX file. So we've clicked download, and now, If we go back to our spline file, click import, and we can pick up our glasses.

Let's just, get the file open, and let's see what we got in there. Source and Pineapple FBX. Great! Okay, so, what I'm going to do is click that, and I'm going to import this incredible asset here. Awesome! And you're like, whoa, that's cool, wait for this. Let's change some details.

Let's create a matcap, we've got these.

‍

AI style transfer

Click this icon and go AI Style Transfer Experimental, click on one of these, let's say, anime, and our glasses will be transformed in a matter of seconds to create a 3D asset

Isn't that mad? Let's change the position I don't really like that Let's get Steampunk. Boom. Let's try FurStyle. Oh wait, I hadn't finished.

Isn't that mad? you can export that as an asset to be used as a JPEG. Now right now, this doesn't do video. I'm sure that will soon happen. because That seems like the logical next step. Runway is pretty impressive isn't that just mental? my mind is blown how good that is in such a short space of time.

We've just created something that, you know, a Photoshop artist would have taken maybe a week to do, and we've just done it. in a click, So you're like, yeah, this is cool, Jack. How do I use this on a website now? Good question, Let's get rid of that. we're going to click scene and change this from custom size to responsive.

Now click export viewer, and we get this production, asset Remember, whatever the shape and style of the camera is here, Is what you're going to get in your, in your embed. Okay, so just remember, however you leave your spline asset here, is how it's going to look in your embed.

Okay, I'm going to have it as a diagonal asset. Let's look at the optimizations that can be made. Total number of polygons, oof, pretty heavy. We can improve that, by reducing details But I like my pineapple glasses the way they are.

It says reduce polygons. Nah, you're alright I can delete that though. I can reduce the number of different layers we have if we're not using them. but it's pretty good load speed. 99 out of 100. So what I'm going to do is copy this. in fact, let me just turn off the background colour.

Let's allow page scroll. actually, let's keep orbit, etc. nice, nice. Let's update that. going to overview. now Webflow. you can do this on Framer. You can do this on Webflow. Let's go to this one for example. Let's pretend this is a completely new project. You can use Webflow 2 projects for free if you're not wanting to pay.

And, you don't need to pay for a domain name. You actually get a Webflow. io domain which you can actually use as a staging domain. This is, This can be indexed on Google if you want. It's pretty, it's pretty cool the amount you can do for free. Some people actually have their portfolios, free as well.

‍

Embedding your Spline file in a Webflow project

Okay, let's create a new page, put in test, Simple as this, We get a spline scene. whack in the URL, from, our file Click copy and run. Embed. And there it is. this can be shared as a link, or you know, you can then put text with this.

I mean, I'd recommend doing this a little bit better than I am, but you can do whatever you want Timothy Rix's, class naming system. you'd need to, clone a style guide for Webflow. And then you can get, get going with a project after creating your style guide. I recommend Lumos. Client First, is also great.

Mast by Corey Moyne, great as well. I just prefer Lumos. We've put in, an asset, it's now, you know, you can actually play with this, it has this cool lighting effect, because we've used matcap material. It's all there to play for.

So, how wild is that? We've downloaded some free assets and, made something, out of thin air.

‍

Conclusion

But, I think very soon we will be having a lot more 3D and immersive experiences for, for good or for bad. I'm sure that's going to throw up a load of opportunity and also, be detrimental as we, explore, the limits of what's possible and, and what's, what's appropriate for, you know, civilization.

It all sounds a bit airy fairy here or a little bit, maybe a little bit extreme but I think It's worth understanding how 3D works. If you're interested in learning more, you're probably already watching this on YouTube, but you might have received the newsletter, Spline Time.

I share something every week about how to do something in 3D. If you're interested in any of this stuff that I've talked about today, I will continue to explore this for months moving forward. Maybe years moving forward.

‍