Framer Just Got SHADERS!

Framer now supports shaders and these are gorgeous. So, let's have a look and see what Framer does and also how it compares to Unicorn Studio. Command AI So, Framer now allows you to add your own shaders as a component and add it to your page. Uh you just go to insert and here you have elements, shaders and these are all the shaders that they currently have. But, I uh I noticed that they are adding them uh like quite quickly. And these are also just simple components in a way. Theoretically, you could just build your own. Just with AI, you could build your own. But, it's nice to have some like pre-made ones that kind of like tested. Let's I I hope. I assume that they are tested. And yeah, they're really really nice. So, you As you see, I can click on them and each has its own settings. Uh some of them are animated, some of them are not. But, I assume even those could be theoretically turned into some animated shaders. Um some of them need an image. So, they are processing the image that you have in a way. But, at the end of the day, they are quite simple and they're very very beautiful. As you see, I'm lagging a bit because I'm having too many shaders. Um yeah. So, here just As you can expect, it's pretty simple. It's It's really really cool, right? But, I think designers will do something very creative with these. I think it's all in the hands of the creators. Because this is an image that you can swap, for example, in this case. Oh, yes. Look at that. Yeah. And they have obviously like different type of um Mhm. effect. I Again, as I mentioned, like you could make these from scratch fairly easily. You could go to ShaderToy or ShaderGPT and get very similar ones with the prompt even ready and just make your own. It doesn't But it's just something that already exists and you just drop it in Mhm. if if it works for you. So, that's really nice. It's really nice of Framer. Now, if you if you've heard shaders, you probably have heard Unicorn Studio. That's another tool to do these kind of like really cool WebGL stuff. So, this is just an example from the community. Uh what is the difference? So, if you need something really simple like a background effect where you could have some design or text on top of it, these from Framer are perfect. But they are not necessarily as interactive or interactive that that much. But these from Unicorn Studio, they have layers. This is where you have the these different layers and you can add mouse interactivity. Uh so, for example, if I add position now, this model also moves. Um you can do a bunch of things like this, which you can't do with Framer, at least yet. Uh you can also do like timelines. You you have just so much more. Uh and if you haven't used it just so you see, these are uh models and these are the effects. So, they have tons of effects. And what you saw with Framer is essentially one of these effects kind of like constrained like even more Uh and that's it. You you have that inner frame. Whereas for Unicorn Studio, these can be layered on top of one another and you can make them somehow interact with what they affect one another like a noise effect like a 3D model that can warp it or do some crazy stuff with it. Yeah, it's really really cool what you can do with let me show this with Unicorn Studio. Just if you haven't, just have a look at the community stuff. They're amazing. I mean look at this. This is kind of relevant to what we what we were talking about earlier today for that little project of us that we have going on. Yeah, you know, you can do this kind of things with it which is really cool. Very lightweight. I've used it for a client website. Uh these from Framer, I assume they are based on React React 3 Fiber probably. Maybe. I don't know if React 3 Fiber would show up. It doesn't show up. It just says React. We'll look into it. See if we can determine what is the thing and and you know, whether yeah, you could load it into you could create a new code component and get it all working like that through a code component. Um but Definitely. Like I and V1 I've seen people Yeah. And I've seen people using Workshop creating They've been creating WebGL and shader effects just with custom code. People do it in Webflow too. Like I've done it just with custom code. Now it's just cool that there are some um like simple, very simple, but powerful because you can do so much with these. You can do so so much with these. This is part of a larger conversation on my show Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI