I Built an Award-Winning Website in 19 Minutes using Google AI Studio transcript

In this video you will learn how you can create this scroll effect. A lot of people have been asking how is this possible to build this is without any lagging and it works well on desktop and mobile as well. So in this video I'll show you exactly on how you can do it. I'll share you all of the prompts on an example of a website with a plane. We'll create a transition and then I'll show you how you can create a video and then turn that into an images to have a fully functional website based on scroll.

This video is not affiliated with any of the tools that I'm using. All of it I'm sharing is just what works for me and feel free to use whatever AI you prefer and a lot of them are free. So I'll say if something requires payment and for now let's get into the video. And we're going to be building website of this quality. So something that is very well designed, award-winning design quality, not some WordPress theme. Stuff like this you'll be able to design by the end of this video if you follow the techniques that I'm sharing.

Something that has unique fonts, unique animation, similar to what I built here. As you can see it looks very well designed. I've used some unique fonts. I'll show you how you can can connect those as well. All of it on the cloud. So nothing is running locally. Basically you want to recreate the same thing. You can just go to motion sites. You can copy the prompt and this prompt would include everything that you would need to build like Google fonts, custom fonts.

As you can see everything is here. And the first step would be actually creating images that we need. As you can see I've already generated two images that I'm going to be working with. We have the first image and then we have the second image. So the the way that you create it is you create the first image and then you ask to zoom out. And it will basically create you two images that you can then animate similar to I did here.

So first I created this image and then I asked to zoom out and open the the and it basically then do the transition. For the transition, it is very simple. Just use clean 3.0 and for the prompt it could be animate this smooth transition from frame one to frame two, natural and aesthetic scene. And by the end, you'll have this video which looks something that we can work with. Now, let's download this video and I'm going to go to the website called JPEG uh video to JPEG.

So, we're going to create a JPEG sequence to then be able to work with it and let's just upload our video that we just downloaded. And uh or to make it simpler, I'll show you another way on how you can do that even without creating a PNG sequence. So, we're just going to create first our website. So, let's go here. And just type in Google Google AI Studio. This will allow you to build websites for free. This is absolutely free website.

I mean, at least I'm on a free plan. So, let's now start with a creating a simple website, a simple hero section. So, I don't really want to guess uh spend a lot of time on guessing. That's why I'm going to go to Motion Sites and just find some fonts that I like. So, one of the fonts that I like is this one. I'm just going to copy the uh the prompt here and I'm going to paste it here and I'm just going to delete a bunch of stuff.

I'm going to create only the kind of the CSS styles. So, as you can see, it has a lot of different stuff like the mask real effect that I don't need. So, I just need this font family and we have we can remove the assets. We can remove a lot of these stuff as well. After I did that, I'm just going to copy that and I'm going to go and I pasted this into AI and let's just say build me a hero section and on the image you can see that the text is aligned on the left side.

I want it to have uh aligned centered and at the top of the image, and then we don't have anything on the background. Let's just have a plain white background. Um, and the text is centered. I know I provided you with a prompt. The prompt is broken. I removed a bunch of stuff, but just do your best to create um, the hero section based on what I provided. And let's just paste that in here. And let's just send it and see what it comes back with.

And here is our result. As you can see, it looks very beautiful typography. We have beautiful navbar. Everything is, of course, responsive for mobile. And it is it looks very different from what you would receive if you would just ask AI to create a hero section. It would not be like this. I'm sure you're already aware of that. But now let's actually add our video, and for that I'm going to go to the video that we generated in the beginning of this video.

I'm just going to copy the link here. I'm not affiliated with Higgsfield. Feel free to use whatever software you prefer. And now let's paste this back into here. And for the prompt, there is a specific prompt to recreate the scrolling effect, and it is available on Motion Sites. I'm just going to copy this, and I'm going to show you how you can find that here. So, it is just this prompt implementation, and you're going to copy this whole thing.

But we before we paste that, let's actually add one more section, or a couple of different sections. So, I'm going to say below the hero section, let's add a section with which would talk about us. So, let's have a text on the left side, and some image on the right side. And under that section, we'll have the features section. So, we'll have the headline, tagline, description, and then we'll have two cards. So, one on the left, one on the right.

Under that, we'll have some stats. So, just have a headline, description, and then we'll have um, I I like, let's say five different numbers with some short descriptions, have footer under that. So, I just described with normal words of what we need and I'm going to say use the styles, the fonts that we already established. I mean, we don't really need even to tell that, but let's say that and let's just send and see what it comes back with before we add our interaction and video itself.

