Hey, I just built these four websites in

about 15 minutes or so and I wanted to

share them with you because they all

have really cool 3D sexy scroll effects.

So, this is one for headphones. This

over here is one for restoring our

forest with a cool 3D globe in the

background. This one here has sort of

like an interior design vibe with a

blow-up of a house in the background.

These are all assets that I generated

with AI. This one over here is sort of

like a rotating space station look and

hopefully you guys see these are all

really really clean. So, the reason I

want to make this video is because I

want to show you how easy it is to

generate websites like this. A few years

back, this would probably be 5 to 10,000

dollars a pop and I know that because I

used to sell websites for a living. Um

now you can literally do it in less than

10 minutes for somewhere around two to

three dollars in tokens and it's way

simpler than everybody else is making it

out to be. You don't have to hop around

like 30 different platforms. There's

really just three steps and I'm going to

show them all to you right now, okay?

Let's do it. So, in a nutshell, our flow

is going to be as follows. We will write

a few bullet points into Cloud Code to

tell it what we want. Afterwards, we're

going to use a skill created by a really

cracked 16-year-old and shared on

Twitter, which I'll run you guys

through.

Then we generate an exploded view or

some sort of animated asset using a

model called Kling 3.0. Then finally,

you just integrate onto the site and

push live. So, the taste skill is really

straightforward. There's just an open

repo here that basically instills a

bunch of high-end like website design

principles and then design schematics.

Um this is how you get really easy

high-quality one-shot websites from a

simple Cloud Code prompt. So, I actually

just built a quick example here um for

an interior private jet design business.

I haven't changed anything on this

website. I literally just one-shotted it

and then, you know, it built this sort

of design. So, this skill just

standardizes a few things like spacing,

high-end luxury looks and and so on and

so forth. And then for the video

generation aspect, I use this model here

called Kling 3.0. Um I access it using a

platform called Higgsfield. It takes me

literally just like three minutes to

create a bunch of animations and you can

see what I've done here is I've created

tons for things like rotating globes.

Um, you know, this is that little

spaceship analogy. I've done a bunch

more spaceship stuff as well for other

design websites and and so on and so

forth. And then basically I just combine

it using Cloud Code in 2 seconds. Let me

show you how to actually do this. And as

mentioned, it's going to be like $5 in

tokens. It's not super complicated. What

you need first is you need Cloud Code

running in some sort of like IDE

platform, okay? Now, I have it uh set up

on this tool called Antigravity, which

is super straightforward. If you don't

know what Antigravity is or how to get

it, just head to the top right-hand

corner of this video. I'm going to link

a step-by-step guide on how to set it up

as well as what all the freaking icons

mean and how to communicate with it. But

assuming you have it set up, it's it's

very straightforward. All you have to do

is first, you tell the model about

Leon's skill. So, I'm just going to head

back over here, copy this link, and then

go straight over to my Antigravity. And

I'll say, "Use this skill

to design a high-end

website about interior design."

From here, Cloud Code is going to fetch

the skill repository to understand what

it provides. And I'm just going to give

it a good 2 minutes or so to actually do

the full website design. And that's how

easy and straightforward it is. Then all

I'm going to do is I'm going to head

over to Kling. I'm going to say,

"Generate me a high-quality 3D render

style video of panning through a 3D

interior design scene. Make the

background white. Make the assets super

high-quality. This should read like

something you'd see on a website or a

landing page." My model's going to be

Kling 3.0. I'm going to have it set for

5 seconds. I'll do a 16 by 9, which

means it's going to be wider than it is

tall, which kind of makes sense cuz it's

going to be on my my landing page. Then

the uh quality is going to be 1080p,

which is sort of like the max that you

can get. Now, 7.5 credits, to be clear,

is pretty affordable. If I just go to

Hexfield pricing over here, in terms of

pricing, this is pretty affordable. I

mean, if I go down to the pro plan, it's

30 bucks for 600 credits. If I go 7.5,

which is how many credits I spent on

that divided by 600, then I multiply it

by $29, you'll see the actual amount,

which ends up being about 36 cents. And

so, you know, realistically, I usually

recommend doing this two or three times

because you can pick the best video

output. Also, it also depends on like

what you're going to be using. I'm going

to insert a few more animations on this

website to make it like super clear how

sexy it could be. But, yeah, I mean,

like that's what, three or four bucks,

realistically? After that, you do you

are going to have some spend in terms of

your cloud code usage. That ends up

being like another dollar or so. And

then the way that I personally like

hosting these is totally free, which

I'll show you guys how to do in a sec.

Obviously, play around with

you know, styles and the prompts and

stuff like that. I'll give you guys a

good one that works really well for like

expanded design and blow up images, but

yeah, that's that's honestly enough. For

this website over here with the rotating

globe, I'll show you guys what I used

just while all that loads. Um, it's

