00:00Every AI built website looks exactly the same and your clients know it.
00:04But there is a new workflow using cloud code with Nano Banana 2
00:08that lets you create these amazing scrolling animations without any coding.
00:13The kind of stuff that makes your clients say shut up and take my money.
00:17And I'm going to show you techniques that I've never seen anyone else show.
00:20We're going to build a website, we're going to deploy it,
00:22we're going to make the animation and also generate the assets
00:25and best of all we're going to make it SEO optimized for the website browser.
00:29So, as in the start, I show an example like this.
00:32I built this website in exactly 5 minutes.
00:35As you can see, it has this cool scrolling animation.
00:38I redesigned a plumbing website.
00:41So, basically, this is the animation I did inside it.
00:44And it's pretty cool, I'd say.
00:46So, if you want to replicate this kind of stuff,
00:48today we're going to build something else.
00:50We're going to build a website for medical clinic.
00:53So, we're going to start off by copying a photo prompt.
00:56And as you can see, I have it inside my community.
01:00If you are not a member yet of Creator Core Plus,
01:02I highly suggest you joining it because we have a ton of value in here.
01:06And if you are a member, you can just easily copy the prompt right here.
01:10It's just a basic prompt telling to make a start frame.
01:14So, we are making a website for this business.
01:16And we want to change the hero section to make it actually better.
01:19So, I want to make something more abstract and something more visually appealing.
01:25So, that's why I want to make this kind of energy cluster inside the image.
01:29So, we're just going to generate this asset right here.
01:32We're going to copy the prompt.
01:33So, we're going to use the Google Gemini for all of this.
01:36We're going to use the Pro model.
01:37And we're going to select to create an image.
01:40And that's it.
01:40We're going to hit this prompt.
01:42And it will create a complex image of energy cluster.
01:46So, it's just a little bit more defined.
01:48But you can create this prompt yourself.
01:50Or you can just copy it from the community if you are a member.
01:53It does not really matter because you will get the results that you actually need yourself.
01:57So, let's just wait a bit while it's generating.
02:01And while it's generating, we're also going to copy the prompt B, which is the end frame, the exploded.
02:06So, the whole idea behind this is the first photo is the start frame.
02:10And the second photo is the exploded object.
02:13So, it could be anything.
02:14It could be a phone.
02:15It could be a laptop.
02:16So, you can just make anything out of this.
02:20So, as you can see, here is the energy cluster.
02:23We're just going to copy it and download it.
02:26And we're going to insert the second prompt, which is using the exact same camera angle and lighting and the
02:33same background.
02:34Generate an exploded view of the same energy cluster.
02:37So, this is just basic idea behind this.
02:40First image is a start image.
02:42And the second image is the end image.
02:44And after we get these two images, we are going to move on to creating a video for it.
02:49So, let's download the second image.
02:52So, now when we have both of these downloaded, we're going to move on to the video generation.
02:58So, as you can see, I have also a prompt for this inside the here.
03:03And the video generation is this basic idea behind this is just to create a seamless animation transitioning from the
03:09starting image to an ending image.
03:11So, in the same Gemini chart, let's just paste this.
03:14Then we're going to select to create a video.
03:21And inside here, let's just let's just upload both of these.
03:29So, this is the starting frame and this is the end frame.
03:34And let's just click on Pro.
03:38And let's just hit on Run to create a video between these two images transitioning from starting to an ending
03:46image.
03:47And the basic idea behind this is just using the Gemini model.
03:52It does not really matter.
03:53You can use any other AI model for this video generation.
03:57So, it's really up to you, but I'm just going to use this for this example.
04:01Because I think it's the fastest and the most convenient way.
04:04You don't have to hold between 10 hundred apps or anything like that.
04:08So, it's just insane Gemini chat.
04:10So, and we got the video already.
04:13So, let's just play it.
04:21Yeah, it does seem pretty magical.
04:23So, I'm just going to download it.
04:25So, once we have the video, all that's left is just go to Cloud Code.
04:30So, let's open up Cloud.
04:32And inside Cloud Code, we're going to create a new project.
04:36So, let's just click on create a new project.
04:39Let's just name it.
04:40For example, Dock.
04:43And let's just click on create.
04:45So, inside the new project, what we have to do now is we're going to use the Sonnet 4.6
04:51model.
04:52And what would you like to work on this project?
04:56So, I also have a prompt for the website generation.
05:00The basic idea behind the website generation is to create a scroll stopping effect.
05:05So, you don't have to copy this prompt.
05:08You can just ask the cloud to make a prompt for the scrolling stop animation.
05:13That's it.
05:15It's the basic idea behind this.
05:17It's nothing so hard.
05:20Just ask for a prompt for scroll stopping animation.
05:24That's how it's called.
05:25So, if you are inside, you can just copy this prompt.
05:28But you can just write it yourself.
05:30It is not so hard.
05:34So, once you get this prompt inside here, there is also one thing left.
05:37We have this website.
05:39We want to try to make a better example.
05:42So, I'm going to copy this website link.
05:45And we're going to go to this tool where we will extract the HTML code.
05:49We just call view page source.
05:51And let's just go here.
05:53And let's paste the website handle.
05:57So, it's the andrewsmissiham.com.
06:01And we're going to click on view source.
06:03And what will happen?
06:05We will get a whole HTML code for this.
06:09So, I'm just going to click on download.
06:11Pretty simple.
06:12As you can see, here is a ton of code.
06:15And once you have it, now what's left is go inside cloud.
06:20And we're going to add these.
06:22So, add files or photos.
06:27We're going to add this thing we just downloaded.
06:31And when we add this, we also have to add the video we just downloaded from the Gemini.
06:38So, let's just search for the video.
06:41So, here's the video.
06:42So, let's just insert it too.
06:45And now what's left is just to click on run.
06:49And once you hit all of these three steps, they are crucial.
06:53But you will be having an amazing website.
06:56So, let's just get back once it's done.
06:59And I'm going to show you what we made.
07:01And then we're going to also optimize it for the SEO.
07:04So, the cloud code is done.
07:06But as you can see, it did not add the video.
07:08So, it might have forgotten it.
07:10So, let's just say add the video to hero animated icon.
07:17See the scroll stop animation.
07:21That's it.
07:22Let's just hit this with this prompt.
07:24And now it will fix all things.
07:27And it's done.
07:28Let's just take a look at the results.
07:30So, when we open up the website and if we scroll, we can see that this animation is working.
07:36And the website is here.
07:38It's just a reference for how it can look.
07:43But the whole idea that this animation is created that way.
07:48You can use any other video creation tool.
07:50For example, like Google Flow.
07:54Because as you can see, the quality inside Gemini is not the best.
07:57But I just want to show you how does this actually work.
08:01And you can create animations for any other businesses.
08:05So, even if it's plumbing, as you saw in the first example, it could be like any kind of car
08:11services.
08:11It can be dental clinics.
08:13It can be any type of business.
08:15And this thing actually makes the brand look more premium than ever before.
08:21So, and if you actually want to optimize this page for SEO.
08:26So, let's just say optimize for SEO.
08:30And when you write this simple prompt, that's actually all you need.
08:35Because AI is smart these days.
08:37And it understands what needs to be changed and what needs to be done.
08:41And if we wait a bit, we will be able to see what it's doing.
08:46So, key SA optimizations I will make.
08:50It will add meta tags.
08:51It will open graph tags.
08:53It will do Twitter card tags.
08:54It will do structured data.
08:56And all of the other 11 things.
09:00So, AI actually does understand everything.
09:03And you don't need to be an SEO pro to have an SEO optimized website for your client.
09:09All you have to do is just give it a prompt to optimize it for SEO.
09:14That's it.
09:15And one good thing about these cloud websites.
09:17They are also mobile optimized.
09:19So, if we are scrolling on mobile, we will be able to see all of this working correctly.
09:25No glitches.
09:27And the website also looks premium.
09:30So, that's the key idea behind this.
09:33Everything is optimized for mobile users.
09:35And what's only left is just to hit up this brand and tell them.
09:40We have made a cool website for you.
09:43Would you mind taking a look?
09:44And if they are agreeing on the deal, you can make thousands out of it.
09:49Because these websites do look premium.
09:52And if you are telling me you can't sell them for a lot of money.
09:55And trust me, no website is worth more than this.
09:58Because it will give everything for them what they need.
10:01You can add forms.
10:02And if you are telling me that this website is not worth, like for example, $3,000.
10:07Like what's worth than $3,000?
10:09You can add all the cool things in here.
10:11You can add forms.
10:12You can add backend.
10:13You can add some kind of AI automations inside cloud too.
10:16So, this website is all the client needs.
10:19And if you are finally want to host it online, you can also do this free.
10:23All you have to do is go onto this little button.
10:26And as you can see, you can find all the code for this website.
10:30So, you can just copy all of this code.
10:33Put it inside Notepad.
10:35And put it inside Vercel or either Netlify to host it online for free.
10:39There is not much magic going on here.
10:42It's pretty simple.
10:44And everyone can do it.
10:45So, thank you for watching.
10:47I hope you actually learned how to create these amazing animations.
10:50So, you can adapt them to any niche or any business.
10:53And they are super cool.
10:55And clients love them.
10:57Best thing about it, you don't need to extract the video to 1000 frames.
11:01And paste the frames inside the website.
11:04It's pretty simple.
11:05It's fast.
11:06Because before we used to go onto the anti-gravity.
11:09We used to go to the easy GIF.
11:11We used to convert the videos into frames.
11:13Then put the frames into folder.
11:14Then put the folder inside the anti-gravity.
11:17And it took time.
11:18And the results were worse than now.
11:20You can do everything inside Cloud Code without any headaches.
11:24And as you can see, we even got the whole website optimized for SEO while I'm speaking.
11:30So, if we open it up, nothing pretty much changed.
11:34But now it's SEO optimized.
11:36All the headings are correct.
11:38All the tags and everything.
11:40So, now it's perfect.
11:42And you can offer it to your client for a review.
11:45So, thank you guys for watching.
11:46And I will see you in the next video.
11:48And I will see you in the next video.
Comments