Transcription
GPT40 has completely changed how we build websites. We used to spend hours finding the perfect assets for our designs or creating our own, and now we just generate the material we like, sketch out some quick patterns, write out some letters, and combine them all into a realistic 3D render with a secret prompt. Then, to animate everything and create a responsive website with all these assets, we just use Frame. We literally go from a boring flat design to an exciting 3D masterpiece with just a few prompts.
In this video, I'm revealing you the full process, including my prompts and animation techniques in Framer, so you can also 10x your websites with almost no effort. My name is Nandi. This is Frame University, and let's get started.
[Music]
So let's say I want to create a hero section where we have the text form in the center, and I want to make it a little more interesting because this looks a little bit too flat, a little bit too boring. What if I want to render all of these letters in like 3D as like an object with specific material and pattern? Well, that would have been, um, you know, not so easy task, uh, a few months back or a few years back when we didn't have AI. But now we have it. So let's see the process of turning this thing into something a little bit more interesting.
The first thing that we have to do is to come up with a prompt, uh, that generates us a material that we like. So what I did here is I created just a simple like shape, as you can see in this image. It is just a black background and then a white circle within, because I want to make sure that this material that we are generating is applied to like a sphere 3D shape. Uh, because that is the easiest way to then apply to like other, um, objects and shapes and stuff like that.
Now, you can also see the prompt here, uh, which is really long and really detailed. I'm not even going to like read it because most of it is actually generated with AI. So I just, I, I found like an image on the internet of this material that I liked. Um, and I just said that, hey, please write a detailed description of this material so I can, you know, uh, send it as a message to another AI. And, yeah, it just gave me this super detailed description. And, yeah, that's basically the prompt. Just apply this material to this shape that I sent, uh, on the image, and also make it 3D. Uh, keep the background plain black. These are important. And also keep the element white, but the texture of the material nicely visible. And make it look like a Cinema 4D render, just to make sure that it's realistic and nice in 4K. And the ratio is going to be 1:1. And you can see that the, uh, result is, you know, pretty nice. Uh, we got something that we wanted. If this is not what you're looking for, you can, you know, go back and forth a bunch of times to tweak it. But in this case, this was pretty much what I was looking for.
So, at this point, I could go to the next step where I was basically creating letters and different patterns. Basically, what I did is I just went into Framer and I drew out frames, and within, I just placed in a text layer, increased the text size on the right panel, and also picked a font that I liked. I wanted something really bold and rounded, and I got this SN Pro. And, you know, I can just write any letter here that I like. So, yeah, I needed F, O, uh, R, and M. And basically, I just clicked all of these frames. I just selected them, and then here on the right panel, I could export them. That's why Frame is great. It's not only a website builder but literally a design tool where you can export PNGs, uh, JPEGs, and, yeah, um, it's, it's really cool.
And then I also needed some patterns because now we have the material that we're going to apply to the letter, but we, of course, don't want to make it like white, um, boring. Uh, we want to make it colorful and also some exciting patterns. So I created patterns for each of the characters. As you can see, the F is this little like greenish type of thing with these pixels. And then the O pattern is this blue thing with this liquid, uh, texture or pattern. And basically, here I used the animated gradient background component in Framer to customize this like liquid effect. You can get this from the Framer University website. So if you go to the Frame University website, go to resources, search for animated gradient background, you're going to find this resource, and you can just copy and paste this component to your Framer project, and you can just customize it on the right properties panel. Uh, again, I can customize the color here. Basically, everything. And then, you know, similarly, I can just export this as an image and and use it with AI.
Then, with the same component, I configured this O pattern, which is this wavy, uh, background. And then I also created the O pattern, which is this pink, um, I don't know, weird dots and rectangles. So basically, yeah, that's all of the patterns. Again, these are all exported as PNGs and then used in AI.
So now that we have everything, we have a material that we generated with AI. We have a letter that we exported from, from Framer. And then we also have the third thing, which is the pattern, which is also exported from Framer. Now we can just basically send this to AI. So I uploaded all, or attached all of these images to my prompt. First is the material, then the, um, letter, and then the pattern. Now, it is important what order you use because in the, um, prompt, we are referring to these images as like the first image, second image, and third image. So as you can see, um, the prompt is: Apply the glossy heated, uh, sealed, I don't know how to pronounce this material from the first image to the F letter in the second image. Apply the pattern and color from the third image to the material. Keep the background plain black. Uh, sorry, plain black. Uh, studio lighting from the top with edge light on the top of the object. Make it look like Cinema 4D, blah, blah, blah. Usual stuff. Ratio 1:1.
And as you can see, it just generates a, a really, really cool 3D object that looks exactly how I imagined it. As you can see, it has the material, uh, from the reference image. It is a literal F letter, and then it also got the pattern. Now, the pattern got a little bit different. I could have regenerated it if I wanted to, to make sure that it's, it's a little bit more accurate. Um, but, yeah, I was like, "Okay, this looks cool. Let's go into the next one." So you can basically see here my process of generating all of the letters. I used basically the same prompt. I just always switched the attachments. Um, the, the material was always the same, but the letter and the pattern, of course, was always changing, but the prompt was basically the same. And, yeah, I just quickly generated all of these 3D objects, and I never had to regenerate. Uh, all of these were like on the first try. So, yeah, GPT4 is really, really powerful.
Now, once I had these images, I dragged them into Pixelator Pro. You can see here my screen, uh, to remove the background. I'm not really going to like detail this, how to remove a background from an image. You can do it online as well if you go to like a random site, remove background, or whatever. It's going to remove the background. But, yeah, here I just selected the background, uh, with the selection tool, and then basically I just deleted it, and then I exported PNGs, uh, from all of these letters, and then I brought them into Framer.
So now, let's see how we can create this animated, uh, website with these assets, which is actually also responsive, as you can see, and completely like usable, and it works, and it's interactive, and you can send it to your friends. It's, yeah, it's, it's a real website, even though we're not using code to create it. It's a real website.
So basically, if you want to follow along, um, you can get this starter project down in the description. Um, if you also just want to remix this as like a template, you can also just do that. But, um, yeah, if you want to learn and practice with me, you can remix it. Go to the left pages panel, starter, and this is where you're going to build. Um, I'm going to go to the tutorial page to keep the starter clean for you. And then, yeah, we're just going to quickly assemble this page. As you're going to see, it's, it's nothing crazy. So, we're literally going to build a website in like, um, a couple of minutes.
So, first of all, we're going to grab all of these letters. You can see all of them are right here. If you generated ones or generated, um, you know, objects for yourself, of course, you can use them. But here, I already have these, uh, what I generated. And the only adjustment I made is I added a little brightness on the right panel. So, styles, filters, and brightness. I set it to 114. So, these images are a little bit brighter. And then I also have a little logo that we're going to use on the page. So, first of all, I'm going to just copy these and paste it into this setup. You can see that it already has some frames. So we have the breakpoint, we have a main frame within, then the hero, and then the content. So it's already a little bit set up, so we don't have to mess around too much. And also tablet and phone breakpoints are already added. But, yeah, essentially just paste the letters in, uh, within the content. And then we can just set the content to vertical, sorry, horizontal direction. So these are right next to each other.
Now, the question is, how do we make sure that these are overlapping? Because if we set the gap here to zero, they're not really overlapping, and we cannot really set the gap to minus values here on the right panel. So the trick here is to make sure that the all of the pattern, uh, sorry, not the patterns, but the letters are wrapped in an additional frame. So I'm going to just press, uh, option command and enter on my keyboard. You can also just right-click, add the stack. So now we have this stack. It's going to be called letters. And then we have all of these letters within. But this is still not enough. We still cannot set the gap to minus numbers. So here comes the magic.
First of all, before everything, I'm going to make these letters a little bit bigger. So I'm going to lock their aspect ratio in the top right and set the width to 400. Hopefully, the height also changed to 400. Not really. Okay. So, I'm going to select them again, deselect the lock, and then set this to 400 as well. So, now both the width and height is 400. And now I can lock the aspect ratio again. So we get the one-to-one ratio that we need.
So, now comes the trick, which is going to be wrapping all of these in an additional wrapping frame. So I'm clicking the F and then pressing command and enter on my keyboard. You can also just right-click and click add frame if that's better for you or works better. So, yeah, now it's wrapped in an additional frame, and we have to do this with all of the letters. However, what I don't really like is that it's getting cut off. We cannot, what is happening? So I just wanted to highlight this. So it's getting cut off. We cannot really see the left side. So what we have to do is select most of the frames, basically the content, the letters, and this new wrapper, and set all of them to overflow visible. So now these overflowing parts will be nicely visible. So this wrapper frame will be called rep. And then basically, I'm going to do this for the rest of the, uh, letters as well. So O, command enter, frame is going to be renamed to rep. R, command enter, rep, and M, command enter, uh, and then renamed to rep.
Now I'm going to select these letters within and I'm going to make sure that they are not pinned to any sides. So, I'm going to deactivate all of these pins on the top right. Now, what I can do with this setup is I can select all of these reps and I can set their width to a lower value. Now, you're going to see that they are nicely overlapping. If we set the overflows to visible, because it seems like some of them were hidden. Uh, so again, nicely just decreasing the width, and because of this, now they start overlapping nicely.
Now that we have this, we can slightly rotate each of the images. So I'll rotate this to the left. I rotate this to the right. The R will be rotated to the left as well, and then this one will be rotated to the right. Then I also want to make sure that the O and the M is on top. So I'll select the O, the wrapper of the O, and set it to style Z-index and to a larger value. We might have to repeat this in the future when we add more wrapper frames, but for now, we made sure that this is indeed on top. And what I also want to do is I want to select all of these and apply some drop shadow on them. So these letters are selected on the right styles. We're going to go to shadow, and then it's going to be outside 20. Uh, it's going to be 20, not 200, and 40 on the blur. And then a little bit more on the opacity. So as you can see, it just, uh, casts some shadow on this letter R here, which is really, really cool.
Now, again, for just make it more realistic, this one is probably a little bit closer to us, the O. So I'm going to make it bigger. I'm going to apply a scale on this. And then the F is probably a little bit further away from, so it's going to be a little bit smaller. So 93. The R is also smaller. So I'm going to try selecting that. And then also making that a little bit smaller. And then the M is again a little bit larger. So actually, I think I'm going to stay, yes, one, or maybe a little bit smaller like this. So it's a little bit like, uh, there's a little variety, uh, in sizes as well. So, yeah, it looks a little bit more interesting this way.
So now we just have these here. It's pretty static. Uh, there is nothing crazy, and I can drag these images, which is not cool. Um, so make sure that all of these are selected and style draggable is, uh, applied on them. But let's go to the exciting part. How do we animate it? Right? Well, we can just select all of these letters, and on the right panel, we can click effects and appear. This basically adds an appear effect to them. So if we load, you can see they appear with this effect. Of course, the default setting is not something we like. So, we're going to go to this effect setting here, and we're going to specify our own effect. So, it is going to be a Y offset 150 to the bottom, and we're going to scale them down as well. So, they're going to be coming in from the bottom from a scaled-down version. The opacity will be zero. So, they're, they're going to be hidden at first, and then they're coming in from there. The transition will be 0.8, and then the bounce will be 0.3 to get this nice effect. Maybe it's going to be a little bit slower, or sorry, a little bit faster, 0.7. And, yeah, uh, that looks great. You can just preview how it looks by clicking the preview. And, um, and, yeah, now if we preview this, everything comes in at the same time. We want to stagger them though. So how do we do that? Well, first of all, we select again this, uh, enter effect, and on the transition, we add 0.1 delay. So now all of these were selected. So this 0.1 delay is added to all of them. What I can do is I can just select the O and override the delay to 0.2. Then the R is going to be 0.3, and then the M is going to be 0.4. So now if I preview again, these nicely come in with a staggered effect.
But once they come in, they just stay there. And that also is not too exciting. So what I want to do is I want to make sure that when they come in, they start like floating. So how do we do that? Well, first of all, we're going to add two movements. First is going to be a left-right rotation that is like looping. It's continuous. And then an up-and-down movement. So first of all, we can add the left-and-right movement on the wrap frame. So these wrappers are selected. Uh, effect is applied on the right. This is going to be a loop effect. Now I'm going to set the type to mirror. So it goes back and forth between the two, uh, states. Rotation will be, uh, zero for now. And then the transition will be a little like easing curve. I'm going to just do something cool here. And the time is going to be like four. Let's say for, for this one, for all of them actually, because I'm again applying this to all of them. And then the rotation is going to be, let's say, three or four. And now I'm just again going to go through each of the wrappers. So I'm going to click the second one. I'm going to change the rotation slightly, and then the time as well to five. And then the time here will be three. And then the rotation again slightly different, again on the last one, rotation different. And then the timing is also different. Maybe it's going to be seven here. So now if I preview, you're going to see that as they come in, they start moving slowly to the left and to the right. But I also want to make sure that they are also moving up and down. And by the way, the reason why I'm overriding these timings and rotations is to randomize them so they're not like moving in sync, uh, like a little dance or something, but, you know, something that is a little bit more random, like a floating effect.
Now, to add an additional top and bottom movement, we have to create an additional wrapping. So I'm going to just select all of these wrappers, uh, one by one. Actually, I cannot do it at the same time. So, first one, press command and enter. This is going to be called up-down. And then I'm going to do this for the rest of the reps as well. Once we're done with this, make sure that all these up-and-down frames are set to overflow visible as well. And then here again, I'm going to make sure that the second up-and-down, which is the O, is on a larger Z-index to make sure that it's going to be above everything. And then, yeah, I can just select them again. All these up-and-downs, and the effect loop will be applied. Rotation will be zeroed out. And then the offset will be changed here to minus 30. Let's say I'm going to again set a little curve here that I like. And then the time will be, let's say, three. And then the mirror will be used again because I want to make sure that it goes up and it goes down. So then I'm going to click through all of them. So the second one will be maybe 50 on the Y offset, and then this timing will be maybe five up and down. Third one will be maybe six on the time and 20 on the offset, and the last one will be maybe five and then 40 on the offset.
So now if I preview these again, you can see they come in and then they start moving up and down, and they are not in sync, which is pretty, pretty cool. This is what we wanted, but I think the O and the M are in sync because they have the same five-second, I think. Yeah. So we have to make it a little bit different. So maybe this is going to be like eight. Um, so now they're going to be different, and, yeah, now we have the main attraction of the website, and we can start adding some additional content. It's really simple, just navigation and some text and bottom on the bottom. Text and button on the bottom. Um, so, so yeah, let's do that.
So first of all, I'm going to do like a navigation. Really easy to do it. Drag the logo here. Then press option command enter. This adds a stack. So now the logo is wrapped in a stack. Let's call this content. And then I can wrap this in an additional one. Again, option command enter. It's going to be called navigation. This is going to be set to height, uh, 64. And I'm going to just make it a little bit bigger. Then the content frame will be set to width fill and height fit content. And then it is going to be set to space between. Now, we're going to have additional frames or layers here in this content frame because we need a little text, little links. So, I'm going to just click here, T on my keyboard, and then write work. I'm using this, uh, undefined font, uh, in Framer, and I'm making it 14 pixel size, and then the color will be 60% white. Now, this is not going to be the link. I'm going to wrap it in a stack again. Option command enter. As you can see, we use it many times. Then I'm going to set the width to fit content. I'm going to set padding on the left and right to 10. So we have some space here. And then I'm going to set the height to, uh, 34 pixels. Now, once we have this, we can call this menu, menu link. And I can turn this into a component. So we have a nice hover state. So I'm going to go here, create a component. This is the default variant. And I can just click here to create a hover where basically we're changing the opacity to 100%. I can click here transition and set it to instant. So when I hover over, it's an instant transition. And to make sure that when we duplicate this, uh, actually, we now have two, but I want to make sure that they are in one group. So I'm going to select both of them. Option command enter again, and then set the width to fit content and zero gap.
So what I wanted to do and say is that now I want to say something else here. I want to have a different text. To achieve, uh, the all property on the right, we have to add a variable. So in the component, the text is selected, and a plain text variable is added. So now I can rename this to about, let's say, let's make it uppercase. And then I'm going to duplicate again and say contact. Now, of course, I also want to set different links on these. So I'll also add a link variable, but I'm not going to set, you know, different links now. Uh, but just for the future, that's how you do that. And basically, now we have the navigation. We can command X on the navigation and then paste it within the desktop and make sure that here it is here on the very top. It's not nested within the main, and it's set to a fixed position, pinned to the top left and right. And that's it. Now you can see that it goes to the edge, which I don't really like. I want to have like a max width on that. So the content will have max width. Um, I think it's going to be 1,100 pixels. And I'm going to have some padding on the left and right, 20. So now we have this setup. Really cool. Now we have a navigation. Uh, and as you can see, it looks great on phone as well. So we don't have to do any optimization there. And maybe on the logo, when we click, we want to go to the homepage. Maybe that's something, um, that can work.
And then we need a little content block here on the bottom. So now if I create a frame here, so I'm just going to press down F on my keyboard and draw a frame. You're going to see that it's being placed within the content frame, and it is right next to the form text. So I have to make sure that they're right below each other by setting the content frame to vertical direction. Now I can just reorder these and make sure that it's right here on the bottom. However, I kind of want to position it here, and it's not really going there. As you can see, I cannot move it there. But what I can do is I can set the content frame to space between. So now this is the on the bottom, and this is on the top. But I don't want the form to be on the top. So I'm going to do a little trick. I'm going to duplicate the frame, and I'm going to move it to the top. I'm going to make it just one pixel height. And I'm going to set the width to fill and hide the opacity, or just hide this element. This is just going to be a spacer or a helper frame that makes sure that the form is in the center, actually. So now I can actually start working with the frame on the bottom. I'm going to call it bottom, and maybe set the width to fill. H, make sure that it's a stack by clicking this layout here. And I think that's it. I'm going to make a little bit larger for now and remove the fill color.
Now I can click within and create a text layer. I'm just going to, uh, paste in the text that we need. I'm going to set this to width fill. We'll still be using the same font. And then I'm going to set the height of the parent frame, which is the bottom, to fit content so it fits this text. Then I'm going to duplicate the text. Make sure that the bottom is vertical direction. So these are right below each other. I'm going to call, or not call, but rename, not rename, but rewrite the the text on these. So maybe it's going to be book a call. Uh, probably going to be a little bit smaller, 14 pixel. And then I'm going to set this width to fit content here. It's fill on this text because we want to make sure that it is staying responsive on smaller viewports. But this here needs to be, uh, width fit because this is a little button, and that's what we use for buttons. Uh, to make sure that it's on the left, though, we have to set the bottom to left alignment. Now the book a call will be wrapped in a stack. Also this stack will be fit content, and then the height will be 34 pixels, and then padding on the left and on the right will be applied. Um, and a little background color will be here as well. Now, this will be renamed to button, and to make sure that we can see this text here. Now it's white. We could change it to black, but I'll just simply apply a blending mode, which is going to be difference. Uh, you could ask Nandi, why the hell are you doing this? Like, you could just, uh, you could just change the color. Yeah. But what I want to do is I want to change the color of the button on hover to black. And I want to make sure that even if the button is black, we can see the text. You can see now the text is white. Now the text is black, thanks to the difference blending mode.
Now I can set this button to a component, or turn it to component. Option command key on my keyboard. Then make sure that this is not selectable text. Selecting the text on the right properties panel. Then clicking user select to make sure it's not selectable. And then we can also make sure that we see a pointer cursor when we hover over this. Now I'm going to click here to add a hover state. And this hover state will actually be really simple. We are changing the fill color to 0% transparency. So essentially, we're removing it. And then adding a border, which is going to be white. Now, I want to make sure that we're transitioning between these two, uh, instantly because it looks a little bit better in this, uh, design or for this design. So, I'm going to change the transition on the primary to instant.
Now, if I go back, I'll see the same issue. When I duplicate this, wrap them in a stack and change direction to horizontal, I cannot really change the title here. Set to go within on the right panel, click content, create a variable which is called title, and I can do the same for the link in case I want to add links to these buttons, which is really likely. But then if I think about it, I also need a secondary variant. So why not create that here? I'm going to just make sure that on the right panel, we have a border set. It's going to be white, maybe 10%, and then the fill color will be 0%. So we see this little outline button, and on hover, this, uh, border will be changed to 100%. So it's going to be fully white. Uh, and basically that's it. I can just switch this to secondary, secondary variant, and then the title will be learn more.
Now, if I preview this site, I can hover over these buttons. They look really nice. And I can also hover over these navigational links. And maybe I actually want to have a little bit more space between the text and the buttons. So I'm going to set 16 for the gap between them.
Now, for the responsiveness, we can see it's not that great just yet. So to make sure that it's better, we can select the letters, uh, stack here on the tablet, and just scale it down with a scale transform. So I'm going to scale down, and then here on phone as well, scale it down. Every single effect and everything is kept. It's just scaled down for a smaller viewport. Here, maybe I want to make sure actually this M is a little bit more to the right than what we would need. So here I'm going to just make sure that it's a wrapper. It's a wrap is a little bit, um, smaller. So we're bringing it closer to the R. So maybe something like this. Yeah. And then it doesn't overflow here on the phone. And essentially, that's basically it. If we take a look at this, we can see that we have created the site with these AI assets, and it's interactive. It works. And if you press publish on the top right, you're able to have this link. Uh, you can also have like a free Framer subdomain, and you can open the site, and basically, it's live on the internet.
So, yeah, that's basically it. That's how you use GPT40 to create crazy assets. And by the way, these can be used for anything. Like you can apply these materials to anything. Um, like your logo, your whatever you, you just drew like a shape or icon, whatever in Figma or in Frame, and you can apply any materials or, or, yeah, anything to with AI, which is, which is pretty crazy.
So, yeah, that's for this video. Again, make sure to comment any questions or any tips or anything. Uh, just say something, please, because we need engagement. Um, and, yeah, check out Frame.University for other resources, components, and remixable stuff. If you're using Framer, it's probably going to be a great little resource for you. So, yeah, like this video, subscribe for more, and I'm going to see you in the next.