pretty straightforward and easy.

Um, I think I just said

globe rotating in the exact same place,

center of mass should not move, just

rotating perfectly on its axis.

What I did is I went on Nano Banana,

generated an image of a globe, and then

I just fed it in, and then said that.

You guys can also just one shot it like

I'm going to do over here with this

interior design thing.

Okay, so what do we have here? We have

some cool like panning interior design.

I mean, this looks really clean, right?

I I I like this quite a bit. Um, from

here, I could actually just download

this whole thing. Okay, and then I could

open this up in another folder. What I'm

going to do is just verify that this

plays back the way that I want it to.

And it does, you know, I like that it's

in sort of a white room. It's it's super

clean. Uh, what I'll do next is just go

over to my finder.

And I'm just going to rename this. Let

me just sort by date added here to

interior design. Then I'm just going to

say, "Hey, I want you to take

interior_design.mp4,

and then make it the background image of

our hero header. Then, um, center the

hero header so that it like looks really

clean. And then apply some sort of like

inward masking gradient so that the

animation background doesn't interfere

with the background of the of the

website.

Let me just make sure it's interior

design MP4. Cool. So now it's going to

just look for interior design MP4.

It's not going to find that in my main

file directory. I think it'll find that

in downloads. Let me just say downloads.

Once it has that, it will actually go

through the whole process of sticking

that in my site. Okay, now we obviously

have like kind of a clean-looking view

here, right? It's it's pretty neat. What

they did is they actually I think tied

this to my mouse position as well, which

is why sometimes it kind of like moves

around. And I mean for a lot of people

this might be enough. I don't know. Like

maybe you guys are cool with this. I

think this is pretty sweet, but I

actually want to add more to it. What I

want is I want as I scroll down there to

be some sort of like blow-up interior 3D

design animation. So what I'm going to

do is first and foremost, I'm going to

change this that we could see the text.

So I'm just going to take a screenshot

of this. Just like as follows. Go back

to Cloud Code and I'll say,

"Hey, this looks fantastic, but I'm

having trouble seeing some of the text.

Just make it more prominent so that I

could actually see what's going on. The

subtext is super small as well."

Let's say small and hard to read. Okay,

and then while all that's going on, I'm

going to head back over to here. I'll

say, "Generate me a high-quality

exploding view diagram of a home to

showcase the interior design component

of a service. No text, white background.

It should explode in all directions

including vertically and horizontally.

And none of it should go outside of the

bounds of the video itself. I'm then

going to maybe diagram isn't maybe I'll

say animation of a home. And then I'm

going to save this and then I'm just

going to wait for this to finish and

then I'm going to do the same thing. The

one thing you can do if you have a lot

of credits like me is you can actually

just generate two or three these

simultaneously. That just improves the

probability that the final result will

be what you want. Okay, so we have our

video here and as you see things are

sort of blowing up and expanding. I

think this is really cool. So what I

want now is I basically want to download

this. Head to the bottom right-hand

corner, click download.

And then I'm going to go over here to

where it says the file. And then I'll

actually just go here and then say

interior design exploding view.

And I'll say,

"Great, I have

interior_design_exploding_view.mp4

in

download/ I want you to take that and

then create a scroll animation

immediately underneath the hero header.

As I scroll through, we should write

through two or three sections of text

that expose our design skills and then

it should also um show the exploding

view frame by frame as we go."

Just going to pump that in and I I think

that was the file name. Let me just

double-check. Yeah, it is, just with

caps. Uh so, what it's going to do is a

locomotive scroll sequence. It's going

to go and copy the video now. You can

see it's now adding some scroll reveal

logic, pretty straightforward and easy.

And then uh I'm probably going to have

to adjust the background color as well.

I'm seeing that it's not the exact same

as my website, but that's okay. Okay,

and you can see the actual website is

set up now. There is a a line here,

which I will fix, but now as we scroll

through,

looks like it's a little rough, the

actual animation itself. Um but we do

have the text that's sort of in the

middle. Looks like it applied some sort

of a shadow to it.

As I scroll through here, we're we're

basically like going through one frame

at a time.

And yeah, this is more or less what I

want. I just don't like how choppy it

is, so um I'll show you guys how to fix

up the choppiness, too. But the other

thing that I want is I basically want

You see how the background here is kind

of like significantly darker? The reason

why that happens is because the mask

that it's applying, like the little

fuzzy gradient, isn't making it all the

way to the top. So, I'm going to go back

and I'm going to say,

"Hey, there are two problems. The first

is the fuzzy gradient is uh

not strong enough and so we see a bunch

of dividing colors between the top and

then the bottom. So, make sure to make

the gradient a little bit stronger on

the top and the bottom. The second thing

is it's really laggy, so just fix up the

lag. Make it load significantly faster."

Isn't it wild how you can literally just

say make it load significantly faster in