And here's our result. As you can see, we have the section about us, we have the section with two features, and the section with stats. One of the things that you can tell AI to make your sites around three times better is just say this thing, the section with stats should be 100 VH and all of the sections should be 100 VH each because AI sometimes very often create sections that have too little space and 100 VH just means that all of the section will take 100% of the height of the screen.

So, if you're coming from a smaller screen, it will be a little bit smaller. If you're coming from a larger screen, uh, it will fill the whole height of the page and this will just give more space to the page. So, let's wait and see what it comes back with here. And here we have our updated website. So, you can see now our section have way more space and way more breathing availability. Now, let's add our video. So, go to Motion Sites and scroll down, click on copy the prompt, paste it into a notes app and find a section that says video source and implementation.

That's exactly what we need. All that we have to do is just replace the video source link here with the one that we generated. I'm going to paste that here. And I'm going to replace the video that we generated. So, the video is this one. Just paste it straight into here. And I'm going to say let's have our this video and this system that I described below on our page. You can adapt it to fit our website because I took this system from another website.

Just implement it to look beautiful on our website. You can change the content, you can change the position of the elements to fit the nice scroll effect that described there. So just basically do whatever you want to make make it look good. And let's just send that and see what it comes back with. The result that we received, as you can see, it it has the video in the background and it is tied to scroll, but there are a few issues that I want to fix.

The first one is being that we have the video being darkened. This is a very common mistake that AI does. It always darkens the image. So we're going to say uh please revert to the color scheme that we had before. I didn't ask you to make it into dark mode. All of the contents should be in the dark um I mean all of the text the buttons should be the same color at was as it was previously and the video should be 100% opacity without any overlays.

So fix this uh and then I'll tell you what to do next. So let's just send it and see what it comes back with. And this is the result that we received. As you can see now, the video plays in full opacity and it has the scroll effect. And then we can scroll down and then we can see that the video is being played. We can see that the text appears from the bottom of the page and we can scroll down. Now the only issue is that when we scroll, a lot of the text is not readable, which is not great.

So let's try to fix this by adding a um transition kind of a gradient, but it will use a mask. So let's try to explain that to the AI. I'm going to say on the bottom of the page from the bottom to about around the middle of the the let's have a kind of a gradient from solid to transparent and mask all of the content on our page to that gradient. So, the text and everything kind of coming out of nowhere from the page with a transition, if you understand what I mean.

I try to to explain as best as I can. And let's just send and see if it can understand us or no. And here is our result. As you can see, once we start scrolling, the text appears behind the plane. Looks like it actually a 3D plane and we can scroll and the animation is smooth as well. Also, everything works perfectly on the mobile. Let's preview how it looks on the mobile. So, as you can see, we have the navbar, we have the plane here that also animates and we can read all of the text once we scroll and the text as well.

So, yeah. This was for the homepage. Let's now build the rest of the pages so you can understand how you can quickly build something. Once the homepage is ready, it is very easy to create the rest of the pages. That's what I'm going to show you. And then I'll show you how you can grow an X. I'll show you the tips that you can do to grow. Like some example, like this dude, he created something and he tagged me. I think it could work better. >> [clears throat] >> He used one of my prompts, but if I like it, I can just say great result.

And 46,000 will see this post, this comment. Not 46, but a lot of people that follow me will see my comment and this will be first kind of activity of this user. He has just six followers, but if a lot of people will see this post, then he might get more followers. If you created something using my prompts, just type and mention me and I reach out and I communicate with all of you who create and who want to grow on Twitter.

So, be sure to do that. Growing Twitter this one of the best thing and I'll talk about this a bit later in this video. For now, let's build the rest of the website so it's actually not just a landing page, but it's actually a full website. And now all that we have to do is just go to Landbook and kind of see how about pages are structured so we can create it with our words. We don't have to even give it a screenshot.

Just explain what we need in our words. So, I like this one. This looks pretty cool and I will just basically write down what I wanted to create. So, I'll say create about us page. We're going to have a headline, description, and then we're going to have slider with years kind of 2021, a short description, then 2022, a short description. It would be a horizontal slider. So, whenever it would be tied to scroll. So, when user scrolls, the slider would kind of go to the right side.

