Unicorn Studio is the Vibe Designer's Unlock

Check out these examples of Unicorn Studio. Now, Unicorn Studio is a noode editor for creating really cool interactive animated WebGL effects in the browser essentially that you can integrate on your websites and apps. And in this video, I'm going to show you exactly how to use it. You can create a 100% free account and also that is going to be the basis of today's challenge as a part of the 30-day AI UI designer series that I have going on, which is 100% free at designcourse. com. I'll show you how to integrate Unicorn Studio. And your task is to take this layout right here that I created this morning and integrate Unicorn Studio in the background behind these two columns. I'll show you how to submit your entry and also to see what other people submitted for the same entry here later on in the video. But first, how do you actually use and create a Unicorn Studio canvas? All right, so to get started, just go to unicorn. studio. You can click on pricing. You can see they have a free option. you have access to all 70 effects, up to 10 publishes with logo image exports, video exports as well. So, don't worry about having to, you know, join just to participate in this challenge. Um, it's a really cool tool, though, and I use it in a lot of my projects. So, I'm just going to go ahead and click login here. I already created my account, and you'll see some starter templates where you can just click remix on them, and you can see exactly how they're set up. Um it's a really great way to learn how you know these various effects are created because there's a lot of things that can be done. So um the way you start just new project up here is how you change the dimensions of the actual canvas layout. For us we're just going to stick with something like this although it will be 100% width and height based on you know whatever parent container is inside of the HTML that we have. Um and so you know this is the point at which where you decide okay you know you don't have to import any type of assets like right up here is how you include assets right these are all my previously uploaded assets um and when you click on them it'll just like for instance here's a weird v thing of myself okay so we click on it over here is the property inspector I can kind of reset this down a little bit smaller actually we'd want to increase just a bit and you can see once you select an element I you know you have the property inspector over here. There is are a lot of customizable properties especially with the effects up here in this section. Um it is so freaking cool. For instance, '9s VHS. This is a new one. Okay, that's kind of strange. But if we click play right here, a lot of these have the ability to create, you know, to hit play. Just look at that. I've created like a TV effect with myself in the background already. And you can do a lot of other cool stuff like interactivity, like mouse tracking. Turn this up. Guess what? Now I'm following myself. This in of itself is pretty cool just to you could take this, export it, and put it on a web page like right now. It's so cool. But obviously when we select these uh these effects over here, um you have individual uh parameters that you can affect. And like this one, there's not even a lot. Some of them there's a lot more that you can uh create. For instance, you can even continue to layer these on top of each other. Although you have to be worried about performance. So don't go too crazy with this type of thing. Uh like here's some light effects like a beam. Okay. Well, that's kind of lame, right? It's like what's it doing? Okay. Well, we could take this and change the uh the type to like a ring. Um we can hit play. Ah, look at that. We can again track mouse. So obviously this has to do with taste. It's not about technical knowhow or ability like it used to be in the past trying to do this type of stuff like 3JS shader effects the shader language was very complex you know back before AI but now we can use this and it's just it just works all right um so if I show you another project here and this is the actual one that's at designcourse. com um like this one this is the light effect right here or the stream if I go to designcourse. com you'll this same exact element right there in the background. So, it's just very fun to create these type of effects. And again, there's a lot of different types based on all those effects that we have there. So, if I go back, here's another one. And this is like a mask reveal effect. And again, this is back on this. You can view this right here in this section of the AI UI design challenge. And it just it adds kind of like an interesting um interactive embellishment of some sort. Um and if you just look at I'll make this available. You can kind of look and see how this mask effect is done. There's literally just two different images that look exactly the same. And then you use the mask shape option and make it follow the mouse and also give it a distortion uh

which is comes from the noise effect. There's a lot of things you can do and it's not all that complex. It comes down to taste and being able to, you know, really just play around uh color and and the hardest part is ensuring that it fits whatever you're doing with your design uh with whatever layout you're doing. That's going to be the absolute hardest part and that's what the challenge is about. So, let me show you the actual challenge and I'll show you how real quickly how to integrate it. And there's multiple ways. So, the challenge is right here. So again, grab this assets template from the UIUX challenge, the AI challenge I have going on right now. So it's going to be linked somewhere here near the video. You go ahead and just, you know, copy that file and open in Figma. And you'll see there's four challenges. There's this one, the very first one. We have this one and then the AI embellishments challenge. And then now we have the unicorn studio challenge. This is the one where I want you to create a unicorn studio effect in the background behind these two columns. And this is going to be fun um because I provided an index. html and that looks like this. So you can grab this as well right next to the grab the assets, you know, little button right there. And this will download this file right here. It's just a single index. html. And there is a div element that says Unicorn Studio. So I'll show you how to integrate one real quick in the context of this. and then you can do your own and then submit it by recording a video screen capture of your actual implementation and then upload it to design course. So let's say for instance um if we go back here I'll take just one of the preset ones. So if I click here this is a real cool effect very popular and I remix this project a it's going to show me how it was created. Here's like the pulse beam the laser blame the texture image. There's a lot of cool stuff happening here. But once you have yours done, click share or export rather and then click embed and then click copy right here. That's it. You just copy this code and then depending on wherever you're choosing to implement this. This could be cloud code, it could be cursor, it could be Figma make even. So you can even just stay in Figma with that design template. And I'll show you that in a second. So here I am in this folder is that index. html file. So, all I have to do is just type in claude and I'm going to say integrate this Unicorn Studio embed into the Unicorn Studio development. Ensure it's 100% width and height. And then all I have to do here in the terminal is just right click. And then there we go. We're going to wait and then I'll show you what it looks like. Okay, it's done. Now, if I refresh, look at that. Now, personally, yeah, while that looks cool, I don't think it really fits this design aesthetic very well. Um, but this is just to show you how you integrate it and how quick and easy it is to integrate Unicorn Studio. Okay, now let me show you also how to do it within Figma Make. Simply take this design, hit C, hit plus right up here, and then click on make, and then literally right here, paste. paste that selection of the layout and then just say I write this in HTML and CSS and make it responsive. I already did that. So this is what it looks like right here. So if I move this in and out, you'll see that it's, you know, it's an actual responsive layout. And then all I have to do is the same thing. I'll say integrate Unicorn Studio behind the two columns at the bottom. All right. And there you go. It's loaded up. I had to do a follow-up prompt because it was just like loading without animation for some reason. Um, as you can see here. But either way, this is another way you can hit publish here. And what I want you to do though is to create a maybe just a few seconds of a screen capture of this animation for the layout and then I want you to submit it to the challenge 4 unicorn studio challenge here in design course because I want to see your interpretation of what can happen and what can seamlessly integrate into this layout that we see right here in this section. Um so here are the actual challenge you know instructions. Download the assets file of the layout on the right or use Figma make. Um, use Unicorn Studio to create an interesting scene or effect behind the two primary columns. It should fit the overall design aesthetic. So, it should really match the colors and it should feel seamless as a part of this actual thing instead of just randomly doing whatever and uploading whatever. Um, it should not make it difficult to read the text because there is text here. See this text down here. And then also do your best to make it unique without overloading a lot of effects because performance is a thing. And then create a five a less than 500 megabyte screen recording of the layout and then just

submit it via video. And we're going to be able to see a lot of cool interesting videos and interesting interpretations of Unicorn Studio in the context of this layout. So hopefully you submit. Unicorn Studio is really fun and it's one of those tools that I use in a lot of my projects just to kind of elevate it beyond just your typical vibe coded cookie cutter layouts. So all right, I will see you soon and bye.