2020 insert current year here. I was

told not to discuss whatever the current

year is by YouTube consultant in case

people watch my videos in a few years.

I think in this case that's not really

going to be a problem, but anyway, look

at what it's doing. It's going to

extract the frames as optimized JPEGs

and you know, they're just basically

like individual image files and then

it's going to tie every individual image

file to the scroll position. So, it's

going to be way faster and then we'll

also get some preloading.

As a former web developer, some of the

stuff that this thing does blows my

mind. It would have taken me like 3 days

to do what this just did in 30 seconds.

Okay. So, now as I scroll through you

see it it occurs significantly faster,

which I like. I think if we could still

optimize the hell out of it a little

more. Still have a little bit of lag.

Also, add some sort of overlay to the

text because right now it's very

difficult to see and just kind of

collides with the animation.

Okay, and then let's just make sure that

the top still works. Okay, perfect. You

see how there's like basically no

difference between these two. This is

exactly what we wanted.

So, yeah, I mean like more or less this

is it. I think realistically I'm also

going to see if maybe we could widen

this. Or if we could just phase in the

text itself alongside the actual home

exploding view and because that sort of

thing is pretty cool. And then, you

know, after we make it down to the

bottom, you could see here that, you

know, once we we we have this section

that then ties to the actual explo-

exploding view, right? Okay, this is a

lot better. Yeah, I really like this.

This is much much cleaner and then it's

also way faster, too. And yeah, I think

this is more or less it. I mean like

this is what I wanted the whole time,

right? So, cool. And then obviously we

have the rest of the website underneath

and stuff like that. So, listen. I mean

like, you know, this is running two

videos, right? Not one two videos, but

one video up at the top and then we have

like the JPEGs down here, which are

being preloaded. So, this is not going

to be like the least computationally

intensive website, but do you guys see

how easy it was for me to optimize it? I

literally just said, "Hey, make it

faster." and then it made it faster. You

could do that three or four times and

then assess whatever the quality

decreases to get it to that fast point

and then eventually have like a really

really clean look despite it also you

know, being pretty heavy

asset-wise. I think what I'll next do is

I'm just going to tie up the uh the top

uh hero header image here to make that a

little bit faster and then we'll be good

to go.

Hey, just make the hero header a little

bit faster as well. I think it's pretty

big right now. Okay, and it looks like

it just compressed it from 5.3 megs down

to 252 kilobytes.

Cool. So, this is this is a lot faster.

This is so much cleaner and you see we

don't have like weird jankiness either

like we did before.

Um and then as we make it just to that

point where the first frame starts

loading,

you know, keep in mind most people are

going to scroll through it approximately

this space, I would take it. Um yeah,

everything just loads really cohesively

and is very pretty. I could adjust the

design, make it look however the heck I

want, but yeah, we just one shotted it.

Okay, and then the last thing we need is

we obviously need to make it live,

right? So, what I'm going to do next is

go back to my agent and I'll say, "This

looks awesome. I want you to make it

live on Netlify."

Netlify is a service out there that

basically allows you to host your

websites completely free on their free

plan. So, free forever. You can deploy

from AI, Git, or an API, unlimited

deploy previews, build with whatever the

heck that means. I don't even know. And

then 300 credit limit per month with a

global CDN. The global CDN, just so you

guys know, means that people in all

different parts of the world will be

able to access your website quickly

because they won't have to make a

request like,

you know, from uh I don't know,

somewhere in Indonesia all the way to

somewhere in the United States.

They cache the websites and its files at

these thing called edge nodes, which

keep your website there, um which allow

it to to load way faster.

Okay, and then I'm just going to head

back over here, um literally give this

button a click, and we now have our

website live. I mean, this is actually

live on the internet at this link,

atelieramerin.netlify.app.

So, just for shits and gigs, I'm going

to leave this up and you can actually

access this at any point um to see sort

of what this website looks like and, you

know, how it works. Um another thing is

I haven't mobile optimized the site, but

you guys can mobile optimize this

really, really quickly. Obviously, all

you really need to do is say, "Hey,

mobile optimize the site three or four

times." The model will do it. Okay?

So, you know, I made this video because

everybody and their mom is just like,

"Oh my god, these website design

frameworks are the reason why we're

capable of doing this this these sites

so well and then they show you like

35,000 steps and it's a massive pain in

the butt.

To make a long story short, it is

nowhere near that complicated to

actually make a nice high-quality

sexy-looking site as you guys see here.

So, hopefully you appreciated the video.

Uh if you like this sort of thing,

please subscribe. Something like 73% of

viewers are not subscribed for whatever

reason despite they watching all of my

content on repeat. Um if you are in the

73% you'd be doing me a bit solid. Like

uh and you can also get all the prompts

and everything like that for this video

down below in the description. I'm

giving all that stuff away for free.

Have a lovely rest of your day.