Under that we'll have some small description like I don't know, 20 pixels text and under that we'll have around 16 pixel text with some description. Then we'll have an two cards with testimonials and under two cards we'll we'll have like a short headline and a button to book a call. Then we'll have a team section. So, just have an icon like a human icon, then have the name and some description. So, basically eight cards in two rows.

Then we'll have a section with let's say frequently asked questions and footer. So, now I can just paste all of this into our AI and see what it comes back with. Now, let's create another video so I don't want to have the same video on the about us page. So, let's take this image as a as a reference and then I'm going to click here to create a reference. So, just reference here. Again, feel free to use GPT image directly.

I'm going to choose this and I'm going to say, create an image like this, but move the plane to the more to the right-hand side and have a little bit closer to the middle. So, like it flew a little bit farther from the screen. And also, maybe change its position to look directly into me, you know, on the left whatever, if you understand what I mean. Keep the same without zooming out the image. There should be some clouds, same color, same stuff.

And let's just create a couple of these images. And let's just wait and see what it comes back with. Once the image generation is generated, let's select the Kling 3. You can go directly to the Kling's website for that. And I'm just going to upload the first shot. And then we're going to upload the second shot here. So, we're having two images that AI will animate. And for the prompt, we're going to say, animate this multi-transition from frame one to frame two, and natural and aesthetic scene.

We're going to select, let's say, 10 seconds. We're going to choose 1080p and let's just generate and see what it comes back with. I'm also going to try one option with seed and see what does better. And here's our result that seed 2 generated. As you can see, it looks really cool. We have this um plane that is changing its position, its size. So, let's use this video. I'm going to just copy the link. I'm going to go back to our website home about us page.

So, this is the about us page that AI generated. And now let's just replace the video. So, I'm going to say, only on about us page, let's use this video as the background of the hero section of the as the video background. As video as same scroll effect just change link. And let's just send and see if we need to make some content to the pages once the new video is live. So, let's preview what we have. So, once we start scrolling, we can see that this section needs some a little bit editing, but overall it looks really cool.

I like how the the plane kind of goes around this text. So, I want to do something similar. So, on the hero section, I want to move the our journey text to the bottom of the page. In the hero section on about us page, let's move the our journey section to the bottom of the hero section. So, it should be just around like 20 pixels with bottom padding, and it should be very close to the bottom. Basically, now it is closer to the middle of the page, and I just want to move it to the bottom of the hero section.

In the meet our team section, let's have all of the eight people on the left part of the screen. So, right now we're taking all four grid cards. I want to just keep four cards empty on the right-hand side, and below the four cards on the left-hand side, I want it to have four more grid card, and those four people that are right now on the right side should be on the left side. So, these are the two edits that I wanted to implement.

I don't know if it can follow along, but let's wait and see what it comes back with. And here is our result. So, now we can scroll. We have this plane that goes around that and it looks pretty cool. So, now let's post it on social media and I'll show you one cool trick that will get you followers 100%. So, just go to the home page. I'm using screen um screen studio for most of my recording. Right now, I'm going to use clean shot and because screen studio has this cool effect like you can see in this video.

Whenever I click on something, it kind of zooms in a little bit. You can make it bigger or larger. So, once you start, you can just start scrolling so the video plays out. Scroll up, click on about us page so it can see people can see that this is an actual live website. And once you're done, just click save and just crop it whenever needed. And start here and let's just save that. I'm going to go to Twitter. If you're not here again, highly recommend getting a Twitter and posting here.

The situation might be that the someone from the team might see it like this one. I just created a video with Gemini 3.1. I didn't even mention the company, but the logo and someone who works at AI studio saw it and his post he commented and obviously has a lot more followers than I do and a lot of his followers actually saw his comment. And this is the best way to grow on Twitter. You cannot grow on Twitter just by getting discovered on a feed.

You can grow if someone popular reposts your post and then you get a lot of free distribution. So, once you're done, just paste it in here. And depending on what tool you've used to create, I would recommend you to mention it. So, I'll say Gemini 3.1 plus GPT image 2 plus students. Whatever. I'll say Google studio. Google AI studio. Mention the company as well that you've built this is free and a great way to build these animated websites.

Just type something else. You can look inspiration in my profile and if you tag Google AI Studio and if your post is really good, so just do that. Tag me, tag some of the companies that you're building it with and this will be great for you way for you to grow your account. So as you can see now we have this beautiful video that we created the website using AI. All of this is possible. Now you can build stuff with AI without using any framework, without having any developers, designers.

All of this can be done. And thank you for watching and I'll see you in the next video.