This 3D Website BLEW OUR MINDS

For the site of the week, we have a super cool 3D website and it's very um minimal. We create feelings by Mantis. I think it's a studio from two people. We'll check out uh their about page. So, they have this really nice intro and you see this is like 3D and you see kind of like the veins and they're not the veins, but it's a very cool effect. And did you see how it loaded? We'll see more of that. We create feelings. So, this is about storytelling. And as I scroll, you see how it's all 3D. And it I just I I really love it. Um, great design doesn't just guide behavior. Then you go and scroll. It speaks directly to the nervous system. Ah, so it's not veins, it's your nervous system. There you go. Yeah, it's really cool. And it's kind of like starting with a touch like the, you know, that's really nice. And you see it's kind of like procedurally being made and drawn even though it's 3D. That's really cool about it. This is this is a nice tagline for your agency website. Like you have a client like we'll talk to the nerves of your clients. So yeah, and here they show uh like these really really nice visuals. I I really love them. The minimalism in here is really beautiful. Yeah, it is. And do you see like the details, the typography here and the color green? It's just there and it is popping but it's not too much. Uh same here. And then here they have New York City and then they have the weather. We are adding this to my agency website. We are going to add this. I'm not sure if we will add it in the he in the nav or in the footer, but we had this idea to add it. A bunch of agencies do this. And this is just so cool. Just like nice little details. And as we scroll, look how the next thing pops. And yeah, I absolutely love it. I mean, when you have Adidas and Google and Microsoft and Meta in your portfolio, you don't need to Yeah. to say too much. Uh except they have also awards not just that. Uh and yeah this is this is super cool. Look how nice this is coming together like the the effect that they are creating here. And I was just thinking about how I would recreate something like this because it's always really difficult when you've got like height, right? Animating height in Yeah. Well, you can animate how height to auto, right? What I what I don't know how I would approach and this is what is interesting me here is you see how these are dented right and if I click on development it's going to come up and it's going to shift the rest as well because like as they come out well this one doesn't well if I click no this one no they have to be yeah like this you see how they come up and then when as they come up they shift the rest as well. So it's kind of like the elements are being triggered to be full width of what they can be once they pass the threshold. So maybe is this like a Gap observer? I'm not sure. H they are using Gap and Versal and obviously 3JS for the background. We'll talk about that. So, I don't know. This is This got me thinking I should recreate this as a component in Web Flow. It's nice. I love just the gray gray and green. It's such a classic. Well, anything like orange and green, gray and green, like when you've got this, it really makes an impact when you see that green. I'd like to see more of it in some ways, but like um they've you know when you see the green as um yeah, it draws your attention, you know. It does. And this footer is also pretty nice. Yeah. And the the hover interactions and this hand. This is pretty cool. But we're not done yet. A few other things. They have an about us. And the about us kind of changes the the mood a bit. it becomes all colorful and I'm honestly not a big fan of uh what are these uh creatures called? Praying mantis. I like them but I don't like the art style and I don't like the I don't know. I don't know. I feel like I think these are real photos, you know. It could be. You know what it's I think this is called like an orchid mantis or something cuz it looks like a flower. Isn't it sad that we are asking this question? I know it's crazy, isn't it? It is quite sad. Like because of AI, we can't appreciate the photography and art anymore. This 3D I'm not sure. Do you think this is this is probably a 3D model made in Blender, right? And then pulled in into 3JS. Yeah, I'm not too sure. for people who are interested. I'm just learning this. But if you go to 3J 3JS.org so this is 3.j 3js.org um and here you can go to editor and in the editor you can actually upload uh a 3D file. What is the the format called? Um there are like a bunch of formats that are supported and then you can play around with it right here. And then obviously you can take it from there to build something like what we are showing. Uh but there is a lot more uh that goes into it. Things like properly optimizing and this site even though I thought it is optimized it's causing my fans to run. So yeah but still pretty cool. What's the website? The website we'll link it below but it's mantis. works. I'm a sucker for like a concept like because really the website is pretty straightforward like it's again it's just a canvas normal website scroll down one pager that kind of moves this person but this concept of nervous system touching and feelings and whatever. I'm always a sucker for like how it translates how that concept that idea translates to the rest of the website. It's really really cool. Um, this is my favorite part too. Yeah. How would you do it? How would you how would you come up with a concept and then how do you try to translate or like expand in this case you expand it to to do more? Yeah, honestly I think it's I think it's like a brainstorm exercise creating like a mind map trying to get to the core of what it is that you do like and start and probably a lot of word play that comes along with that like engage touch feel emotion and trying to and then you know through kind of uh what do you call it just sort of a process of of elimination just coming coming with some values or some words that that you feel quite positive about and then trying to establish a relationship between them. Like maybe emotion and touch uh like touch points and engagement are all, you know, possible with the with the nervous system or something like that. You know, you a lot of it is just like, you know, pulling your finger out and just like making up something. But that's creativity. That's exactly what creativity is, right? is just coming up with those correlations um that sort of tell that story and then it's a design exercise then they've hit on that concept and and haven't haven't just gone really super heavy with it. I I'm fascinated by this like and again this is like the something that you do in branding and when I mentioned that I'm doing a rebranding for our own website doing it in 3D in Blender we're trying to come up with ways that we want to look at things. So one idea that we are working on and it's not final is blooming. So that we help businesses to bloom. So again worth play. So you go from blooming to flower. Um but we want to make it 3D and uh if you make a flower and make it 3D, it's it's a very feminine thing. Uh and that is nice, but we also want to be kind of like go in a techy and more sharp way at it, which is not feminine if you do it sharp. So we're trying to balance things out by imagining how can we make a flower that is 3D that is also not AI looking. Um because we are going to make it in Blender if we go with that direction and then we are trying to basically come up with these like concepts and then these concepts kind of bloom into bigger things and then one thing that we are working on is like having the flower uh to be kind of like feminine in character and soft and beautiful. uh but then kind of like in the shapes that we are using in the website to use like sharp corners and a really red like extreme red that I have in my branding. So a bunch of things like this uh and then obviously we can animate it. We can make it bloom and things like this. That's that's how I'm looking at it. And for clients, uh, we try to find like what is that kind of like a memorable part of their brand or their experience and kind of take that and bring it down to something very fundamental, very simple. It has to be simple because when it's simple, then you can scale it back up to do things with it. Like the dots in Open AI, if it was something complex, you couldn't do much with it. But because it's a dot, you can make things with the dot. And here with the nervous system, they kind of connected it to feeling and making memories and kind of making you making the design pop without saying maybe we make the design pop. We were saying like we will touch the soul of your Well, they haven't said this, but that that could be a line that they could say. Yeah. Yeah. Yeah. Yeah. Yeah. It's fun. again if you can and the only difficult aspect of it all is like you know there's always going to be this difficult balance between we want to we want to resonate with our target audience we want to make sure that we say the right things and we use the right colors that really you know resonate resonate is the only word I can think of right there but at the same time you still want to you know stand out you still want to put your personality across so there's this middle point I think that's very very difficult to reach where you you're considerate of your client your target market but also expressive enough where you're a you're you're not just a do you know what I mean like you it's very very difficult to find that and if you can do that that would be great 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